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

package/components/input/text/util.js

@@ -3,165 +3,260 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applyAutoCapitalize = applyAutoCapitalize;
 exports.autoCapitalize = autoCapitalize;
-exports.removeDisplayFormat = exports.formatInput = void 0;
-var formatInput = exports.formatInput = function formatInput(value, format) {
-  if (!format || !value) return value;
-  value = value.toString();
-  var digitsOnly = value.replace(/\D/g, "");
-  var formatDigits = format.replace(/[^9]/g, "");
-  var maxDigits = formatDigits.length;
-  if (format === "999-99-9999") {
-    if (digitsOnly.length === 0) return "";
-    var result = digitsOnly.substring(0, Math.min(3, digitsOnly.length));
-    if (digitsOnly.length > 3) {
-      result += "-" + digitsOnly.substring(3, Math.min(5, digitsOnly.length));
-    }
-    if (digitsOnly.length > 5) {
-      result += "-" + digitsOnly.substring(5, Math.min(9, digitsOnly.length));
-    }
-    return result;
-  }
-  if (format === "(999) 999-9999") {
-    if (digitsOnly.length === 0) return "";
-    var _result = "(" + digitsOnly.substring(0, Math.min(3, digitsOnly.length));
-    if (digitsOnly.length > 3) {
-      _result += ") " + digitsOnly.substring(3, Math.min(6, digitsOnly.length));
-    }
-    if (digitsOnly.length > 6) {
-      _result += "-" + digitsOnly.substring(6, Math.min(10, digitsOnly.length));
-    }
-    return _result;
-  }
-  if (format === "(999) 999-9999 ext. 999") {
-    if (digitsOnly.length === 0) return "";
-    var _result2 = "(" + digitsOnly.substring(0, Math.min(3, digitsOnly.length));
-    if (digitsOnly.length > 3) {
-      _result2 += ") " + digitsOnly.substring(3, Math.min(6, digitsOnly.length));
-    }
-    if (digitsOnly.length > 6) {
-      _result2 += "-" + digitsOnly.substring(6, Math.min(10, digitsOnly.length));
-    }
-    if (digitsOnly.length > 10) {
-      _result2 += " ext. " + digitsOnly.substring(10);
+exports.removeDisplayFormat = exports.getFormatMaxLength = exports.formatInput = void 0;
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Format placeholders:
+ * - 9: Any digit (0-9)
+ * - A: Any letter (A-Z, a-z) - will be uppercased
+ * - a: Any letter (A-Z, a-z) - will be lowercased
+ * - X: Any alphanumeric character (preserves case)
+ * - ?: Makes the preceding placeholder optional
+ * - All other characters (including *, -, (, ), etc.) are treated as literal separators/static text
+ *
+ * Examples:
+ *   999-99-9999         → SSN format
+ *   (999) 999-9999      → US phone
+ *   AA-9999             → License plate (letters uppercased)
+ *   XXX-XXX             → Any 6 alphanumeric chars with dash
+ *   (***: AAA-999)      → Literal asterisks with letters and digits
+ */
+
+/**
+ * Parse format string into tokens for processing
+ */
+var parseFormatTokens = function parseFormatTokens(format) {
+  var tokens = [];
+  var i = 0;
+  while (i < format.length) {
+    var _char = format[i];
+    var nextChar = format[i + 1];
+    var isOptional = nextChar === "?";
+    if (_char === "9") {
+      tokens.push({
+        type: "digit",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "A") {
+      tokens.push({
+        type: "letter-upper",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "a") {
+      tokens.push({
+        type: "letter-lower",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "X") {
+      // X = alphanumeric placeholder (use X instead of * to avoid conflicts with literal asterisks)
+      tokens.push({
+        type: "alphanumeric",
+        "char": _char,
+        optional: isOptional
+      });
+      i += isOptional ? 2 : 1;
+    } else if (_char === "?") {
+      // Standalone ? without preceding placeholder - treat as literal
+      tokens.push({
+        type: "literal",
+        "char": _char,
+        optional: false
+      });
+      i++;
+    } else {
+      // All other characters are literals (including *, -, (, ), spaces, etc.)
+      tokens.push({
+        type: "literal",
+        "char": _char,
+        optional: false
+      });
+      i++;
     }
-    return _result2;
   }
-  if (format === "(9?9?9?) 9?9?9?-9?9?9?9?9?9?") {
-    var _result3 = "";
-    var areaCode = "";
-    var prefix = "";
-    var number = "";
-    if (digitsOnly.length > 0) {
-      areaCode = "(" + digitsOnly.substring(0, Math.min(3, digitsOnly.length));
-      if (digitsOnly.length < 3) {
-        return areaCode;
-      }
-      areaCode += ") ";
-    }
-    if (digitsOnly.length > 3) {
-      prefix = digitsOnly.substring(3, Math.min(6, digitsOnly.length));
-      if (digitsOnly.length < 6) {
-        return areaCode + prefix;
+  return tokens;
+};
+
+/**
+ * Extract input characters that can be used for formatting
+ * Returns an array of characters with their types
+ */
+var extractInputChars = function extractInputChars(value) {
+  var chars = [];
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _char2 = _step.value;
+      var isDigit = /\d/.test(_char2);
+      var isLetter = /[A-Za-z]/.test(_char2);
+      if (isDigit || isLetter) {
+        chars.push({
+          "char": _char2,
+          isDigit: isDigit,
+          isLetter: isLetter
+        });
       }
-      prefix += "-";
-    }
-    if (digitsOnly.length > 6) {
-      number = digitsOnly.substring(6);
-    }
-    _result3 = areaCode + prefix + number;
-    return _result3;
-  }
-  if (format === "9999 9999 9999 9999") {
-    // Credit card format
-    var _result4 = "";
-    for (var i = 0; i < digitsOnly.length && i < 16; i += 4) {
-      if (i > 0) _result4 += " ";
-      _result4 += digitsOnly.substring(i, Math.min(i + 4, digitsOnly.length));
     }
-    return _result4;
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
-  if (format === "AA-9999") {
-    var _value$match;
-    // Alpha-numeric format
-    var _result5 = "";
-    var alphaOnly = ((_value$match = value.match(/[A-Za-z]*/g)) === null || _value$match === void 0 ? void 0 : _value$match.join("")) || "";
-    if (alphaOnly.length > 0) {
-      _result5 = alphaOnly.substring(0, Math.min(2, alphaOnly.length)).toUpperCase();
-    }
-    if (digitsOnly.length > 0 && _result5.length > 0) {
-      _result5 += "-";
-    }
-    if (digitsOnly.length > 0) {
-      _result5 += digitsOnly.substring(0, Math.min(4, digitsOnly.length));
-    }
-    return _result5;
-  }
-  if (format === "(***: AAA-999)") {
-    var _value$match2;
-    // Special format with asterisks
-    var _result6 = "(";
-    _result6 += "***";
-    _result6 += ": ";
-    var _alphaOnly = ((_value$match2 = value.match(/[A-Za-z]*/g)) === null || _value$match2 === void 0 ? void 0 : _value$match2.join("")) || "";
-    if (_alphaOnly.length > 0) {
-      _result6 += _alphaOnly.substring(0, Math.min(3, _alphaOnly.length)).toUpperCase();
+  return chars;
+};
+
+/**
+ * Count the maximum number of input characters the format can accept
+ */
+var getMaxInputLength = function getMaxInputLength(tokens) {
+  return tokens.filter(function (t) {
+    return t.type === "digit" || t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric";
+  }).length;
+};
+
+/**
+ * Universal format input function that handles any display format pattern
+ */
+var formatInput = exports.formatInput = function formatInput(value, format) {
+  if (!format || value === null || value === undefined) return value !== null && value !== void 0 ? value : "";
+  if (value === "") return "";
+  value = value.toString();
+  var tokens = parseFormatTokens(format);
+  var inputChars = extractInputChars(value);
+  if (inputChars.length === 0) return "";
+  var result = "";
+  var inputIndex = 0;
+  var pendingLiterals = "";
+  for (var tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
+    var token = tokens[tokenIndex];
+
+    // No more input characters - stop processing
+    if (inputIndex >= inputChars.length) {
+      break;
     }
-    if (digitsOnly.length > 0) {
-      _result6 += "-";
-      _result6 += digitsOnly.substring(0, Math.min(3, digitsOnly.length));
+    if (token.type === "literal") {
+      // Collect literals but don't add them yet
+      pendingLiterals += token["char"];
+      continue;
     }
-    _result6 += ")";
-    return _result6;
-  }
 
-  // Generic formatter for other patterns
-  if (format.includes("9")) {
-    var _result7 = "";
-    var digitIndex = 0;
-    var _formatDigits = format.replace(/[^9]/g, "");
-    var _maxDigits = _formatDigits.length;
+    // Find a matching input character for this token
+    var matched = false;
+    var inputChar = inputChars[inputIndex];
+    if (token.type === "digit" && inputChar !== null && inputChar !== void 0 && inputChar.isDigit) {
+      // Flush pending literals before adding the matched character
+      result += pendingLiterals + inputChar["char"];
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-upper" && inputChar !== null && inputChar !== void 0 && inputChar.isLetter) {
+      result += pendingLiterals + inputChar["char"].toUpperCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "letter-lower" && inputChar !== null && inputChar !== void 0 && inputChar.isLetter) {
+      result += pendingLiterals + inputChar["char"].toLowerCase();
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    } else if (token.type === "alphanumeric" && (inputChar !== null && inputChar !== void 0 && inputChar.isDigit || inputChar !== null && inputChar !== void 0 && inputChar.isLetter)) {
+      result += pendingLiterals + inputChar["char"];
+      pendingLiterals = "";
+      inputIndex++;
+      matched = true;
+    }
 
-    // Limit digitsOnly to maxDigits from format
-    var limitedDigits = digitsOnly.substring(0, _maxDigits);
-    for (var _i2 = 0; _i2 < format.length && digitIndex < limitedDigits.length; _i2++) {
-      if (format[_i2] === "9") {
-        _result7 += limitedDigits[digitIndex++] || "";
-      } else {
-        // Only add separator if there are more digits to come
-        if (digitIndex < limitedDigits.length) {
-          _result7 += format[_i2];
+    // If no match and token is not optional, try to skip input chars to find match
+    if (!matched && !token.optional) {
+      // Look ahead in input to find a matching character
+      var foundMatch = false;
+      for (var lookAhead = inputIndex; lookAhead < inputChars.length; lookAhead++) {
+        var lookAheadChar = inputChars[lookAhead];
+        if (token.type === "digit" && lookAheadChar.isDigit) {
+          result += pendingLiterals + lookAheadChar["char"];
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "letter-upper" && lookAheadChar.isLetter) {
+          result += pendingLiterals + lookAheadChar["char"].toUpperCase();
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "letter-lower" && lookAheadChar.isLetter) {
+          result += pendingLiterals + lookAheadChar["char"].toLowerCase();
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
+        } else if (token.type === "alphanumeric") {
+          result += pendingLiterals + lookAheadChar["char"];
+          pendingLiterals = "";
+          inputIndex = lookAhead + 1;
+          foundMatch = true;
+          break;
         }
       }
+
+      // If still no match found, stop processing
+      if (!foundMatch) {
+        break;
+      }
     }
-    return _result7;
   }
-
-  // Fallback: return original value
-  return value;
+  return result;
 };
 
 /**
  * Removes display format characters from the value
- * Keeps only alphanumeric characters based on the format type
+ * Intelligently extracts only the meaningful input characters based on format type
  */
 var removeDisplayFormat = exports.removeDisplayFormat = function removeDisplayFormat(value, format) {
   if (!format || !value) return value;
   value = value.toString();
+  var tokens = parseFormatTokens(format);
 
-  // For alphanumeric formats (like AA-9999), keep both letters and numbers
-  if (format.includes("A")) {
+  // Determine what character types the format accepts
+  var acceptsDigits = tokens.some(function (t) {
+    return t.type === "digit" || t.type === "alphanumeric";
+  });
+  var acceptsLetters = tokens.some(function (t) {
+    return t.type === "letter-upper" || t.type === "letter-lower" || t.type === "alphanumeric";
+  });
+  if (acceptsDigits && acceptsLetters) {
+    // Mixed format: keep both letters and numbers
     return value.replace(/[^A-Za-z0-9]/g, "");
-  }
-
-  // For numeric-only formats, keep only digits
-  if (format.includes("9")) {
+  } else if (acceptsLetters) {
+    // Letters only format
+    return value.replace(/[^A-Za-z]/g, "");
+  } else if (acceptsDigits) {
+    // Digits only format
     return value.replace(/\D/g, "");
   }
 
-  // Default: return the value as-is
+  // Default: return the value as-is (no placeholders in format)
   return value;
 };
+
+/**
+ * Get the maximum number of input characters allowed by the format
+ */
+var getFormatMaxLength = exports.getFormatMaxLength = function getFormatMaxLength(format) {
+  if (!format) return Infinity;
+  var tokens = parseFormatTokens(format);
+  return getMaxInputLength(tokens);
+};
 function autoCapitalize(value, type) {
   if (!value) return value;
   switch (type) {
@@ -178,4 +273,62 @@ function autoCapitalize(value, type) {
     default:
       return value;
   }
+}
+
+/**
+ * Applies autocapitalize logic to a character being inserted in real-time
+ * @param newValue - The complete new value after character insertion
+ * @param previousValue - The value before character insertion
+ * @param cursorPosition - The cursor position after insertion
+ * @param mode - The autocapitalize mode: "words", "sentence", "characters", or "none"
+ * @returns Object with capitalized value and whether capitalization was applied
+ */
+function applyAutoCapitalize(newValue, previousValue, cursorPosition, mode) {
+  // Only process if a character was inserted (not deleted)
+  if (mode === "none" || newValue.length <= previousValue.length) {
+    return {
+      value: newValue,
+      wasCapitalized: false
+    };
+  }
+  var insertedChar = newValue[cursorPosition - 1];
+  var shouldCapitalize = false;
+
+  // Only capitalize alphabetic characters
+  if (!/[a-zA-Z]/.test(insertedChar)) {
+    return {
+      value: newValue,
+      wasCapitalized: false
+    };
+  }
+  if (mode === "characters") {
+    // Capitalize every character
+    shouldCapitalize = true;
+  } else if (mode === "words") {
+    // Capitalize first letter of each word (after space or at start)
+    shouldCapitalize = cursorPosition === 1 || newValue[cursorPosition - 2] === " ";
+  } else if (mode === "sentences") {
+    // Capitalize first letter after sentence-ending punctuation (. ! ?)
+    if (cursorPosition === 1) {
+      shouldCapitalize = true;
+    } else {
+      // Check if we're at the start of a sentence
+      var textBefore = newValue.substring(0, cursorPosition - 1);
+      // Match sentence-ending punctuation followed by optional spaces
+      var sentenceEndPattern = /[.!?]\s*$/;
+      shouldCapitalize = sentenceEndPattern.test(textBefore);
+    }
+  }
+  if (shouldCapitalize && insertedChar === insertedChar.toLowerCase()) {
+    // Replace the lowercase character with uppercase
+    var capitalizedValue = newValue.substring(0, cursorPosition - 1) + insertedChar.toUpperCase() + newValue.substring(cursorPosition);
+    return {
+      value: capitalizedValue,
+      wasCapitalized: true
+    };
+  }
+  return {
+    value: newValue,
+    wasCapitalized: false
+  };
 }

package/components/input/textarea/index.js

@@ -16,6 +16,7 @@ var lodash = _interopRequireWildcard(require("lodash-es"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
 var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
 var _delay = _interopRequireDefault(require("lodash/delay"));
+var _util = require("../util");
 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; }
@@ -295,18 +296,22 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
   } : {}), props.onClick ? {
     onClick: props.onClick
   } : {});
+  var value = (0, _util.sanitizeInputValue)(displayValue);
+  var isEditable = !readonly && !disabled;
   return __jsx(_react["default"].Fragment, null, __jsx(_TextField["default"], (0, _extends2["default"])({
+    hidden: props.hidden,
     multiline: true,
     variant: "standard",
     name: name,
     title: props.hint,
     id: id || name,
     placeholder: placeholder || "Place your text here",
-    value: displayValue,
+    value: value,
     required: required,
     disabled: disabled,
     error: isDirty && error.show,
     className: (0, _clsx["default"])("app-input-wrapper", isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
+    style: styles,
     "aria-readonly": readonly,
     slotProps: {
       htmlInput: {
@@ -320,23 +325,21 @@ var WmTextarea = /*#__PURE__*/(0, _react.memo)(function (props) {
         ref: textareaRef,
         onKeyDown: handleKeyDown,
         onKeyUp: handleKeyUp,
-        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid"),
-        pattern: regexp,
-        style: _objectSpread({
-          height: "none",
-          resize: "both",
-          overflow: "auto"
-        }, styles)
+        className: (0, _clsx["default"])(DEFAULT_CLASS, className, isTouched ? "ng-touched" : "ng-untouched", isDirty && "ng-invalid", isEditable ? "wm-textarea-editable" : ""),
+        pattern: regexp
       }
     },
     sx: {
-      width: "100%"
+      width: "100%",
+      "& .MuiInputBase-input": _objectSpread({}, styles.height ? {
+        height: "".concat(styles.height, " !important")
+      } : {})
     }
   }, events)), maxchars && __jsx(_Box["default"], {
     className: "textarea-count"
   }, limitdisplaytext.replaceAll("undefined", "".concat((displayValue === null || displayValue === void 0 ? void 0 : displayValue.length) || 0))));
 }, function (prev, current) {
-  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext"];
+  var keys = ["datavalue", "disabled", "required", "readonly", "placeholder", "maxchars", "tabindex", "shortcutkey", "autofocus", "arialabel", "limitdisplaytext", "hidden"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/input/upload/index.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _link = _interopRequireDefault(require("next/link"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _withFormController = _interopRequireDefault(require("../../data/form/form-controller/withFormController"));
+var _image = _interopRequireDefault(require("next/image"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var WmUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    formField = props.formField,
+    datavalue = props.datavalue,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    type = props.type,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    listener = props.listener;
+  var fileInputRef = (0, _react.useRef)(null);
+  var prevDatavalue = (0, _react.useRef)(datavalue);
+
+  // Check if we have existing file data
+  var isImage = (formField === null || formField === void 0 ? void 0 : formField.filetype) === "image";
+  var handleFileChange = function handleFileChange(event) {
+    var _event$target$files;
+    var file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0]) || null;
+
+    // For blob type, we need to call listener.onChange to update the form data
+    // The form controller will handle the actual value from the event.target.value
+    if (type === "file") {
+      var _listener$onChange;
+      listener === null || listener === void 0 || (_listener$onChange = listener.onChange) === null || _listener$onChange === void 0 || _listener$onChange.call(listener, props.fieldName || props.name, {
+        datavalue: file
+      });
+    } else {
+      var _listener$onChange2;
+      // For blob type, pass the file name/path from the input value
+      listener === null || listener === void 0 || (_listener$onChange2 = listener.onChange) === null || _listener$onChange2 === void 0 || _listener$onChange2.call(listener, props.fieldName || props.name, {
+        datavalue: event.target.value
+      });
+    }
+    if (onChange) {
+      onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], type === "file" ? file : event.target.value, prevDatavalue.current);
+    }
+    prevDatavalue.current = file;
+  };
+  var handleFileFocus = function handleFileFocus(event) {
+    if (onFocus) {
+      onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+  var handleFileBlur = function handleFileBlur(event) {
+    if (onBlur) {
+      onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+
+  // Render existing file display
+  var renderExistingFile = (0, _react.useCallback)(function () {
+    var fileUrl = (formField === null || formField === void 0 ? void 0 : formField.href) || (formField === null || formField === void 0 ? void 0 : formField.datavalue);
+    if (!fileUrl || type !== "file") return null;
+    return __jsx("div", {
+      className: "existing-file-display"
+    }, isImage ? __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx(_image["default"], {
+      style: {
+        height: "2em"
+      },
+      className: "wi wi-file",
+      src: fileUrl,
+      alt: "Existing file"
+    })) : __jsx(_link["default"], {
+      className: "form-control-static",
+      href: fileUrl
+    }, __jsx("i", {
+      className: "wi wi-file"
+    })));
+  }, [formField === null || formField === void 0 ? void 0 : formField.href, formField === null || formField === void 0 ? void 0 : formField.datavalue, isImage, type]);
+  (0, _react.useEffect)(function () {
+    if (!datavalue) {
+      // clear field input value
+      fileInputRef.current && (fileInputRef.current.value = "");
+    }
+  }, [datavalue]);
+  return __jsx("div", {
+    className: className,
+    style: style
+  }, renderExistingFile(), __jsx("input", (0, _extends2["default"])({}, props, {
+    hidden: props.hidden,
+    ref: fileInputRef,
+    type: "file",
+    name: "".concat(name, "_formWidget"),
+    className: "app-blob-upload",
+    required: required,
+    readOnly: readonly,
+    disabled: disabled,
+    onChange: handleFileChange,
+    onFocus: handleFileFocus,
+    onBlur: handleFileBlur
+  })));
+}, function (prev, current) {
+  var keys = ["name", "formField", "datavalue", "readonly", "required", "type", "onChange", "className", "style"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmUpload));

package/components/input/upload/props.js

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