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

package/components/input/epoch/time/utils.js

@@ -0,0 +1,240 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.READONLY_STYLES = exports.DEFAULT_TIMEPATTERN = exports.DEFAULT_OUTPUT_FORMAT = exports.DEFAULT_CLASS = void 0;
+exports.createWidgetEvent = createWidgetEvent;
+exports.formatDisplayTimeValue = formatDisplayTimeValue;
+exports.getSupportedTimeFormats = getSupportedTimeFormats;
+exports.parseTimeFormat = parseTimeFormat;
+exports.parseTimeObj = parseTimeObj;
+exports.parseTimeValue = parseTimeValue;
+exports.updateListener = updateListener;
+exports.validateTimeFormat = validateTimeFormat;
+exports.validateTimeRange = validateTimeRange;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+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; }
+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; }
+function parseTimeFormat() {
+  var timepattern = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "hh:mm a";
+  var hasSeconds = timepattern.toLowerCase().includes("s");
+  var is12Hour = timepattern.includes("h");
+  return {
+    format: timepattern,
+    hasSeconds: hasSeconds,
+    is12Hour: is12Hour
+  };
+}
+function getSupportedTimeFormats() {
+  return ["HH:mm:ss", "HH:mm", "H:mm:ss", "H:mm", "hh:mm:ss a", "hh:mm a", "h:mm:ss a", "h:mm a", "HH:mm:ss.SSS"];
+}
+function parseTimeValue(value, timepattern) {
+  if (!value) return null;
+  try {
+    if (value === "CURRENT_TIME") {
+      return (0, _momentTimezone["default"])();
+    }
+    if (typeof value === "number") {
+      return (0, _momentTimezone["default"])(value);
+    }
+    if (value instanceof Date) {
+      return (0, _momentTimezone["default"])(value);
+    }
+    if (typeof value === "string") {
+      var parsed = (0, _momentTimezone["default"])(value, timepattern, true);
+      if (parsed.isValid()) return parsed;
+      var formats = getSupportedTimeFormats();
+      var _iterator = _createForOfIteratorHelper(formats),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var format = _step.value;
+          parsed = (0, _momentTimezone["default"])(value, format, true);
+          if (parsed.isValid()) return parsed;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      parsed = (0, _momentTimezone["default"])(value);
+      if (parsed.isValid()) return parsed;
+    }
+    return null;
+  } catch (error) {
+    console.warn("Error parsing time value:", error);
+    return null;
+  }
+}
+function formatDisplayTimeValue(value, pattern) {
+  if (!value) return "";
+  try {
+    var momentObj = _momentTimezone["default"].isMoment(value) ? value : (0, _momentTimezone["default"])(value);
+    if (pattern === "timestamp") {
+      return momentObj.valueOf().toString();
+    }
+    return momentObj.isValid() ? momentObj.format(pattern) : "";
+  } catch (error) {
+    console.warn("Error formatting display value:", error);
+    return "";
+  }
+}
+
+// Get validator error message (similar to datetime widget)
+function getValidatorErrorMessage(validators, validatorType) {
+  if (!validators || validators.length === 0) return undefined;
+  var validator = validators.find(function (v) {
+    return (0, _typeof2["default"])(v) === "object" && v !== null && "type" in v && v.type === validatorType;
+  });
+  if (validator && (0, _typeof2["default"])(validator) === "object" && "errorMessage" in validator) {
+    var errorMessage = validator.errorMessage;
+    if (typeof errorMessage === "string") {
+      return errorMessage;
+    }
+  }
+  return undefined;
+}
+function validateTimeRange(timeValue, minTime, maxTime) {
+  var validators = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var validationmessage = arguments.length > 4 ? arguments[4] : undefined;
+  if (!timeValue) return {
+    isValid: true
+  };
+  try {
+    var timeToCheck = _momentTimezone["default"].isMoment(timeValue) ? timeValue : (0, _momentTimezone["default"])(timeValue);
+    if (!timeToCheck.isValid()) {
+      return {
+        isValid: false,
+        errorType: "format",
+        message: validationmessage || "Invalid time format"
+      };
+    }
+    var timeToCheckMinutes = timeToCheck.hours() * 60 + timeToCheck.minutes();
+    if (minTime) {
+      var minMoment = typeof minTime === "string" ? (0, _momentTimezone["default"])(minTime, getSupportedTimeFormats(), true) : (0, _momentTimezone["default"])(minTime);
+      if (minMoment.isValid()) {
+        var minMinutes = minMoment.hours() * 60 + minMoment.minutes();
+        if (timeToCheckMinutes < minMinutes) {
+          var errorMessage = getValidatorErrorMessage(validators, "mintime") || validationmessage || "Time must be later than ".concat(minMoment.format("HH:mm"));
+          return {
+            isValid: false,
+            errorType: "mintime",
+            message: errorMessage
+          };
+        }
+      }
+    }
+    if (maxTime) {
+      var maxMoment = typeof maxTime === "string" ? (0, _momentTimezone["default"])(maxTime, getSupportedTimeFormats(), true) : (0, _momentTimezone["default"])(maxTime);
+      if (maxMoment.isValid()) {
+        var maxMinutes = maxMoment.hours() * 60 + maxMoment.minutes();
+        if (timeToCheckMinutes > maxMinutes) {
+          var _errorMessage = getValidatorErrorMessage(validators, "maxtime") || validationmessage || "Time must be earlier than ".concat(maxMoment.format("HH:mm"));
+          return {
+            isValid: false,
+            errorType: "maxtime",
+            message: _errorMessage
+          };
+        }
+      }
+    }
+    return {
+      isValid: true
+    };
+  } catch (error) {
+    console.warn("Error validating time range:", error);
+    return {
+      isValid: false,
+      errorType: "format",
+      message: validationmessage || "Validation error"
+    };
+  }
+}
+function validateTimeFormat(inputValue, pattern, required, validationmessage) {
+  if (!inputValue.trim()) return {
+    isValid: true
+  };
+  try {
+    var parsed = (0, _momentTimezone["default"])(inputValue, pattern, true);
+    if (!parsed.isValid()) {
+      var error = {
+        isValid: false,
+        errorType: "format"
+      };
+      if (required) {
+        error.message = validationmessage || "Invalid time format. Expected: ".concat(pattern);
+      }
+      return error;
+    }
+    return {
+      isValid: true
+    };
+  } catch (error) {
+    return {
+      isValid: false,
+      errorType: "format",
+      message: validationmessage || "Invalid time format"
+    };
+  }
+}
+function parseTimeObj(timeValue) {
+  if (!timeValue) return null;
+  try {
+    return typeof timeValue === "string" ? (0, _momentTimezone["default"])(timeValue, getSupportedTimeFormats(), true).toDate() : timeValue instanceof Date ? timeValue : null;
+  } catch (error) {
+    console.warn("Error parsing time object:", error);
+    return null;
+  }
+}
+
+// Constants
+var DEFAULT_CLASS = exports.DEFAULT_CLASS = "input-group app-timeinput";
+var DEFAULT_TIMEPATTERN = exports.DEFAULT_TIMEPATTERN = "h:mm:ss A";
+var DEFAULT_OUTPUT_FORMAT = exports.DEFAULT_OUTPUT_FORMAT = "HH:mm:ss";
+
+// Styling constants
+var READONLY_STYLES = exports.READONLY_STYLES = {
+  cursor: "not-allowed"
+};
+function updateListener(name, listener, props, displayValue, timestamp, datavalue) {
+  // Update listener widget display value
+
+  if (listener !== null && listener !== void 0 && listener.onChange) {
+    listener.onChange(props.fieldName || name, _objectSpread(_objectSpread({}, props), {}, {
+      displayValue: displayValue,
+      timestamp: timestamp,
+      datavalue: datavalue
+    }));
+  }
+}
+function createWidgetEvent(args) {
+  var type = args.type,
+    name = args.name,
+    value = args.value,
+    anchor = args.anchor,
+    originalEvent = args.originalEvent;
+  var base = originalEvent && (0, _typeof2["default"])(originalEvent) === "object" ? _objectSpread({}, originalEvent) : {};
+  var evt = base;
+  if (!evt.type) {
+    evt.type = type;
+  }
+  if (!evt.target && anchor) {
+    evt.target = anchor;
+  }
+  if (!evt.currentTarget && anchor) {
+    evt.currentTarget = anchor;
+  }
+  if (name !== undefined) evt.name = name;
+  if (value !== undefined) evt.value = value;
+  if (originalEvent) {
+    evt.originalEvent = originalEvent;
+  }
+  return evt;
+}

