primereact 9.4.0 → 9.6.0

package/fileupload/fileupload.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.fileupload = (function (exports, React, api, button, messages, progressbar, ripple, utils, componentbase, plus, upload, times) {
+this.primereact.fileupload = (function (exports, React, api, utils, componentbase, button, plus, times, upload, messages, progressbar, ripple) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -22,6 +22,47 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -112,7 +153,50 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var FileUploadBase = {
+  var BadgeBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'Badge',
+      value: null,
+      severity: null,
+      size: null,
+      style: null,
+      className: null,
+      children: undefined
+    }
+  });
+
+  var Badge = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = BadgeBase.getProps(inProps, context);
+    var _BadgeBase$setMetaDat = BadgeBase.setMetaData({
+        props: props
+      }),
+      ptm = _BadgeBase$setMetaDat.ptm;
+    var elementRef = React__namespace.useRef(null);
+    var className = utils.classNames('p-badge p-component', _defineProperty({
+      'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+      'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
+      'p-badge-lg': props.size === 'large',
+      'p-badge-xl': props.size === 'xlarge'
+    }, "p-badge-".concat(props.severity), props.severity !== null), props.className);
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      };
+    });
+    var rootProps = utils.mergeProps({
+      ref: elementRef,
+      style: props.style,
+      className: className
+    }, BadgeBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
+  }));
+  Badge.displayName = 'Badge';
+
+  var FileUploadBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'FileUpload',
       id: null,
@@ -177,103 +261,17 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       uploadHandler: null,
       onRemove: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, FileUploadBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, FileUploadBase.defaultProps);
-    }
-  };
-
-  function _typeof(obj) {
-    "@babel/helpers - typeof";
-
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
-  }
-
-  function _toPrimitive(input, hint) {
-    if (_typeof(input) !== "object" || input === null) return input;
-    var prim = input[Symbol.toPrimitive];
-    if (prim !== undefined) {
-      var res = prim.call(input, hint || "default");
-      if (_typeof(res) !== "object") return res;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (hint === "string" ? String : Number)(input);
-  }
-
-  function _toPropertyKey(arg) {
-    var key = _toPrimitive(arg, "string");
-    return _typeof(key) === "symbol" ? key : String(key);
-  }
-
-  function _defineProperty(obj, key, value) {
-    key = _toPropertyKey(key);
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-    return obj;
-  }
-
-  var BadgeBase = componentbase.ComponentBase.extend({
-    defaultProps: {
-      __TYPE: 'Badge',
-      value: null,
-      severity: null,
-      size: null,
-      style: null,
-      className: null,
-      children: undefined
     }
   });
 
-  var Badge = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = BadgeBase.getProps(inProps);
-    var _BadgeBase$setMetaDat = BadgeBase.setMetaData({
-        props: props
-      }),
-      ptm = _BadgeBase$setMetaDat.ptm;
-    var elementRef = React__namespace.useRef(null);
-    var className = utils.classNames('p-badge p-component', _defineProperty({
-      'p-badge-no-gutter': utils.ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-      'p-badge-dot': utils.ObjectUtils.isEmpty(props.value),
-      'p-badge-lg': props.size === 'large',
-      'p-badge-xl': props.size === 'xlarge'
-    }, "p-badge-".concat(props.severity), props.severity !== null), props.className);
-    React__namespace.useImperativeHandle(ref, function () {
-      return {
-        props: props,
-        getElement: function getElement() {
-          return elementRef.current;
-        }
-      };
-    });
-    var rootProps = utils.mergeProps({
-      ref: elementRef,
-      style: props.style,
-      className: className
-    }, BadgeBase.getOtherProps(props), ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement("span", rootProps, props.value);
-  }));
-  Badge.displayName = 'Badge';
-
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = FileUploadBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = FileUploadBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       uploadedFilesState = _React$useState2[0],
@@ -294,6 +292,17 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       uploadingState = _React$useState10[0],
       setUploadingState = _React$useState10[1];
+    var _FileUploadBase$setMe = FileUploadBase.setMetaData({
+        props: props,
+        state: {
+          progress: progressState,
+          uploading: uploadingState,
+          uploadedFiles: uploadedFilesState,
+          files: filesState,
+          focused: focusedState
+        }
+      }),
+      ptm = _FileUploadBase$setMe.ptm;
     var fileInputRef = React__namespace.useRef(null);
     var messagesRef = React__namespace.useRef(null);
     var contentRef = React__namespace.useRef(null);
