primereact 9.3.1 → 9.5.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, plus, upload, times) {
+this.primereact.fileupload = (function (exports, React, api, button, messages, progressbar, ripple, utils, componentbase, plus, upload, times) {
   '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,7 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var FileUploadBase = {
+  var FileUploadBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'FileUpload',
       id: null,
@@ -129,7 +170,7 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
       style: null,
       className: null,
-      widthCredentials: false,
+      withCredentials: false,
       previewWidth: 50,
       chooseLabel: null,
       uploadLabel: null,
@@ -177,57 +218,10 @@ 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 = {
+  var BadgeBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Badge',
       value: null,
@@ -236,19 +230,16 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
       style: null,
       className: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, BadgeBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, BadgeBase.defaultProps);
     }
-  };
+  });
 
   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 otherProps = BadgeBase.getOtherProps(props);
     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),
@@ -263,14 +254,17 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         }
       };
     });
-    return /*#__PURE__*/React__namespace.createElement("span", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
-      className: className,
-      style: props.style
-    }, otherProps), props.value);
+      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; }
@@ -296,6 +290,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);
@@ -535,20 +540,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');
@@ -556,13 +561,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;
       }
@@ -617,71 +622,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) {
@@ -700,10 +718,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 = {
@@ -734,11 +753,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);
@@ -753,21 +772,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, {
-          className: uploadIconClassName
-        }), {
+        var uploadIconProps = utils.mergeProps({
           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, {
+        var cancelIconProps = utils.mergeProps({
           className: cancelIconClassName
-        }), {
-          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, {
@@ -777,7 +794,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",
@@ -786,7 +804,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) {
@@ -796,10 +815,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,
@@ -811,54 +831,58 @@ 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
       });
@@ -870,20 +894,25 @@ this.primereact.fileupload = (function (exports, React, api, button, messages, p
         disabled: disabled,
         onChange: onFileSelect
       });
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      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();
   }));
@@ -895,4 +924,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.icons.plus, primereact.icons.upload, primereact.icons.times);
+})({}, React, primereact.api, primereact.button, primereact.messages, primereact.progressbar, primereact.ripple, primereact.utils, primereact.componentbase, primereact.icons.plus, primereact.icons.upload, primereact.icons.times);