package/components/input/fileupload/Utils.d.ts

@@ -0,0 +1,14 @@
+import { FileUploadState } from "./props";
+export declare const dialogService: {
+    showAppConfirmDialog: ({ title, message, onOk, onCancel }: any) => void;
+    closeAppConfirmDialog: () => void;
+};
+export declare const getDefaultChooseFilter: (allowedExtensions: string[]) => string;
+export declare const isValidFile: (filename: string, contenttype: string, extensionName: string) => boolean;
+export declare const getValidFiles: ($files: FileList | File[], contenttype: string, extensions: string, filetype: string, chooseFilter: string, maxfilesize: string | number, onError?: any, listener?: any) => {
+    validFiles: File[];
+    errorFiles: File[];
+};
+export declare const handleErrorFiles: (key: string, msg: string, file: File, errorFiles: File[], onError?: any, listener?: any) => void;
+export declare const clearFile: (files: (File & FileUploadState)[], file: FileUploadState | File) => (File & FileUploadState)[];
+export declare const generateFileId: () => string;

package/components/input/fileupload/Utils.js

@@ -0,0 +1,139 @@
+"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 ext = extensionName.toLowerCase();
+
+  // Split by comma or space (handles ".doc, .docx" and ".doc .docx" formats)
+  var contentTypes = contenttype.toLowerCase().split(/[\s,]+/).map(function (type) {
+    return type.trim();
+  }).filter(Boolean);
+
+  // Check for direct extension match (e.g., ".csv", ".pdf")
+  if (contentTypes.some(function (type) {
+    return type === ".".concat(ext) || type === ext;
+  })) {
+    return true;
+  }
+
+  // Check for MIME type patterns
+  var _iterator = _createForOfIteratorHelper(contentTypes),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var type = _step.value;
+      // Normalize type for comparison (remove leading dot if present)
+      var normalizedType = type.startsWith(".") ? type.slice(1) : type;
+      if (type === "image/*" || normalizedType === "image") {
+        if ((0, _constants.isImageFile)(filename)) return true;
+      }
+      if (type === "audio/*" || normalizedType === "audio") {
+        if ((0, _constants.isAudioFile)(filename)) return true;
+      }
+      if (type === "video/*" || normalizedType === "video") {
+        if ((0, _constants.isVideoFile)(filename)) return true;
+      }
+      if (normalizedType === "document" || normalizedType === "pdf" || normalizedType === "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.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CommonFileProps, FileUploadState } from "../props";
+declare const CommonFile: React.FC<CommonFileProps>;
+export default CommonFile;
+export declare const ListItem: ({ file, index, clearSelectedFile, onBeforedelete, onFileDelete, }: {
+    file: FileUploadState & File;
+    index: number;
+    clearSelectedFile: (file: FileUploadState & File) => void;
+    onBeforedelete?: (e: React.MouseEvent, file: FileUploadState & File) => void;
+    onFileDelete: (e: React.MouseEvent, file: FileUploadState & File) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,135 @@
+"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 wm-fileupload-file-list-container",
+      style: {
+        "--fileupload-list-max-height": "".concat(filelistheight || 400, "px")
+      }
+    }, __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 = _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 wm-fileupload-media-full-width"
+  }, __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[0].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"
+  }))), file.status == "success" && __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.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MultipleFileUploadProps } from "../props";
+declare const MultipleFileUpload: React.FC<MultipleFileUploadProps>;
+export default MultipleFileUpload;

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

@@ -0,0 +1,78 @@
+"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;
+  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,
+    required: required,
+    "aria-label": arialabel || displayname || "File selection field",
+    onChange: onFileSelect,
+    className: "file-input wm-fileupload-file-input",
+    tabIndex: tabindex
+  }), __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.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SingleFileUploadProps } from "../props";
+declare const SingleFileUpload: React.FC<SingleFileUploadProps>;
+export default SingleFileUpload;