@@ -391,7 +400,7 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       if (props.onSelect) {
         props.onSelect({
           originalEvent: event,
-          files: selectedFiles
+          files: currentFiles
         });
       }
       if (event.type !== 'drop' && isIE11()) {
@@ -520,6 +529,7 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
     };
     var clear = function clear() {
       setFilesState([]);
+      setUploadedFilesState([]);
       setUploadingState(false);
       props.onClear && props.onClear();
       clearInput();
@@ -533,20 +543,20 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
     var onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.which === 13) {
         // enter
         choose();
       }
     };
-    var onDragEnter = function onDragEnter(event) {
+    var _onDragEnter = function onDragEnter(event) {
       if (!disabled) {
         event.dataTransfer.dropEffect = 'copy';
         event.stopPropagation();
         event.preventDefault();
       }
     };
-    var onDragOver = function onDragOver(event) {
+    var _onDragOver = function onDragOver(event) {
       if (!disabled) {
         event.dataTransfer.dropEffect = 'copy';
         utils.DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
@@ -554,13 +564,13 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         event.preventDefault();
       }
     };
-    var onDragLeave = function onDragLeave(event) {
+    var _onDragLeave = function onDragLeave(event) {
       if (!disabled) {
         event.dataTransfer.dropEffect = 'copy';
         utils.DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
       }
     };
-    var onDrop = function onDrop(event) {
+    var _onDrop = function onDrop(event) {
       if (props.disabled) {
         return;
       }
@@ -597,6 +607,12 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         },
         setFiles: function setFiles(files) {
           return setFilesState(files || []);
+        },
+        getUploadedFiles: function getUploadedFiles() {
+          return uploadedFilesState;
+        },
+        setUploadedFiles: function setUploadedFiles(files) {
+          return setUploadedFilesState(files || []);
         }
       };
     });
@@ -615,71 +631,84 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       var iconClassName = utils.classNames('p-button-icon p-clickable', {
         'p-button-icon-left': !iconOnly
       });
-      var label = iconOnly ? /*#__PURE__*/React__namespace.createElement("span", {
-        className: labelClassName,
+      var chooseButtonLabelProps = utils.mergeProps({
+        className: labelClassName
+      }, ptm('chooseButtonLabel'));
+      var label = iconOnly ? /*#__PURE__*/React__namespace.createElement("span", _extends({}, chooseButtonLabelProps, {
         dangerouslySetInnerHTML: {
           __html: '&nbsp;'
         }
-      }) : /*#__PURE__*/React__namespace.createElement("span", {
-        className: labelClassName
-      }, chooseButtonLabel);
-      var input = /*#__PURE__*/React__namespace.createElement("input", {
+      })) : /*#__PURE__*/React__namespace.createElement("span", chooseButtonLabelProps, chooseButtonLabel);
+      var inputProps = utils.mergeProps({
         ref: fileInputRef,
-        type: "file",
-        onChange: onFileSelect,
+        type: 'file',
+        onChange: function onChange(e) {
+          return onFileSelect(e);
+        },
         multiple: props.multiple,
         accept: props.accept,
         disabled: chooseDisabled
-      });
-      var icon = _icon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, {
-        className: iconClassName
-      });
-      var chooseIcon = utils.IconUtils.getJSXIcon(icon, {
+      }, ptm('input'));
+      var input = /*#__PURE__*/React__namespace.createElement("input", inputProps);
+      var chooseIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('chooseIcon'));
+      var icon = _icon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, chooseIconProps);
+      var chooseIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, chooseIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("span", {
+      var chooseButtonProps = utils.mergeProps({
         className: chooseClassName,
         style: style,
         onClick: choose,
-        onKeyDown: onKeyDown,
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e);
+        },
         onFocus: onFocus,
         onBlur: onBlur,
         tabIndex: 0
-      }, input, chooseIcon, label, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, ptm('chooseButton'));
+      return /*#__PURE__*/React__namespace.createElement("span", chooseButtonProps, input, chooseIcon, label, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var onRemoveClick = function onRemoveClick(e, badgeOptions, index) {
       if (badgeOptions.severity === 'warning') remove(e, index);else removeUploadedFiles(e, index);
     };
     var createFile = function createFile(file, index, badgeOptions) {
       var key = file.name + file.type + file.size;
-      var preview = isImage(file) ? /*#__PURE__*/React__namespace.createElement("img", {
-        role: "presentation",
-        className: "p-fileupload-file-thumbnail",
-        alt: file.name,
+      var thumbnailProps = utils.mergeProps({
+        role: 'presentation',
+        className: 'p-fileupload-file-thumbnail',
         src: file.objectURL,
         width: props.previewWidth
-      }) : null;
-      var fileName = /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-fileupload-filename"
-      }, file.name);
-      var size = /*#__PURE__*/React__namespace.createElement("div", null, formatSize(file.size));
-      var contentBody = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, " ", file.name), /*#__PURE__*/React__namespace.createElement("span", null, formatSize(file.size)), /*#__PURE__*/React__namespace.createElement(Badge, {
+      }, ptm('thumbnail'));
+      var preview = isImage(file) ? /*#__PURE__*/React__namespace.createElement("img", _extends({}, thumbnailProps, {
+        alt: file.name
+      })) : null;
+      var detailsProps = utils.mergeProps(ptm('details'));
+      var fileSizeProps = utils.mergeProps(ptm('fileSize'));
+      var fileNameProps = utils.mergeProps({
+        className: 'p-fileupload-filename'
+      }, ptm('fileName'));
+      var actionsProps = utils.mergeProps(ptm('actions'));
+      var fileName = /*#__PURE__*/React__namespace.createElement("div", fileNameProps, file.name);
+      var size = /*#__PURE__*/React__namespace.createElement("div", fileSizeProps, formatSize(file.size));
+      var contentBody = /*#__PURE__*/React__namespace.createElement("div", detailsProps, /*#__PURE__*/React__namespace.createElement("div", fileNameProps, " ", file.name), /*#__PURE__*/React__namespace.createElement("span", fileSizeProps, formatSize(file.size)), /*#__PURE__*/React__namespace.createElement(Badge, {
         className: "p-fileupload-file-badge",
         value: badgeOptions.value,
-        severity: badgeOptions.severity
+        severity: badgeOptions.severity,
+        pt: ptm('badge')
       }));
-      var removeButton = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(button.Button, {
+      var removeButton = /*#__PURE__*/React__namespace.createElement("div", actionsProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
         type: "button",
         icon: props.removeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, null),
         text: true,
         rounded: true,
-        className: "p-button-danger",
+        severity: "danger",
         onClick: function onClick(e) {
           return onRemoveClick(e, badgeOptions, index);
         },
-        disabled: disabled
+        disabled: disabled,
+        pt: ptm('removeButton')
       }));
       var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, contentBody, removeButton);
       if (props.itemTemplate) {
@@ -698,10 +727,11 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         };
         content = utils.ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
       }
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-fileupload-row",
-        key: key
-      }, content);
+      var fileProps = utils.mergeProps({
+        key: key,
+        className: 'p-fileupload-row'
+      }, ptm('file'));
+      return /*#__PURE__*/React__namespace.createElement("div", fileProps, content);
     };
     var createFiles = function createFiles() {
       var badgeOptions = {
@@ -732,11 +762,11 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       }
       return /*#__PURE__*/React__namespace.createElement(progressbar.ProgressBar, {
         value: progressState,
-        showValue: false
+        showValue: false,
+        pt: ptm('progressbar')
       });
     };
     var createAdvanced = function createAdvanced() {
-      var otherProps = FileUploadBase.getOtherProps(props);
       var className = utils.classNames('p-fileupload p-fileupload-advanced p-component', props.className);
       var headerClassName = utils.classNames('p-fileupload-buttonbar', props.headerClassName);
       var contentClassName = utils.classNames('p-fileupload-content', props.contentClassName);
@@ -751,21 +781,19 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         var uploadIconClassName = utils.classNames('p-button-icon p-c', {
           'p-button-icon-left': !uploadOptions.iconOnly
         });
-        var uploadIcon = utils.IconUtils.getJSXIcon(uploadOptions.icon || /*#__PURE__*/React__namespace.createElement(upload.UploadIcon, {
+        var uploadIconProps = utils.mergeProps({
           className: uploadIconClassName
-        }), {
-          className: uploadIconClassName
-        }, {
+        }, ptm('uploadIcon'));
+        var uploadIcon = utils.IconUtils.getJSXIcon(uploadOptions.icon || /*#__PURE__*/React__namespace.createElement(upload.UploadIcon, uploadIconProps), _objectSpread({}, uploadIconProps), {
           props: props
         });
         var cancelIconClassName = utils.classNames('p-button-icon p-c', {
           'p-button-icon-left': !cancelOptions.iconOnly
         });
-        var cancelIcon = utils.IconUtils.getJSXIcon(cancelOptions.icon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
-          className: cancelIconClassName
-        }), {
+        var cancelIconProps = utils.mergeProps({
           className: cancelIconClassName
-        }, {
+        }, ptm('cancelIcon'));
+        var cancelIcon = utils.IconUtils.getJSXIcon(cancelOptions.icon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, cancelIconProps), _objectSpread({}, cancelIconProps), {
           props: props
         });
         uploadButton = /*#__PURE__*/React__namespace.createElement(button.Button, {
@@ -775,7 +803,8 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
           onClick: upload$1,
           disabled: uploadDisabled,
           style: uploadOptions.style,
-          className: uploadOptions.className
+          className: uploadOptions.className,
+          pt: ptm('uploadButton')
         });
         cancelButton = /*#__PURE__*/React__namespace.createElement(button.Button, {
           type: "button",
@@ -784,7 +813,8 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
           onClick: clear,
           disabled: cancelDisabled,
           style: cancelOptions.style,
-          className: cancelOptions.className
+          className: cancelOptions.className,
+          pt: ptm('cancelButton')
         });
       }
       if (hasFiles) {
@@ -794,10 +824,11 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       if (hasUploadedFiles) {
         uplaodedFilesList = createUploadedFiles();
       }
-      var header = /*#__PURE__*/React__namespace.createElement("div", {
+      var buttonbarProps = utils.mergeProps({
         className: headerClassName,
         style: props.headerStyle
-      }, chooseButton, uploadButton, cancelButton);
+      }, ptm('buttonbar'));
+      var header = /*#__PURE__*/React__namespace.createElement("div", buttonbarProps, chooseButton, uploadButton, cancelButton);
       if (props.headerTemplate) {
         var defaultContentOptions = {
           className: headerClassName,
@@ -809,79 +840,91 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         };
         header = utils.ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
       }
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var rootProps = utils.mergeProps({
         id: props.id,
         className: className,
         style: props.style
-      }, otherProps), header, /*#__PURE__*/React__namespace.createElement("div", {
+      }, FileUploadBase.getOtherProps(props), ptm('root'));
+      var contentProps = utils.mergeProps({
         ref: contentRef,
         className: contentClassName,
         style: props.contentStyle,
-        onDragEnter: onDragEnter,
-        onDragOver: onDragOver,
-        onDragLeave: onDragLeave,
-        onDrop: onDrop
-      }, progressBar, /*#__PURE__*/React__namespace.createElement(messages.Messages, {
+        onDragEnter: function onDragEnter(e) {
+          return _onDragEnter(e);
+        },
+        onDragOver: function onDragOver(e) {
+          return _onDragOver(e);
+        },
+        onDragLeave: function onDragLeave(e) {
+          return _onDragLeave(e);
+        },
+        onDrop: function onDrop(e) {
+          return _onDrop(e);
+        }
+      }, ptm('content'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, /*#__PURE__*/React__namespace.createElement("div", contentProps, progressBar, /*#__PURE__*/React__namespace.createElement(messages.Messages, {
         ref: messagesRef
       }), hasFiles ? filesList : null, hasUploadedFiles ? uplaodedFilesList : null, emptyContent));
     };
     var createBasic = function createBasic() {
       var chooseOptions = props.chooseOptions;
-      var otherProps = FileUploadBase.getOtherProps(props);
       var className = utils.classNames('p-fileupload p-fileupload-basic p-component', props.className);
       var buttonClassName = utils.classNames('p-button p-component p-fileupload-choose', {
         'p-fileupload-choose-selected': hasFiles,
         'p-disabled': disabled,
         'p-focus': focusedState
       }, chooseOptions.className);
-      var iconClassName = utils.classNames('p-button-icon', {
-        'p-button-icon-left': !chooseOptions.iconOnly
-      });
-      var icon = chooseOptions.icon ? chooseOptions.icon : !chooseOptions.icon && (!hasFiles || props.auto) ? /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, {
-        className: iconClassName
-      }) : !chooseOptions.icon && hasFiles && !props.auto && /*#__PURE__*/React__namespace.createElement(upload.UploadIcon, {
-        className: iconClassName
-      });
       var labelClassName = 'p-button-label p-clickable';
-      var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React__namespace.createElement("span", {
-        className: labelClassName,
+      var labelProps = utils.mergeProps({
+        className: labelClassName
+      }, ptm('label'));
+      var chooseLabel = chooseOptions.iconOnly ? /*#__PURE__*/React__namespace.createElement("span", _extends({}, labelProps, {
         dangerouslySetInnerHTML: {
           __html: '&nbsp;'
         }
-      }) : /*#__PURE__*/React__namespace.createElement("span", {
-        className: labelClassName
-      }, chooseButtonLabel);
-      var label = props.auto ? chooseLabel : /*#__PURE__*/React__namespace.createElement("span", {
-        className: labelClassName
-      }, hasFiles ? filesState[0].name : chooseLabel);
-      var chooseIcon = utils.IconUtils.getJSXIcon(icon, {
+      })) : /*#__PURE__*/React__namespace.createElement("span", labelProps, chooseButtonLabel);
+      var label = props.auto ? chooseLabel : /*#__PURE__*/React__namespace.createElement("span", labelProps, hasFiles ? filesState[0].name : chooseLabel);
+      var iconClassName = utils.classNames('p-button-icon', {
+        'p-button-icon-left': !chooseOptions.iconOnly
+      });
+      var chooseIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('chooseIcon'));
+      var icon = chooseOptions.icon ? chooseOptions.icon : !chooseOptions.icon && (!hasFiles || props.auto) ? /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, chooseIconProps) : !chooseOptions.icon && hasFiles && !props.auto && /*#__PURE__*/React__namespace.createElement(upload.UploadIcon, chooseIconProps);
+      var chooseIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, chooseIconProps), {
         props: props,
         hasFiles: hasFiles
       });
-      var input = !hasFiles && /*#__PURE__*/React__namespace.createElement("input", {
+      var inputProps = utils.mergeProps({
         ref: fileInputRef,
-        type: "file",
-        accept: props.accept,
+        type: 'file',
+        onChange: function onChange(e) {
+          return onFileSelect(e);
+        },
         multiple: props.multiple,
-        disabled: disabled,
-        onChange: onFileSelect
-      });
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+        accept: props.accept,
+        disabled: disabled
+      }, ptm('input'));
+      var input = !hasFiles && /*#__PURE__*/React__namespace.createElement("input", inputProps);
+      var rootProps = utils.mergeProps({
         className: className,
         style: props.style
-      }, otherProps), /*#__PURE__*/React__namespace.createElement(messages.Messages, {
-        ref: messagesRef
-      }), /*#__PURE__*/React__namespace.createElement("span", {
+      }, FileUploadBase.getOtherProps(props), ptm('root'));
+      var basicButtonProps = utils.mergeProps({
         className: buttonClassName,
         style: chooseOptions.style,
+        tabIndex: 0,
         onMouseUp: onSimpleUploaderClick,
-        onKeyDown: onKeyDown,
+        onKeyDown: function onKeyDown(e) {
+          return _onKeyDown(e);
+        },
         onFocus: onFocus,
-        onBlur: onBlur,
-        tabIndex: 0
-      }, chooseIcon, label, input, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
+        onBlur: onBlur
+      }, FileUploadBase.getOtherProps(props), ptm('basicButton'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement(messages.Messages, {
+        ref: messagesRef,
+        pt: ptm('message')
+      }), /*#__PURE__*/React__namespace.createElement("span", basicButtonProps, chooseIcon, label, input, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)));
     };
     if (props.mode === 'advanced') return createAdvanced();else if (props.mode === 'basic') return createBasic();
   }));
@@ -893,4 +936,4 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
 
   return exports;
 
-})({}, React, primereact.api, primereact.button, primereact.messages, primereact.progressbar, primereact.ripple, primereact.utils, primereact.componentbase, primereact.icons.plus, primereact.icons.upload, primereact.icons.times);
+})({}, React, primereact.api, primereact.utils, primereact.componentbase, primereact.button, primereact.icons.plus, primereact.icons.times, primereact.icons.upload, primereact.messages, primereact.progressbar, primereact.ripple);