primereact 9.4.0 → 9.6.0

package/fileupload/fileupload.cjs.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var api = require('primereact/api');
-var button = require('primereact/button');
-var messages = require('primereact/messages');
-var progressbar = require('primereact/progressbar');
-var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
 var componentbase = require('primereact/componentbase');
+var button = require('primereact/button');
 var plus = require('primereact/icons/plus');
-var upload = require('primereact/icons/upload');
 var times = require('primereact/icons/times');
+var upload = require('primereact/icons/upload');
+var messages = require('primereact/messages');
+var progressbar = require('primereact/progressbar');
+var ripple = require('primereact/ripple');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,6 +34,47 @@ function _interopNamespace(e) {
 
 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++) {
@@ -124,7 +165,50 @@ function _slicedToArray(arr, i) {
   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,
@@ -189,103 +273,17 @@ var FileUploadBase = {
     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],
@@ -306,6 +304,17 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     _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);
@@ -403,7 +412,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     if (props.onSelect) {
       props.onSelect({
         originalEvent: event,
-        files: selectedFiles
+        files: currentFiles
       });
     }
     if (event.type !== 'drop' && isIE11()) {
@@ -532,6 +541,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var clear = function clear() {
     setFilesState([]);
+    setUploadedFilesState([]);
     setUploadingState(false);
     props.onClear && props.onClear();
     clearInput();
@@ -545,20 +555,20 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   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');
@@ -566,13 +576,13 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       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;
     }
@@ -609,6 +619,12 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       },
       setFiles: function setFiles(files) {
         return setFilesState(files || []);
+      },
+      getUploadedFiles: function getUploadedFiles() {
+        return uploadedFilesState;
+      },
+      setUploadedFiles: function setUploadedFiles(files) {
+        return setUploadedFilesState(files || []);
       }
     };
   });
@@ -627,71 +643,84 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     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, {
+    }, ptm('input'));
+    var input = /*#__PURE__*/React__namespace.createElement("input", inputProps);
+    var chooseIconProps = utils.mergeProps({
       className: iconClassName
-    });
-    var chooseIcon = utils.IconUtils.getJSXIcon(icon, {
-      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) {
@@ -710,10 +739,11 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       };
       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 = {
@@ -744,11 +774,11 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     }
     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);
@@ -763,21 +793,19 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       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, {
-        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, {
@@ -787,7 +815,8 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         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",
@@ -796,7 +825,8 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         onClick: clear,
         disabled: cancelDisabled,
         style: cancelOptions.style,
-        className: cancelOptions.className
+        className: cancelOptions.className,
+        pt: ptm('cancelButton')
       });
     }
     if (hasFiles) {
@@ -806,10 +836,11 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     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,
@@ -821,79 +852,91 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       };
       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();
 }));