@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/fileupload/Utils.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isValidFile = exports.handleErrorFiles = exports.getValidFiles = exports.getDefaultChooseFilter = exports.generateFileId = exports.dialogService = exports.clearFile = void 0;
+var _lodashEs = require("lodash-es");
+var _constants = require("../../constants");
+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; }
+// Simple app function to call notifyApp on listener
+var app = function app(listener) {
+  return {
+    notifyApp: function notifyApp(message, type) {
+      if (listener && listener.App && listener.App.notifyApp) {
+        listener.App.notifyApp(message, type);
+      }
+    }
+  };
+};
+var dialogService = exports.dialogService = {
+  showAppConfirmDialog: function showAppConfirmDialog(_ref) {
+    var title = _ref.title,
+      message = _ref.message,
+      onOk = _ref.onOk,
+      onCancel = _ref.onCancel;
+    if (confirm("".concat(title, ": ").concat(message))) {
+      onOk();
+    } else {
+      onCancel();
+    }
+  },
+  closeAppConfirmDialog: function closeAppConfirmDialog() {}
+};
+var getDefaultChooseFilter = exports.getDefaultChooseFilter = function getDefaultChooseFilter(allowedExtensions) {
+  return allowedExtensions.includes("*/*") ? "" : allowedExtensions.join(" ");
+};
+var isValidFile = exports.isValidFile = function isValidFile(filename, contenttype, extensionName) {
+  if (!contenttype) {
+    return true;
+  }
+  var contentTypes = contenttype.toLowerCase().split(" ").map(function (type) {
+    return type.trim();
+  });
+
+  // Check for direct extension match (e.g., ".csv", ".pdf")
+  if (contentTypes.some(function (type) {
+    return type === ".".concat(extensionName.toLowerCase());
+  })) {
+    return true;
+  }
+
+  // Check for MIME type patterns
+  var _iterator = _createForOfIteratorHelper(contentTypes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var type = _step.value;
+      if (type === "image/*" || type === "image") {
+        if ((0, _constants.isImageFile)(filename)) return true;
+      }
+      if (type === "audio/*" || type === "audio") {
+        if ((0, _constants.isAudioFile)(filename)) return true;
+      }
+      if (type === "video/*" || type === "video") {
+        if ((0, _constants.isVideoFile)(filename)) return true;
+      }
+      if (type === "document" || type === "pdf" || type === "doc") {
+        if ((0, _constants.isDocumentFile)(filename)) return true;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return false;
+};
+var getValidFiles = exports.getValidFiles = function getValidFiles($files, contenttype, extensions, filetype, chooseFilter, maxfilesize, onError, listener) {
+  var validFiles = [];
+  var errorFiles = [];
+  var MAXFILEUPLOAD_SIZE = (typeof maxfilesize === "number" ? maxfilesize : parseFloat(maxfilesize || "10")) * _constants.fileUploadConstants.DEFAULT_VALUES.FILESIZE_MB;
+  var MAX_FILE_UPLOAD_FORMATTED_SIZE = (maxfilesize || "1") + "MB";
+  var currentChooseFilter = chooseFilter === _constants.fileUploadConstants.DEFAULT_CLASSES.DEVICE_CONTENTTYPES.FILES ? "" : contenttype || extensions || filetype || chooseFilter;
+  (0, _lodashEs.forEach)($files, function (file) {
+    // Check file extension
+    if (!isValidFile(file.name, currentChooseFilter, (0, _constants.getFileExtension)(file.name))) {
+      var msg = "Invalid file extension ".concat(currentChooseFilter);
+      handleErrorFiles("INVALID_FILE_EXTENSION", msg, file, errorFiles, onError, listener);
+      return;
+    }
+    // Check file size
+    if (file.size > MAXFILEUPLOAD_SIZE) {
+      var _msg = "File size exceeded limit. Max upload size is ".concat(MAX_FILE_UPLOAD_FORMATTED_SIZE);
+      handleErrorFiles("INVALID_FILE_SIZE", _msg, file, errorFiles, onError, listener);
+      return;
+    }
+    validFiles.push(file);
+  });
+  return {
+    validFiles: validFiles,
+    errorFiles: errorFiles
+  };
+};
+var handleErrorFiles = exports.handleErrorFiles = function handleErrorFiles(key, msg, file, errorFiles, onError, listener) {
+  if (!onError) {
+    app(listener).notifyApp(msg, "Error");
+  }
+  var error = {
+    key: key,
+    message: msg
+  };
+  onError === null || onError === void 0 || onError(event, listener, file);
+  file.error = error;
+  errorFiles.push(file);
+};
+var clearFile = exports.clearFile = function clearFile(files, file) {
+  return files.filter(function (fileObj) {
+    var _fileObj$_response, _response;
+    var fileObjResponse = (_fileObj$_response = fileObj._response) === null || _fileObj$_response === void 0 ? void 0 : _fileObj$_response.fileName;
+    var fileResponse = (_response = file._response) === null || _response === void 0 ? void 0 : _response.fileName;
+    return fileObjResponse !== fileResponse || fileObj.name !== file.name || file !== fileObj;
+  });
+};
+var generateFileId = exports.generateFileId = function generateFileId() {
+  // Use crypto.randomUUID() if available (modern browsers), fallback to custom implementation
+  if (typeof window !== "undefined" && typeof crypto !== "undefined" && crypto.randomUUID) {
+    return "file-" + crypto.randomUUID();
+  }
+
+  // Fallback for older browsers
+  return "file-" + Date.now().toString(36) + Math.random().toString(36).substr(2);
+};

package/components/input/fileupload/components/ListItems.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ListItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _Folder = _interopRequireDefault(require("@mui/icons-material/Folder"));
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
+var _constants = require("../../../constants");
+var __jsx = _react["default"].createElement;
+var CommonFile = function CommonFile(_ref) {
+  var uploadedFiles = _ref.uploadedFiles,
+    selectedFolders = _ref.selectedFolders,
+    filelistheight = _ref.filelistheight,
+    readonly = _ref.readonly,
+    clearSelectedFile = _ref.clearSelectedFile,
+    onBeforedelete = _ref.onBeforedelete,
+    onFileDelete = _ref.onFileDelete,
+    setSelectedFolders = _ref.setSelectedFolders;
+  var fileUploadComponents = [];
+  // Render uploaded files list
+  if (uploadedFiles.length > 0) {
+    fileUploadComponents.push(__jsx("div", {
+      key: "file-list",
+      className: "file-list-container",
+      style: {
+        maxHeight: filelistheight || 400,
+        overflow: "auto"
+      }
+    }, __jsx(_List["default"], {
+      className: "list-group file-upload",
+      dense: true
+    }, uploadedFiles.map(function (file, index) {
+      return __jsx(ListItem, {
+        key: file.uniqueId || "file-".concat(index),
+        file: file,
+        index: index,
+        clearSelectedFile: clearSelectedFile,
+        onBeforedelete: onBeforedelete,
+        onFileDelete: onFileDelete
+      });
+    }))));
+  }
+
+  // Render selected folders list
+  if (selectedFolders.length > 0) {
+    fileUploadComponents.push(__jsx(_List["default"], {
+      key: "folder-list",
+      dense: true
+    }, selectedFolders.map(function (folder, index) {
+      return __jsx("li", {
+        key: index,
+        className: "file-upload-status error"
+      }, __jsx(_ListItemIcon["default"], null, __jsx(_Folder["default"], null)), __jsx(_ListItemText["default"], {
+        primary: folder.name,
+        secondary: "Folders cannot be uploaded"
+      }), __jsx(_IconButton["default"], {
+        onClick: function onClick() {
+          return setSelectedFolders(function (prev) {
+            return prev.filter(function (_, i) {
+              return i !== index;
+            });
+          });
+        },
+        edge: "end",
+        "aria-label": "clear",
+        size: "small",
+        disabled: readonly
+      }, __jsx(_Clear["default"], {
+        fontSize: "small"
+      })));
+    })));
+  }
+  return __jsx(_react["default"].Fragment, null, fileUploadComponents);
+};
+var _default = exports["default"] = CommonFile;
+var ListItem = exports.ListItem = function ListItem(_ref2) {
+  var _file$_response$;
+  var file = _ref2.file,
+    index = _ref2.index,
+    clearSelectedFile = _ref2.clearSelectedFile,
+    onBeforedelete = _ref2.onBeforedelete,
+    onFileDelete = _ref2.onFileDelete;
+  return __jsx("li", {
+    key: "file-".concat(file.uniqueId || index),
+    className: "file-upload-status list-group-item ".concat(file.status || "")
+  }, __jsx(_Box["default"], {
+    component: "div",
+    className: "media upload-file-list",
+    sx: {
+      width: "100%"
+    }
+  }, __jsx("div", {
+    className: "".concat((0, _constants.getFileIconClass)(file.storageName || file.name), " file-icon media-left media-middle")
+  }), __jsx("div", {
+    className: "media-body media-middle file-details"
+  }, __jsx("p", {
+    className: "uploaddetails col-md-3"
+  }, __jsx("span", {
+    className: "upload-title"
+  }, file.storageName || file.name), file.status === "success" && __jsx("span", {
+    className: "status-icon text-success wi wi-check-circle"
+  }), __jsx("br", null), __jsx("span", {
+    className: "filesize"
+  }, Math.round((file._response && ((_file$_response$ = file._response[0]) === null || _file$_response$ === void 0 ? void 0 : _file$_response$.length) || file.size || 0) / 1024), " ", "KB"), file.status === "error" && __jsx("span", {
+    className: "status-icon status-icon text-danger wi wi-error"
+  }), file.status === "error" && __jsx("span", {
+    className: "error-message"
+  }, "Upload Failed")), file.status === "onProgress" && file.progress !== undefined && file.progress >= 0 && __jsx("div", {
+    className: "col-md-1 upload-progress-percentage"
+  }, file.progress || 0, "%")), __jsx("div", {
+    className: "media-right media-middle"
+  }, __jsx("a", {
+    type: "button",
+    className: "btn btn-transparent btn-default status-icon",
+    onClick: function onClick() {
+      clearSelectedFile(file);
+    }
+  }, __jsx("i", {
+    className: "wi wi-clear"
+  }))), __jsx("div", {
+    className: "media-right media-middle"
+  }, __jsx("a", {
+    type: "button",
+    className: "btn btn-transparent btn-default status-icon",
+    onClick: function onClick(e) {
+      onBeforedelete === null || onBeforedelete === void 0 || onBeforedelete(e, file);
+      onFileDelete(e, file);
+    }
+  }, __jsx("i", {
+    className: "wi wi-delete"
+  })))));
+};

package/components/input/fileupload/components/MultiUpload.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var MultipleFileUpload = function MultipleFileUpload(_ref) {
+  var fileInputRef = _ref.fileInputRef,
+    multiple = _ref.multiple,
+    contenttype = _ref.contenttype,
+    extensions = _ref.extensions,
+    filetype = _ref.filetype,
+    _ref$caption = _ref.caption,
+    caption = _ref$caption === void 0 ? "Upload" : _ref$caption,
+    chooseFilter = _ref.chooseFilter,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    required = _ref.required,
+    arialabel = _ref.arialabel,
+    displayname = _ref.displayname,
+    tabindex = _ref.tabindex,
+    iconclass = _ref.iconclass,
+    fileuploadmessage = _ref.fileuploadmessage,
+    highlightDropArea = _ref.highlightDropArea,
+    triggerFileSelect = _ref.triggerFileSelect,
+    onFileSelect = _ref.onFileSelect,
+    dragOverHandler = _ref.dragOverHandler,
+    onFileDrop = _ref.onFileDrop,
+    setHighlightDropArea = _ref.setHighlightDropArea,
+    onBeforeselect = _ref.onBeforeselect,
+    styles = _ref.styles;
+  var handleClick = function handleClick(e) {
+    onBeforeselect === null || onBeforeselect === void 0 || onBeforeselect(e);
+  };
+  return __jsx("div", {
+    className: "app-multi-file-upload"
+  }, __jsx("div", {
+    className: "drop-box ".concat(highlightDropArea ? "highlight-drop-box" : ""),
+    id: "dropzone",
+    onClick: disabled || readonly ? undefined : triggerFileSelect,
+    onDragOver: dragOverHandler,
+    onDrop: onFileDrop,
+    onDragLeave: function onDragLeave() {
+      return setHighlightDropArea(false);
+    },
+    style: styles
+  }, __jsx("i", {
+    className: iconclass
+  }), __jsx("div", {
+    className: "message"
+  }, __jsx("label", {
+    className: "upload-label",
+    htmlFor: "Upload"
+  }, caption), __jsx(_Box["default"], {
+    component: "form",
+    className: "form-horizontal"
+  }, __jsx("input", {
+    ref: fileInputRef,
+    type: "file",
+    name: "files",
+    multiple: multiple,
+    accept: chooseFilter,
+    disabled: disabled || readonly,
+    required: required,
+    "aria-label": arialabel || displayname || "File selection field",
+    onChange: onFileSelect,
+    className: "file-input",
+    tabIndex: tabindex,
+    style: {
+      display: "none"
+    },
+    onClick: handleClick
+  }), __jsx("a", {
+    className: "app-anchor upload-label",
+    onClick: disabled || readonly ? undefined : triggerFileSelect
+  }, fileuploadmessage || "Drop your files here or click here to browse")), __jsx("label", {
+    className: "upload-extensions",
+    htmlFor: "extensions"
+  }, chooseFilter || "All files", " only", " "))));
+};
+var _default = exports["default"] = MultipleFileUpload;

package/components/input/fileupload/components/SingleUpload.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var __jsx = _react["default"].createElement;
+var SingleFileUpload = function SingleFileUpload(_ref) {
+  var fileInputRef = _ref.fileInputRef,
+    caption = _ref.caption,
+    displayname = _ref.displayname,
+    contenttype = _ref.contenttype,
+    extensions = _ref.extensions,
+    filetype = _ref.filetype,
+    chooseFilter = _ref.chooseFilter,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    required = _ref.required,
+    arialabel = _ref.arialabel,
+    tabindex = _ref.tabindex,
+    iconclass = _ref.iconclass,
+    styles = _ref.styles,
+    triggerFileSelect = _ref.triggerFileSelect,
+    onFileSelect = _ref.onFileSelect,
+    onBeforeselect = _ref.onBeforeselect;
+  var handleClick = function handleClick(e) {
+    onBeforeselect === null || onBeforeselect === void 0 || onBeforeselect(e);
+  };
+  return __jsx("div", {
+    className: "app-single-file-upload"
+  }, __jsx("div", {
+    className: "app-button-wrapper"
+  }, __jsx(_Box["default"], {
+    component: "form",
+    className: "form-horizontal"
+  }, __jsx("input", {
+    ref: fileInputRef,
+    type: "file",
+    name: "files",
+    accept: chooseFilter,
+    disabled: disabled || readonly,
+    required: required,
+    "aria-label": arialabel || displayname || "File selection field",
+    onChange: onFileSelect,
+    className: "file-input",
+    tabIndex: tabindex,
+    style: {
+      display: "none"
+    },
+    onClick: handleClick
+  }), __jsx("button", {
+    id: "dropzone",
+    type: "button",
+    className: "app-button btn btn-default",
+    onClick: disabled || readonly ? undefined : triggerFileSelect,
+    disabled: disabled || readonly,
+    style: styles
+  }, __jsx("i", {
+    className: iconclass
+  }), __jsx("span", null, caption || displayname || "Select File")))));
+};
+var _default = exports["default"] = SingleFileUpload;

package/components/input/fileupload/index.js

@@ -0,0 +1,170 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _useFileUpload2 = require("./useFileUpload");
+var _SingleUpload = _interopRequireDefault(require("./components/SingleUpload"));
+var _MultiUpload = _interopRequireDefault(require("./components/MultiUpload"));
+var _ListItems = _interopRequireDefault(require("./components/ListItems"));
+var _confirmDialog = _interopRequireDefault(require("@wavemaker/react-runtime/components/dialogs/confirm-dialog"));
+var _excluded = ["fileInputRef", "chooseFilter", "highlightDropArea", "uploadedFiles", "selectedFolders", "setSelectedFolders", "dragOverHandler", "onFileSelect", "onFileDrop", "setHighlightDropArea", "clearSelectedFile", "triggerFileSelect", "onFileDelete", "confirmDialogOpen", "confirmDialogProps", "closeConfirmDialog"];
+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 WmFileUpload = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? _constants.fileUploadConstants.DEFAULT_CLASSES.DEFAULT_CAPTIONS.SELECT : _props$caption,
+    name = props.name,
+    hint = props.hint,
+    arialabel = props.arialabel,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.TAB_INDEX : _props$tabindex,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.MULTIPLE : _props$multiple,
+    _props$fileuploadmess = props.fileuploadmessage,
+    fileuploadmessage = _props$fileuploadmess === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.FILEUPLOAD_MESSAGE : _props$fileuploadmess,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? !_constants.fileUploadConstants.DEFAULT_VALUES.ENABLED : _props$disabled,
+    _props$contenttype = props.contenttype,
+    contenttype = _props$contenttype === void 0 ? "" : _props$contenttype,
+    _props$iconclass = props.iconclass,
+    iconclass = _props$iconclass === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.ICON_CLASS : _props$iconclass,
+    extensions = props.extensions,
+    filetype = props.filetype,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    displayname = props.displayname,
+    _props$width = props.width,
+    width = _props$width === void 0 ? _constants.fileUploadConstants.DEFAULT_VALUES.WIDTH : _props$width,
+    height = props.height,
+    styles = props.styles,
+    className = props.className,
+    id = props.id,
+    filelistheight = props.filelistheight;
+  var _useFileUpload = (0, _useFileUpload2.useFileUpload)(props),
+    fileInputRef = _useFileUpload.fileInputRef,
+    chooseFilter = _useFileUpload.chooseFilter,
+    highlightDropArea = _useFileUpload.highlightDropArea,
+    uploadedFiles = _useFileUpload.uploadedFiles,
+    selectedFolders = _useFileUpload.selectedFolders,
+    setSelectedFolders = _useFileUpload.setSelectedFolders,
+    dragOverHandler = _useFileUpload.dragOverHandler,
+    onFileSelect = _useFileUpload.onFileSelect,
+    onFileDrop = _useFileUpload.onFileDrop,
+    setHighlightDropArea = _useFileUpload.setHighlightDropArea,
+    clearSelectedFile = _useFileUpload.clearSelectedFile,
+    triggerFileSelect = _useFileUpload.triggerFileSelect,
+    onFileDelete = _useFileUpload.onFileDelete,
+    confirmDialogOpen = _useFileUpload.confirmDialogOpen,
+    confirmDialogProps = _useFileUpload.confirmDialogProps,
+    closeConfirmDialog = _useFileUpload.closeConfirmDialog,
+    events = (0, _objectWithoutProperties2["default"])(_useFileUpload, _excluded);
+  var containerStyle = _objectSpread(_objectSpread({}, styles), {}, {
+    width: width !== "auto" ? width : undefined,
+    height: height || undefined
+  });
+  return __jsx(_Box["default"], {
+    component: "div",
+    className: (0, _clsx["default"])("app-fileupload", className),
+    id: id,
+    sx: containerStyle,
+    title: hint
+  }, !multiple ? __jsx(_SingleUpload["default"], (0, _extends2["default"])({
+    fileInputRef: fileInputRef,
+    caption: caption,
+    displayname: displayname,
+    contenttype: contenttype,
+    extensions: extensions,
+    filetype: filetype,
+    chooseFilter: chooseFilter,
+    disabled: disabled,
+    readonly: readonly,
+    required: required,
+    arialabel: arialabel,
+    tabindex: tabindex,
+    iconclass: iconclass,
+    styles: styles,
+    triggerFileSelect: triggerFileSelect,
+    onFileSelect: onFileSelect,
+    onBeforeselect: props.onBeforeselect
+  }, events)) : __jsx(_MultiUpload["default"], (0, _extends2["default"])({
+    fileInputRef: fileInputRef,
+    caption: caption,
+    multiple: multiple,
+    contenttype: contenttype,
+    extensions: extensions,
+    filetype: filetype,
+    chooseFilter: chooseFilter,
+    disabled: disabled,
+    readonly: readonly,
+    required: required,
+    arialabel: arialabel,
+    displayname: displayname,
+    tabindex: tabindex,
+    iconclass: iconclass,
+    styles: styles,
+    fileuploadmessage: fileuploadmessage,
+    highlightDropArea: highlightDropArea,
+    triggerFileSelect: triggerFileSelect,
+    onFileSelect: onFileSelect,
+    dragOverHandler: dragOverHandler,
+    onFileDrop: onFileDrop,
+    setHighlightDropArea: setHighlightDropArea,
+    onBeforeselect: props.onBeforeselect
+  }, events)), __jsx(_ListItems["default"], (0, _extends2["default"])({
+    uploadedFiles: uploadedFiles,
+    selectedFolders: selectedFolders,
+    filelistheight: filelistheight,
+    readonly: readonly,
+    clearSelectedFile: clearSelectedFile,
+    onFileDelete: onFileDelete,
+    setSelectedFolders: setSelectedFolders,
+    onBeforedelete: props.onBeforedelete
+  }, events)), __jsx(_confirmDialog["default"], {
+    name: "fileUploadConfirmDialog",
+    isopen: confirmDialogOpen,
+    title: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.title) || "",
+    message: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.message) || "",
+    oktext: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.oktext) || "OK",
+    canceltext: (confirmDialogProps === null || confirmDialogProps === void 0 ? void 0 : confirmDialogProps.canceltext) || "Cancel",
+    onOk: function onOk(event) {
+      confirmDialogProps === null || confirmDialogProps === void 0 || confirmDialogProps.onOk();
+      closeConfirmDialog();
+    },
+    isDialog: false,
+    onCancel: function onCancel(event) {
+      confirmDialogProps === null || confirmDialogProps === void 0 || confirmDialogProps.onCancel();
+      closeConfirmDialog();
+    },
+    onClose: closeConfirmDialog,
+    listener: {}
+  }));
+}, function (prevProps, nextProps) {
+  var keysToCheck = ["caption", "name", "hint", "arialabel", "tabindex", "multiple", "fileuploadmessage", "show", "disabled", "contenttype", "maxfilesize", "iconclass", "cleariconclass", "cleariconhint", "uploadpath", "datasource", "selectedFiles", "destination", "filelistheight", "width", "showprogressbar", "showprogressbarpercentage", "deleteiconhint", "extensions", "filetype", "readonly", "required", "deletedatasource", "displayname", "height", "onBeforeselect", "onSelect", "onDelete", "onBeforedelete", "onError"];
+
+  // Check if any props that affect rendering have changed
+  var propsChanged = keysToCheck.some(function (key) {
+    return prevProps[key] !== nextProps[key];
+  });
+
+  // Also check if the file lists have changed
+  var filesChanged = prevProps.datasource !== nextProps.datasource || prevProps.deletedatasource !== nextProps.deletedatasource;
+  return !propsChanged && !filesChanged;
+});
+WmFileUpload.displayName = "WmFileUpload";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmFileUpload);

package/components/input/fileupload/props.js

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