primereact 9.0.0-rc.1 → 9.1.0

package/datascroller/datascroller.d.ts

@@ -2,7 +2,7 @@
  *
  * DataScroller displays data with on demand loading using scroll.
  *
- * [Live Demo](https://www.primefaces.org/primereact/datascroller/)
+ * [Live Demo](https://www.primereact.org/datascroller/)
  *
  * @module datascroller
  *
@@ -96,7 +96,7 @@ export interface DataScrollerProps extends Omit<React.DetailedHTMLProps<React.HT
  *
  * _DataScroller displays data with on demand loading using scroll._
  *
- * [Live Demo](https://www.primefaces.org/primereact/datascroller/)
+ * [Live Demo](https://www.primereact.org/datascroller/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/datatable/datatable.d.ts

@@ -2,7 +2,7 @@
  *
  * DataTable displays data in tabular format.
  *
- * [Live Demo](https://www.primefaces.org/primereact/datatable/)
+ * [Live Demo](https://www.primereact.org/datatable/)
  *
  * @module datatable
  *
@@ -22,7 +22,6 @@ type DataTableRowGroupFooterTemplateType<TValue extends DataTableValueArray> = R
 
 /**
  * Custom datatable header template options.
- * @group Misc
  */
 interface DataTableHeaderTemplateOptions<TValue extends DataTableValueArray> {
     /**
@@ -35,7 +34,6 @@ interface DataTableFooterTemplateOptions<TValue extends DataTableValueArray> ext
 
 /**
  * Custom datatable row group header template options.
- * @group Misc
  */
 interface DataTableRowGroupHeaderTemplateOptions<TValue extends DataTableValueArray> {
     /**
@@ -54,7 +52,6 @@ interface DataTableRowGroupHeaderTemplateOptions<TValue extends DataTableValueAr
 
 /**
  * Custom datatable row group footer template options.
- * @group Misc
  */
 interface DataTableRowGroupFooterTemplateOptions<T extends DataTableValueArray> extends DataTableRowGroupHeaderTemplateOptions<T> {
     /**
@@ -65,7 +62,6 @@ interface DataTableRowGroupFooterTemplateOptions<T extends DataTableValueArray>
 
 /**
  * Custom datatable sort meta
- * @group Misc
  */
 interface DataTableSortMeta {
     /**
@@ -80,7 +76,6 @@ interface DataTableSortMeta {
 
 /**
  * Custom datatable filter metadata.
- * @group Misc
  */
 interface DataTableFilterMetaData {
     /**
@@ -95,7 +90,6 @@ interface DataTableFilterMetaData {
 
 /**
  * Custom datatable operator filter metadata.
- * @group Misc
  */
 interface DataTableOperatorFilterMetaData {
     /**
@@ -110,7 +104,6 @@ interface DataTableOperatorFilterMetaData {
 
 /**
  * Custom datatable filter meta.
- * @group Misc
  */
 interface DataTableFilterMeta {
     /**
@@ -121,7 +114,6 @@ interface DataTableFilterMeta {
 
 /**
  * Custom datatable expanded rows.
- * @group Misc
  */
 interface DataTableExpandedRows {
     [key: string]: boolean;
@@ -129,7 +121,6 @@ interface DataTableExpandedRows {
 
 /**
  * Custom datatable editing rows.
- * @group Misc
  */
 interface DataTableEditingRows {
     [key: string]: boolean;
@@ -548,7 +539,6 @@ interface DataTableRowReorderEvent<TValue extends DataTableValueArray> {
 /**
  * Options for the row expansion template
  * @see {@link DataTableProps.rowExpansionTemplate}
- * @group Misc
  */
 interface DataTableRowExpansionTemplate {
     /**
@@ -564,7 +554,6 @@ interface DataTableRowExpansionTemplate {
 /**
  * Custom row className options.
  * @see {@link DataTableProps.rowClassName}
- * @group Misc
  */
 interface DataTableRowClassNameOptions<TValue extends DataTableValueArray> {
     /**
@@ -576,7 +565,6 @@ interface DataTableRowClassNameOptions<TValue extends DataTableValueArray> {
 /**
  * Custom cell className options.
  * @see {@link DataTableProps.cellClassName}
- * @group Misc
  */
 interface DataTableCellClassNameOptions<TValue extends DataTableValueArray> {
     /**
@@ -604,7 +592,6 @@ interface DataTableCellClassNameOptions<TValue extends DataTableValueArray> {
 /**
  * Custom show selection element options.
  * @see {@link DataTableProps.showSelectionElement}
- * @group Misc
  */
 interface DataTableShowSelectionElementOptions<TValue extends DataTableValueArray> {
     /**
@@ -620,7 +607,6 @@ interface DataTableShowSelectionElementOptions<TValue extends DataTableValueArra
 /**
  * Custom show row reorder element options.
  * @see {@link DataTableProps.showRowReorderElement}
- * @group Misc
  */
 interface DataTableShowRowReorderElementOptions<TValue extends DataTableValueArray> {
     /**
@@ -636,7 +622,6 @@ interface DataTableShowRowReorderElementOptions<TValue extends DataTableValueArr
 /**
  * Custom row edit validator options.
  * @see {@link DataTableProps.rowEditValidator}
- * @group Misc
  */
 interface DataTableRowEditValidatorOptions<TValue extends DataTableValueArray> {
     /**
@@ -645,23 +630,22 @@ interface DataTableRowEditValidatorOptions<TValue extends DataTableValueArray> {
     props: DataTableProps<TValue>;
 }
 
+/**
+ * Custom value definition.
+ * @extends Record<string, any>
+ */
 interface DataTableValue extends Record<string, any> {}
 
-interface DataTableValueArray extends Array<DataTableValue> {}
-
 /**
- * @group Misc
+ * Custom value array definition.
+ * @extends Array<DataTableValue>
  */
+interface DataTableValueArray extends Array<DataTableValue> {}
+
 type DataTableRowData<TValueArray extends DataTableValueArray> = TValueArray extends Array<infer TValue> ? TValue : never;
 
-/**
- * @group Misc
- */
 type DataTableRowDataArray<TValue extends DataTableValueArray> = DataTableRowData<TValue>[];
 
-/**
- * @group Misc
- */
 type DataTableCellSelection<TValue extends DataTableValueArray> = {
     /**
      * Index of the cell.
@@ -697,9 +681,6 @@ type DataTableCellSelection<TValue extends DataTableValueArray> = {
     value: TValue[number][keyof TValue[number]];
 };
 
-/**
- * @group Misc
- */
 type DataTableSelection<TValue extends DataTableValueArray> = DataTableRowData<TValue> | DataTableRowDataArray<TValue> | DataTableCellSelection<TValue>;
 
 /**
@@ -1341,7 +1322,7 @@ export interface DataTableProps<TValue extends DataTableValueArray> extends Omit
  *
  * _DataTable displays data in tabular format._
  *
- * [Live Demo](https://www.primefaces.org/primereact/datatable/)
+ * [Live Demo](https://www.primereact.org/datatable/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/dataview/dataview.d.ts

@@ -2,7 +2,7 @@
  *
  * DataView displays data in grid or list layout with pagination and sorting features.
  *
- * [Live Demo](https://www.primefaces.org/primereact/dataview/)
+ * [Live Demo](https://www.primereact.org/dataview/)
  *
  * @module dataview
  *
@@ -50,7 +50,6 @@ interface DataViewLayoutOptionsChangeEvent {
 
 /**
  * Custom data view layout options props
- * @group Misc
  */
 export interface DataViewLayoutOptionsProps {
     /**
@@ -83,7 +82,6 @@ export interface DataViewLayoutOptionsProps {
 
 /**
  * Custom data view layout options
- * @group Misc
  * @extends {React.Component<DataViewLayoutOptionsProps, any>}
  */
 export declare class DataViewLayoutOptions extends React.Component<DataViewLayoutOptionsProps, any> {}
@@ -175,7 +173,7 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
     rowsPerPageOptions?: number[] | undefined;
     /**
      * Template of the current page report element.
-     * @defaultValue (&123;currentPage&125; of &123;totalPages&125;)
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
      */
     currentPageReportTemplate?: string | undefined;
     /**
@@ -232,7 +230,7 @@ export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
  *
  * _DataView displays data in grid or list layout with pagination and sorting features._
  *
- * [Live Demo](https://www.primefaces.org/primereact/dataview/)
+ * [Live Demo](https://www.primereact.org/dataview/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/deferredcontent/deferredcontent.d.ts

@@ -2,7 +2,7 @@
  *
  * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
  *
- * [Live Demo](https://www.primefaces.org/primereact/deferredcontent/)
+ * [Live Demo](https://www.primereact.org/deferredcontent/)
  *
  * @module deferredcontent
  *
@@ -31,7 +31,7 @@ export interface DeferredContentProps extends Omit<React.DetailedHTMLProps<React
  *
  * _DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll._
  *
- * [Live Demo](https://www.primefaces.org/primereact/deferredcontent/)
+ * [Live Demo](https://www.primereact.org/deferredcontent/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/dialog/dialog.d.ts

@@ -2,7 +2,7 @@
  *
  * Dialog is a container to display content in an overlay window.
  *
- * [Live Demo](https://www.primefaces.org/primereact/dialog)
+ * [Live Demo](https://www.primereact.org/dialog)
  *
  * @module dialog
  *
@@ -12,7 +12,6 @@ import { CSSTransitionProps } from '../csstransition';
 
 /**
  * Dialog break options
- * @group Misc
  */
 interface DialogBreakpoints {
     /**
@@ -263,7 +262,7 @@ export interface DialogProps {
  *
  * _Dialog is a container to display content in an overlay window._
  *
- * [Live Demo](https://www.primefaces.org/primereact/dialog/)
+ * [Live Demo](https://www.primereact.org/dialog/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/divider/divider.d.ts

@@ -2,7 +2,7 @@
  *
  * Divider is used to separate contents.
  *
- * [Live Demo](https://www.primefaces.org/primereact/divider/)
+ * [Live Demo](https://www.primereact.org/divider/)
  *
  * @module divider
  *
@@ -40,7 +40,7 @@ export interface DividerProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
  *
  * _Divider is used to separate contents._
  *
- * [Live Demo](https://www.primefaces.org/primereact/divider/)
+ * [Live Demo](https://www.primereact.org/divider/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/dock/dock.d.ts

@@ -2,7 +2,7 @@
  *
  * Dock is a navigation component consisting of menuitems.
  *
- * [Live Demo](https://www.primefaces.org/primereact/dock/)
+ * [Live Demo](https://www.primereact.org/dock/)
  *
  * @module dock
  *
@@ -13,7 +13,6 @@ import { MenuItem } from '../menuitem';
 /**
  * Custom header template
  * @see {@link DockProps.header}
- * @group Misc
  */
 interface DockHeaderTemplateOptions {
     /**
@@ -26,7 +25,6 @@ interface DockHeaderTemplateOptions {
  * Custom footer template
  * @see {@link DockProps.footer}
  * @extends {DockHeaderTemplateOptions}
- * @group Misc
  */
 interface DockFooterTemplateOptions extends DockHeaderTemplateOptions {}
 
@@ -68,7 +66,7 @@ export interface DockProps extends Omit<React.DetailedHTMLProps<React.HTMLAttrib
  *
  * _Dock is a navigation component consisting of menuitems._
  *
- * [Live Demo](https://www.primefaces.org/primereact/dock/)
+ * [Live Demo](https://www.primereact.org/dock/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/dropdown/dropdown.d.ts

@@ -2,7 +2,7 @@
  *
  * Dropdown also known as Select, is used to choose an item from a collection of options.
  *
- * [Live Demo](https://www.primefaces.org/primereact/dropdown/)
+ * [Live Demo](https://www.primereact.org/dropdown/)
  *
  * @module dropdown
  *
@@ -42,7 +42,6 @@ interface DropdownFilterEvent {
 /**
  * Custom filter options
  * @see {@link DropdownProps.filterTemplate}
- * @group Misc
  */
 interface DropdownFilterOptions {
     /**
@@ -333,7 +332,7 @@ export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputH
  *
  * _Dropdown also known as Select, is used to choose an item from a collection of options._
  *
- * [Live Demo](https://www.primefaces.org/primereact/dropdown/)
+ * [Live Demo](https://www.primereact.org/dropdown/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/editor/editor.d.ts

@@ -2,7 +2,7 @@
  *
  * Editor is rich text editor component based on Quill.
  *
- * [Live Demo](https://www.primefaces.org/primereact/editor/)
+ * [Live Demo](https://www.primereact.org/editor/)
  *
  * @module editor
  *
@@ -119,7 +119,7 @@ export interface EditorProps extends Omit<React.DetailedHTMLProps<React.InputHTM
  *
  * _Editor is rich text editor component based on Quill._
  *
- * [Live Demo](https://www.primefaces.org/primereact/editor/)
+ * [Live Demo](https://www.primereact.org/editor/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/fieldset/fieldset.d.ts

@@ -2,7 +2,7 @@
  *
  * Fieldset is an input component that provides real-time suggestions when being typed.
  *
- * [Live Demo](https://www.primefaces.org/primereact/fieldset/)
+ * [Live Demo](https://www.primereact.org/fieldset/)
  *
  * @module fieldset
  *
@@ -82,7 +82,7 @@ export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
  *
  * _Fieldset is an input component that provides real-time suggestions when being typed._
  *
- * [Live Demo](https://www.primefaces.org/primereact/fieldset/)
+ * [Live Demo](https://www.primereact.org/fieldset/)
  * --- ---
  * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
  *

package/fileupload/fileupload.cjs.js

@@ -193,6 +193,91 @@ var FileUploadBase = {
   }
 };
 
+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 = {
+  defaultProps: {
+    __TYPE: 'Badge',
+    value: null,
+    severity: null,
+    size: null,
+    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 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),
+    '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;
+      }
+    };
+  });
+  return /*#__PURE__*/React__namespace.createElement("span", _extends({
+    ref: elementRef,
+    className: className,
+    style: props.style
+  }, otherProps), props.value);
+}));
+Badge.displayName = 'Badge';
+
 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; }
@@ -200,26 +285,31 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var props = FileUploadBase.getProps(inProps);
   var _React$useState = React__namespace.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filesState = _React$useState2[0],
-    setFilesState = _React$useState2[1];
-  var _React$useState3 = React__namespace.useState(0),
+    uploadedFilesState = _React$useState2[0],
+    setUploadedFilesState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState([]),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    progressState = _React$useState4[0],
-    setProgressState = _React$useState4[1];
-  var _React$useState5 = React__namespace.useState(false),
+    filesState = _React$useState4[0],
+    setFilesState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(0),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    focusedState = _React$useState6[0],
-    setFocusedState = _React$useState6[1];
+    progressState = _React$useState6[0],
+    setProgressState = _React$useState6[1];
   var _React$useState7 = React__namespace.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    uploadingState = _React$useState8[0],
-    setUploadingState = _React$useState8[1];
+    focusedState = _React$useState8[0],
+    setFocusedState = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    uploadingState = _React$useState10[0],
+    setUploadingState = _React$useState10[1];
   var fileInputRef = React__namespace.useRef(null);
   var messagesRef = React__namespace.useRef(null);
   var contentRef = React__namespace.useRef(null);
   var duplicateIEEvent = React__namespace.useRef(false);
   var uploadedFileCount = React__namespace.useRef(0);
   var hasFiles = utils.ObjectUtils.isNotEmpty(filesState);
+  var hasUploadedFiles = utils.ObjectUtils.isNotEmpty(uploadedFilesState);
   var disabled = props.disabled || uploadingState;
   var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || api.localeOption('choose');
   var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || api.localeOption('upload');
@@ -243,6 +333,19 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       });
     }
   };
+  var removeUploadedFiles = function removeUploadedFiles(event, index) {
+    clearInput();
+    var currentUploadedFiles = _toConsumableArray(uploadedFilesState);
+    var removedFile = filesState[index];
+    currentUploadedFiles.splice(index, 1);
+    setUploadedFilesState(currentUploadedFiles);
+    if (props.onRemove) {
+      props.onRemove({
+        originalEvent: event,
+        file: removedFile
+      });
+    }
+  };
   var clearInput = function clearInput() {
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
@@ -407,6 +510,9 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
               });
             }
           }
+          setUploadedFilesState(function (prevUploadedFiles) {
+            return [].concat(_toConsumableArray(prevUploadedFiles), _toConsumableArray(files));
+          });
           clear();
         }
       };
@@ -546,27 +652,37 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       tabIndex: 0
     }, input, icon, label, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   };
-  var createFile = function createFile(file, index) {
+  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("div", null, /*#__PURE__*/React__namespace.createElement("img", {
-      alt: file.name,
+    var preview = isImage(file) ? /*#__PURE__*/React__namespace.createElement("img", {
       role: "presentation",
+      className: "p-fileupload-file-thumbnail",
+      alt: file.name,
       src: file.objectURL,
       width: props.previewWidth
-    })) : null;
+    }) : 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, {
+      className: "p-fileupload-file-badge",
+      value: badgeOptions.value,
+      severity: badgeOptions.severity
+    }));
     var removeButton = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(button.Button, {
       type: "button",
       icon: "pi pi-times",
+      className: "p-button-danger p-button-text p-button-rounded",
       onClick: function onClick(e) {
-        return remove(e, index);
+        return onRemoveClick(e, badgeOptions, index);
       },
       disabled: disabled
     }));
-    var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, fileName, size, removeButton);
+    var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, contentBody, removeButton);
     if (props.itemTemplate) {
       var defaultContentOptions = {
         onRemove: function onRemove(event) {
@@ -589,13 +705,27 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     }, content);
   };
   var createFiles = function createFiles() {
-    var content = filesState.map(createFile);
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-fileupload-files"
-    }, content);
+    var badgeOptions = {
+      severity: 'warning',
+      value: 'Pending'
+    };
+    var content = filesState.map(function (file, index) {
+      return createFile(file, index, badgeOptions);
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, content);
+  };
+  var createUploadedFiles = function createUploadedFiles() {
+    var badgeOptions = {
+      severity: 'success',
+      value: 'Completed'
+    };
+    var content = uploadedFilesState && uploadedFilesState.map(function (file, index) {
+      return createFile(file, index, badgeOptions);
+    });
+    return /*#__PURE__*/React__namespace.createElement("div", null, content);
   };
   var createEmptyContent = function createEmptyContent() {
-    return props.emptyTemplate && !hasFiles ? utils.ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
+    return props.emptyTemplate && !hasFiles && !hasUploadedFiles ? utils.ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
   };
   var createProgressBarContent = function createProgressBarContent() {
     if (props.progressBarTemplate) {
@@ -613,7 +743,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     var contentClassName = utils.classNames('p-fileupload-content', props.contentClassName);
     var chooseButton = createChooseButton();
     var emptyContent = createEmptyContent();
-    var uploadButton, cancelButton, filesList, progressBar;
+    var uploadButton, cancelButton, filesList, uplaodedFilesList, progressBar;
     if (!props.auto) {
       var uploadOptions = props.uploadOptions;
       var cancelOptions = props.cancelOptions;
@@ -642,6 +772,9 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       filesList = createFiles();
       progressBar = createProgressBarContent();
     }
+    if (hasUploadedFiles) {
+      uplaodedFilesList = createUploadedFiles();
+    }
     var header = /*#__PURE__*/React__namespace.createElement("div", {
       className: headerClassName,
       style: props.headerStyle
@@ -671,7 +804,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       onDrop: onDrop
     }, progressBar, /*#__PURE__*/React__namespace.createElement(messages.Messages, {
       ref: messagesRef
-    }), filesList, emptyContent));
+    }), hasFiles ? filesList : null, hasUploadedFiles ? uplaodedFilesList : null, emptyContent));
   };
   var createBasic = function createBasic() {
     var chooseOptions = props.chooseOptions;