aefis-core-ui 2.3.0-rc1 → 2.3.0-rc10

package/dist/index.modern.js

@@ -84,6 +84,7 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import { registerPlugin, FilePond } from 'react-filepond';
 import FilePondPluginGetFile from 'filepond-plugin-get-file';
+import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import MaskedInput from 'react-text-mask';
 import StylesProvider from '@mui/styles/StylesProvider';
 
@@ -1952,28 +1953,22 @@ const titleProps = {
   color: "textPrimary",
   variant: "h3",
   style: {
-    fontSize: "1.2rem",
+    fontSize: "1.1rem",
     fontWeight: 500,
     lineHeight: 1.3,
-    letterSpacing: 0.5,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    letterSpacing: 0.5
   }
 };
 const subtitleProps = {
   color: "textSecondary",
   style: {
-    fontSize: "0.875rem",
-    fontWeight: 400,
+    fontSize: "0.775rem",
+    fontWeight: "bolder",
     lineHeight: 1.4,
     letterSpacing: 0,
     display: "inline-flex",
     verticalAlign: "middle",
-    alignItems: "center",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    alignItems: "center"
   }
 };
 const getGradientBackgroundColorArray = arrayIndex => {
@@ -2001,6 +1996,20 @@ const ContentBox = props => {
     return props.children ? /*#__PURE__*/React.cloneElement(props.children) : "";
   };
   titleProps.component = props.titleComponent;
+  if (props.wrapTitle) {
+    titleProps["style"] = _extends({}, titleProps.style, {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    });
+  }
+  if (props.wrapSubtitle) {
+    titleProps["style"] = _extends({}, titleProps.style, {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    });
+  }
   const headerProps = {
     title: props.title,
     disableTypography: false,
@@ -2030,7 +2039,7 @@ const ContentBox = props => {
     headerProps.subheader = props.subtitle;
   }
   if (props.titleBadge) {
-    headerProps.title = /*#__PURE__*/jsx("div", {
+    headerProps.title = /*#__PURE__*/jsx(Box$1, {
       children: /*#__PURE__*/jsx(StyledBadge$1, {
         badgeContent: props.titleBadge,
         invisible: invisible,
@@ -2054,12 +2063,9 @@ const ContentBox = props => {
     };
     if (props.subtitle) {
       headerProps.subheader = /*#__PURE__*/jsx(Typography, {
-        variant: "body1",
+        variant: "subtitle1",
         component: "span",
         noWrap: true,
-        sx: {
-          color: "text.secondary"
-        },
         style: {
           fontSize: "0.875rem",
           letterSpacing: 0
@@ -2074,6 +2080,7 @@ const ContentBox = props => {
   const cardStyle = _extends({
     marginBottom: props.hasGutter ? 8 : 0,
     borderRadius: 16,
+    transition: "border 100ms ease-out",
     boxShadow: props.displayType === "outlined" ? "none" : "rgb(58 53 65 / 10%) 0px 2px 10px 0px"
   }, props.cardStyle);
   if (props.displayType === "outlined") {
@@ -2091,7 +2098,7 @@ const ContentBox = props => {
   return /*#__PURE__*/jsxs(Box$1, {
     sx: props.sx,
     style: props.containerStyle,
-    children: [props.header && /*#__PURE__*/jsx("div", {
+    children: [props.header && /*#__PURE__*/jsx(Box$1, {
       className: classes.sectionHeader,
       children: /*#__PURE__*/jsx(Typography, {
         variant: "h6",
@@ -2101,7 +2108,7 @@ const ContentBox = props => {
     }), /*#__PURE__*/jsxs(Card, {
       style: cardStyle,
       className: tag.tag,
-      children: [useHeaderImage && /*#__PURE__*/jsx("div", {
+      children: [useHeaderImage && /*#__PURE__*/jsx(Box$1, {
         style: imageDivStyle,
         className: classes.imageContainer,
         title: props.title,
@@ -2147,7 +2154,9 @@ ContentBox.defaultProps = {
   imageHeight: 150,
   hasGutter: true,
   imageBackgroundColor: "transparent",
-  titleComponent: "div"
+  titleComponent: "div",
+  wrapTitle: false,
+  wrapSubtitle: false
 };
 ContentBox.propTypes = {
   /** Content of the content box */
@@ -2162,6 +2171,10 @@ ContentBox.propTypes = {
   subtitle: PropTypes.any,
   /** Main title of the content box.  Can be a string or any component. */
   title: PropTypes.any,
+  /** Wrap the title? */
+  wrapTitle: PropTypes.bool,
+  /** Wrap the subtitle? */
+  wrapSubtitle: PropTypes.bool,
   /** Add a badge to the title of the content box. */
   titleBadge: PropTypes.number,
   /** The component to use to render the title. */
@@ -3296,12 +3309,12 @@ const outcomeConfiguration = {
 // about solution: https://stackoverflow.com/questions/22820162/mustache-js-escaping
 mustache.escape = _ => _;
 function compile() {}
-function render$2(template, data, defaultValue) {
+function render$1(template, data, defaultValue) {
   return template ? mustache.render(template, data) : defaultValue;
 }
 var template = {
   compile,
-  render: render$2
+  render: render$1
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
@@ -4339,6 +4352,9 @@ const RenderCard = props => {
       configuration: props.actionsConfiguration,
       data: props.data
     }) : undefined,
+    cardStyle: props.cardStyle || undefined,
+    containerStyle: props.containerStyle || undefined,
+    sx: props.sx || undefined,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [props.description && /*#__PURE__*/jsx(CardSection, {
         sx: descriptionContainerStyle,
@@ -4372,7 +4388,10 @@ RenderCard.propTypes = {
   avatarIconColor: PropTypes.string,
   gradientColorHeaderImageId: PropTypes.any,
   autoTruncateDescription: PropTypes.bool,
-  avatar: PropTypes.any
+  avatar: PropTypes.any,
+  cardStyle: PropTypes.any,
+  containerStyle: PropTypes.any,
+  sx: PropTypes.object
 };
 const BusinessObjectCard = props => {
   return props.displayType === "skeleton" ? /*#__PURE__*/jsx(RenderSkeleton, {
@@ -4417,7 +4436,13 @@ BusinessObjectCard.propTypes = {
   /** Override the avatar with provided avatar object. */
   avatar: PropTypes.any,
   /** Automatically truncate the description.  For consistency, this should nearly always be set to "true" */
-  autoTruncateDescription: PropTypes.bool
+  autoTruncateDescription: PropTypes.bool,
+  /** Additional styles for the card */
+  cardStyle: PropTypes.any,
+  /** Additional styles for the content box container */
+  containerStyle: PropTypes.any,
+  /** Additional styles to apply */
+  sx: PropTypes.object
 };
 
 const _excluded$f = ["enableScrollTop", "containerProps"];
@@ -5296,7 +5321,8 @@ const useStyles$y = makeStyles(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
-    position: "relative"
+    position: "relative",
+    minHeight: 60
   },
   closeButton: {
     position: "absolute",
@@ -6828,7 +6854,7 @@ DataTable.propTypes = {
 };
 
 const options = {
-  arrayFormat: "index"
+  arrayFormat: "bracket"
 };
 const setQueryStringWithoutPageReload = qsValue => {
   const {
@@ -7658,69 +7684,6 @@ TextSearch.propTypes = {
   bottomGutter: PropTypes.number
 };
 
-const {
-  render: render$1
-} = template;
-
-/**
- * This function returns unique field inside filter item using render.
- *
- * @param {object} item
- * @param {object} filter
- * @returns {string}
- */
-const getFilterItemId = (item, configItem = {}) => {
-  var _item$data;
-  if (item.id) {
-    return item.id;
-  }
-  const template = configItem.idTemplate || configItem.template || configItem.optionTemplate;
-  if (template) {
-    return render$1(template, item.data || item);
-  }
-  if ((_item$data = item.data) != null && _item$data.id) {
-    return item.data.id;
-  }
-};
-
-/**
- * This function checks filter items; if index and id fields are missing then
- * try to sets them with possible ways.
- *
- * @param {array} filters
- * @param {array} configuration
- * @returns {array}
- */
-const formatFilters = (filters = [], configuration = []) => filters.map(filter => {
-  var _ref, _filter$index, _filter$id, _configuration$index, _configuration$index2, _configuration$index3, _configuration$index4, _configuration$index5;
-  // TODO: index should be defined on filters. There should not be need of
-  // search of index value throught type or map values.
-  const index = (_ref = (_filter$index = filter == null ? void 0 : filter.index) != null ? _filter$index : findIndexByType(filter, configuration)) != null ? _ref : findIndexByMap(filter, configuration);
-  const id = (_filter$id = filter == null ? void 0 : filter.id) != null ? _filter$id : getFilterItemId(filter, configuration[index]);
-
-  // TODO: These properties should ONLY be defined either in configuration
-  // or filters; currently data can be defined from both sources. Filter
-  // data prioritised over configuratuon.
-  const {
-    map = (_configuration$index = configuration[index]) == null ? void 0 : _configuration$index.map,
-    type = (_configuration$index2 = configuration[index]) == null ? void 0 : _configuration$index2.type,
-    template = (_configuration$index3 = configuration[index]) == null ? void 0 : _configuration$index3.template,
-    idTemplate = (_configuration$index4 = configuration[index]) == null ? void 0 : _configuration$index4.idTemplate,
-    optionTemplate = (_configuration$index5 = configuration[index]) == null ? void 0 : _configuration$index5.optionTemplate
-  } = filter;
-  return _extends({}, filter, {
-    template,
-    idTemplate,
-    optionTemplate,
-    type,
-    map,
-    index,
-    id
-  });
-});
-const findIndexByType = (filter, configuration) => filter.type !== undefined ? configuration.findIndex(config => config.type === filter.type) : undefined;
-const findIndexByMap = (filter, configuration) => filter.map !== undefined ? configuration.findIndex(config => config.map === filter.map) : undefined;
-
 const mapFilters = newFilters => {
   const mappedFilters = {};
   newFilters.map(filter => {
@@ -8095,7 +8058,8 @@ const FilterChips = ({
   const Filters = useMemo(() => {
     return /*#__PURE__*/jsx(Box$1, {
       sx: {
-        display: "flex"
+        display: "flex",
+        flexFlow: "wrap"
       },
       children: _filters.map(filter => /*#__PURE__*/jsx(Grow, {
         in: true,
@@ -8110,7 +8074,7 @@ const FilterChips = ({
             displayOptions: {
               hasIcon: filter.type !== "keyword"
             },
-            type: "businessObject",
+            type: filter.type || "businessObject",
             template: filter.template,
             data: filter.data,
             onDelete: () => {
@@ -8121,7 +8085,11 @@ const FilterChips = ({
       }, `filterPanelFilter-${filter.index}-${filter.id}`))
     });
   }, [_filters]);
-  const SortItems = useMemo(() => /*#__PURE__*/jsx(Fragment, {
+  const SortItems = useMemo(() => /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      display: "flex",
+      flexFlow: "wrap"
+    },
     children: _sort.map(sortItem => /*#__PURE__*/jsx(Grow, {
       in: true,
       children: /*#__PURE__*/jsx("div", {
@@ -8359,6 +8327,36 @@ PanelDisplay.propTypes = {
   renderFilterSelection: PropTypes.bool
 };
 
+const usePrevState = (callback, current) => {
+  const [prev, setPrev] = useState(current);
+  if (prev !== current) {
+    callback(prev, current);
+    setPrev(current);
+  }
+};
+
+const useFilterState = filtersProp => {
+  const [filters, _setFilters] = useState(filtersProp);
+  const setFilters = useCallback((filters = []) => {
+    const sorted = filters.sort((a, b) => a.index - b.index);
+    _setFilters(sorted);
+  }, []);
+  usePrevState(() => {
+    setFilters(filtersProp);
+  }, filtersProp);
+  return [filters, setFilters];
+};
+
+const getItemId = (item, filter) => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
+const formatFilterItem = (index, filter, data) => ({
+  index: index,
+  id: getItemId(data, filter),
+  type: filter.type,
+  template: filter.optionTemplate,
+  idTemplate: filter.idTemplate,
+  map: filter.map,
+  data
+});
 const mapSort = value => value.map(i => i.map);
 const getSearchFilter = newFilters => (newFilters == null ? void 0 : newFilters.filter(filter => (filter == null ? void 0 : filter.type) === "keyword").map(item => item.data.id)) || [];
 
@@ -8377,7 +8375,7 @@ const FilterPanel = props => {
     searchTooltip,
     searchPlaceHolderText,
     configuration,
-    filters: filtersProp,
+    filters: filtersProp = [],
     displayType,
     limitTags,
     bottomGutter,
@@ -8387,14 +8385,10 @@ const FilterPanel = props => {
     sort: sortProp
   } = props;
   const [menuPosition, setMenuPosition] = useState(null);
-  const [filters, setFilters] = useState([]);
+  const [filters, setFilters] = useFilterState(filtersProp);
   const [sort, setSort] = useState(sortProp || []);
   const [panelSearch, setPanelSearch] = useState([]);
   const [pickerFilters, setPickerFilters] = useState([]);
-  useEffect(() => {
-    const formattedFilters = formatFilters(filtersProp, configuration);
-    setFilters(formattedFilters);
-  }, [filtersProp]);
 
   // TODO: replace it with useMemo
   useEffect(() => {
@@ -8420,9 +8414,8 @@ const FilterPanel = props => {
       onDataChange(filteredData, filterParameters, filters);
     }
   }, [filters, sort]);
-  const removeFilter = filter => {
-    console.log("remove filter ", filter);
-    const newFilterArray = filters == null ? void 0 : filters.filter(i => i.index !== filter.index || filter.id !== i.id);
+  const removeFilter = (filter = []) => {
+    const newFilterArray = filters.filter(i => i.index !== filter.index || filter.id !== i.id);
     setFilters(newFilterArray);
     if (!onApplyFilters) {
       if ((filter == null ? void 0 : filter.type) === "keyword" && onSearchChange) {
@@ -8459,69 +8452,14 @@ const FilterPanel = props => {
       onChange(mapFilters(newFilterArray), newFilterArray);
     }
   };
-  /** Had to revert this function as filters were not working properly 
-  const handleSetFilterType = (inputIndex, configItem, data = []) => {
-  	const newFiltersByUpdatedIndex = data.map((filterItem) => {
-  		return {
-  			index: inputIndex,
-  			id: filterItem.id || getFilterItemId(configItem, filterItem),
-  			type: configItem.type,
-  			template: configItem.optionTemplate,
-  			idTemplate: configItem.idTemplate,
-  			map: configItem.map,
-  			data: filterItem
-  		};
-  	});
-  	const filtersByUnupdatedIndex = filters.filter((i) => i.index !== inputIndex);
-  	const newFilters = [...filtersByUnupdatedIndex, ...newFiltersByUpdatedIndex];
-  		setFilters(newFilters);
-  	if (onChange) {
-  		// TO-CHECK: what does mapFilters do?
-  		onChange(mapFilters(newFilters), newFilters);
-  	}
-  }; */
-
   const handleSetFilterType = (index, filter, data) => {
-    const getItemId = item => item.id || template.render(filter.idTemplate || filter.optionTemplate, item);
-    if (!Array.isArray(data)) {
-      const _newFilterArray = filters.filter(i => index !== i.index);
-      if (data) {
-        const newItemId = getItemId(data);
-        _newFilterArray.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: data
-        });
-      }
-      setFilters(_newFilterArray);
-      if (onChange && !onApplyFilters) {
-        onChange(mapFilters(_newFilterArray), _newFilterArray);
-      }
-      return;
-    }
-    data.map(item => {
-      const newItemId = getItemId(item);
-      if (!filters.find(i => i.index === index && i.id === newItemId)) {
-        filters.push({
-          index: index,
-          id: newItemId,
-          type: filter.type,
-          template: filter.optionTemplate,
-          idTemplate: filter.idTemplate,
-          map: filter.map,
-          data: item
-        });
-      }
-    });
-    const newFilterArray = filters.filter(i => index !== i.index || index === i.index && data.find(d => i.data.id === d.id));
-    setFilters(newFilterArray);
-    if (onChange && !onApplyFilters) {
-      onChange(mapFilters(newFilterArray), newFilterArray);
-    }
+    let _data = data;
+    if (!Array.isArray(data)) _data = data ? [data] : [];
+    const filtersWithoutUpdatedField = filters.filter(filter => index !== filter.index);
+    const newUpdatedFilters = _data.map(d => formatFilterItem(index, filter, d));
+    const newFilters = filtersWithoutUpdatedField.concat(newUpdatedFilters);
+    setFilters(newFilters);
+    if (!onApplyFilters) onChange == null ? void 0 : onChange(mapFilters(newFilters), newFilters);
   };
   const handleSortChange = value => {
     setSort(value);
@@ -9957,13 +9895,13 @@ const Drawer = props => {
   };
   const theme = useTheme$1();
   const appBarStyle = {
-    primary: {
+    primary: _extends({
       color: "#ffffff"
-    },
-    secondary: {
+    }, props.appBarStyle),
+    secondary: _extends({
       backgroundColor: "#ffffff",
       color: "#333333"
-    }
+    }, props.appBarStyle)
   };
   const closeDrawerIconStyle = {
     color: props.headerColor === "secondary" ? "rgba(0, 0, 0, 0.54)" : "#ffffff",
@@ -10171,6 +10109,8 @@ Drawer.propTypes = {
   menuPositionOffset: PropTypes.oneOf(["none", "primaryMenu", "secondaryMenu"]),
   /** Additional styles to apply to the drawer paper. */
   paperStyle: PropTypes.any,
+  /** Additional styles to apply to the appbar. */
+  appBarStyle: PropTypes.any,
   /** Whether or not to show the header divider */
   headerDivider: PropTypes.bool,
   /** The component to use while rendering the drawer title */
@@ -14654,36 +14594,7 @@ Header.propTypes = {
   allStepsCompleted: PropTypes.bool
 };
 
-// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$5 = makeStyles(theme => ({
-  container: {
-    position: "absolute",
-    overflowY: "auto",
-    left: 0,
-    right: 0,
-    bottom: 64,
-    top: 178
-  },
-  tabBar: {
-    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
-    zIndex: 1,
-    background: "#ffffff",
-    padding: theme.spacing(2)
-  },
-  scrolledTabBar: {
-    zIndex: 1,
-    borderBottom: "none",
-    background: "#ffffff",
-    padding: theme.spacing(2),
-    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
-  },
-  bottomBar: {
-    borderTop: "1px solid rgba(0, 0, 0, 0.12)"
-  },
-  scrolledBottomBar: {
-    borderTop: "none",
-    boxShadow: "0px -4px 8px -4px rgba(0,0,0,0.12)"
-  },
   buttonContainer: {
     marginLeft: "auto",
     display: "flex"
@@ -14696,7 +14607,7 @@ const useStyles$5 = makeStyles(theme => ({
     marginRight: 8
   }
 }));
-const bottomBarStyle = {
+const bottomBarDefaultStyle = {
   background: "#ffffff",
   display: "flex",
   minHeight: 64,
@@ -14712,7 +14623,7 @@ const bottomBarStyle = {
   right: 0
 };
 
-/** Component to display a "stepper" wizard panel for multiple step proceses with swipeable tabs. Designed to be display within a Drawer component. */
+/** Component to display a "stepper" wizard panel for multiple step processes with swipeable tabs. Designed to be display within a Drawer component. */
 
 const WizardPanel = props => {
   var _props$panels;
@@ -14744,9 +14655,34 @@ const WizardPanel = props => {
     props.onComplete && props.onComplete();
   };
   const theme = useTheme$1();
+  const stepsContainer = {
+    position: "absolute",
+    overflowY: "auto",
+    left: 0,
+    right: 0,
+    bottom: 64,
+    top: 178
+  };
   const containerStyle = {
     backgroundColor: props.cardContent ? "rgb(239, 242, 246)" : "rgb(255,255,255)"
   };
+  const tabBarStyle = {
+    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    zIndex: 1,
+    background: "#ffffff",
+    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px"
+  };
+  const scrolledTabBarStyle = {
+    zIndex: 1,
+    borderBottom: "none",
+    background: "#ffffff",
+    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px",
+    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
+  };
+  const bottomBarStyle = _extends({}, bottomBarDefaultStyle, {
+    borderTop: "none",
+    boxShadow: props.display === "drawer" ? "0px -4px 8px -4px rgba(0,0,0,0.12)" : "none"
+  });
   useEffect(() => {
     var _containerRef$current;
     (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.scrollTo == null ? void 0 : _containerRef$current.scrollTo({
@@ -14760,9 +14696,9 @@ const WizardPanel = props => {
   }, [props.completed]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(AppBar$1, {
-      position: "sticky",
+      position: props.display === "drawer" ? "sticky" : "relative",
       component: "div",
-      className: scrollTrigger ? classes.scrolledTabBar : classes.tabBar,
+      sx: scrollTrigger ? scrolledTabBarStyle : tabBarStyle,
       elevation: 0,
       color: "default",
       children: /*#__PURE__*/jsx(Header, {
@@ -14773,7 +14709,7 @@ const WizardPanel = props => {
     }), /*#__PURE__*/jsx(Box$1, {
       ref: containerRef,
       sx: containerStyle,
-      className: classes.container,
+      style: props.display === "drawer" ? stepsContainer : undefined,
       children: /*#__PURE__*/jsx(SwipeableViews, {
         axis: theme.direction === "rtl" ? "x-reverse" : "x",
         index: activeStep,
@@ -14790,7 +14726,6 @@ const WizardPanel = props => {
       })
     }), /*#__PURE__*/jsx(Box$1, {
       style: bottomBarStyle,
-      className: classes.scrolledBottomBar,
       children: /*#__PURE__*/jsxs(Box$1, {
         className: classes.buttonContainer,
         children: [/*#__PURE__*/jsx(Button, {
@@ -14851,9 +14786,12 @@ WizardPanel.defaultProps = {
   completed: false,
   completeButtonText: "Finish",
   disableComplete: false,
-  completing: false
+  completing: false,
+  display: "drawer"
 };
 WizardPanel.propTypes = {
+  /** Where to display the panel, a dialog or drawer. */
+  display: PropTypes.oneOf(["drawer"], ["dialog"]),
   /** The data defining the wizard steps and content. */
   panels: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.any.isRequired,
@@ -16653,14 +16591,6 @@ const render = (value, formState) => {
   }
   return mustache.render(value, formState);
 };
-const renderUrl = (value, formState) => {
-  if (value === undefined || value === null) {
-    return value;
-  }
-  return decodeHtml$2(mustache.render(value, formState));
-};
-const useRenderUrl = template => useSelectFormState(state => renderUrl(template, state));
-const useRender = template => useSelectFormState(state => render(template, state));
 
 const useQueryTemplateParam = queryTemplate => {
   const selector = useCallback(state => {
@@ -17156,49 +17086,6 @@ const DisableWrapper = ({
   }));
 };
 
-const ImageUploadReadOnly = ({
-  formData,
-  schema,
-  uiSchema: _uiSchema = {
-    "ui:options": {}
-  }
-}) => {
-  const {
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate
-  } = _uiSchema["ui:options"];
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  const extension = useRender(extensionTemplate);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Typography, {
-      gutterBottom: true,
-      variant: "subtitle2",
-      children: schema.title
-    }), /*#__PURE__*/jsx(Paper, {
-      sx: {
-        height: 185,
-        justifyContent: "center",
-        display: "flex",
-        padding: 2,
-        overflow: "hidden"
-      },
-      variant: "outlined",
-      children: /*#__PURE__*/jsx(Image, {
-        src: downloadUrl,
-        style: {
-          height: "100%",
-          width: "auto"
-        },
-        extension: extension
-      })
-    })]
-  });
-};
-ImageUploadReadOnly.propTypes = {
-  schema: PropTypes.any,
-  renderedValues: PropTypes.any
-};
-
 const FieldContainer = props => {
   return /*#__PURE__*/jsx(Box$2, _extends({}, props, {
     sx: _extends({}, props.sx, {
@@ -17210,7 +17097,30 @@ const FieldContainer = props => {
 };
 FieldContainer.propTypes = Box$2.propTypes;
 
-registerPlugin(FilePondPluginFileValidateType, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
+
+// Check enums below
+// source:https://github.com/pqina/filepond-docs/blob/master/content/patterns/API/filepond-object.md#filepond-status
+const FILE_STATUS = {
+  INIT: 1,
+  IDLE: 2,
+  PROCESSING_QUEUED: 9,
+  PROCESSING: 3,
+  PROCESSING_COMPLETE: 5,
+  // upload complete
+  PROCESSING_ERROR: 6,
+  PROCESSING_REVERT_ERROR: 10,
+  LOADING: 7,
+  LOAD_ERROR: 8
+};
+const FILE_ORIGIN = {
+  INPUT: 1,
+  // add by user
+  LIMBO: 2,
+  // temp file
+  LOCAL: 3 // pre-loaded files
+};
+
 const Upload = props => {
   const {
     schema,
@@ -17219,67 +17129,108 @@ const Upload = props => {
       "ui:options": {}
     },
     onChange,
-    disabled,
-    required
+    disabled
   } = props;
+  const emptyValue = uiSchema["ui:emptyValue"] || null;
   const isReadOnly = useReadOnly();
   const {
-    documentName: documentNameTemplate,
-    downloadUrl: downloadUrlTemplate,
-    extension: extensionTemplate,
     uploadDataSource,
-    mapUploadResponse,
     acceptedFileTypes,
     message,
-    isImage
-  } = uiSchema["ui:options"];
-  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
-  const documentName = useRender(documentNameTemplate);
-  const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  useRender(extensionTemplate);
-  const [files, setFiles] = useState([]);
-  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
+    // TODO: can be handled generic way with HOC
+    isImage = true,
+    // multiple = true, // change to false
 
-  // INFO: this state is needed to prevent re-load of file during submit
-  const [currentFileId, setCurrentFileId] = useState();
+    isPreviewHidden = false,
+    idTemplate,
+    downloadUrlTemplate,
+    nameTemplate,
+    mapUploadResponseToIdTemplate,
+    maxFiles = 1,
+    maxFileSize = null,
+    maxTotalFileSize = null
+  } = uiSchema["ui:options"];
 
-  // TODO: change this to useMemo with help of useLastestDeps
-  useEffect(() => {
-    if (formData === currentFileId) return;
-    const files = [{
-      source: documentName || "File",
-      options: {
-        type: "local",
-        metadata: {
-          url: downloadUrl
+  // TODO: implement single vs multipe mode, currently only multiple is active
+  // let _formData = formData; if (multiple && (formData === null ||
+  // formData === undefined)) { _formData = [];
+  // }
+  const _formData = formData || [];
+  const initialFiles = useMemo(() => {
+    return _formData.map(({
+      data
+    }) => {
+      const id = mustache.render(idTemplate, data);
+      const downloadUrl = downloadUrlTemplate ? decodeHtml$2(mustache.render(downloadUrlTemplate, data)) : downloadUrlTemplate;
+      const name = mustache.render(nameTemplate, data);
+      return {
+        // INFO: source appears in preview but also needed to identify
+        // the download URL. Check issue:
+        // https://github.com/pqina/filepond/issues/284
+        source: `${name} id:${id}`,
+        options: {
+          type: "local",
+          origin: downloadUrl,
+          // INFO: id is used in getFileIds function
+          metadata: {
+            url: downloadUrl,
+            id
+          }
         }
-      }
-    }];
-    if (formData != undefined) setFiles(files);
-  }, [formData]);
-  const handleLoad = (source, load, error) => {
-    fetch(downloadUrl).then(res => res.blob()).then(res => {
+      };
+    });
+  }, []);
+  const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
+  const filePondRef = useRef();
+  const getFileIds = () => {
+    var _filePondRef$current;
+    return ((_filePondRef$current = filePondRef.current) == null ? void 0 : _filePondRef$current.getFiles().filter(file => {
+      const {
+        origin,
+        status
+      } = file;
+      if (origin === FILE_ORIGIN.LOCAL) return true;
+      if (origin === FILE_ORIGIN.INPUT && status === FILE_STATUS.PROCESSING_COMPLETE) return true;
+    }).map(file => {
+      if (file.origin === FILE_ORIGIN.LOCAL) return file.getMetadata().id;
+      return file.serverId;
+    }).map(i => i.toString())) || [];
+  };
+  const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
+  const handleLoad = (source, load, error, progress, abort, headers) => {
+    // INFO: source appears in preview but also needed to identify
+    // the download URL. Check issue:
+    // https://github.com/pqina/filepond/issues/284
+    const file = initialFiles.find(item => item.source === source);
+    const loadUrl = file.options.origin;
+    fetch(loadUrl).then(res => res.blob()).then(res => {
       const file = res.type === "jpeg/jfif" || !res.type ? new Blob([res], {
         type: "image/jpeg"
       }) : res;
-      load(file);
+      const preview = isPreviewHidden ? res : file;
+      load(preview);
     }).catch(error);
+
+    // Should expose an abort method so the request can be cancelled
+    return {
+      abort: () => abort()
+    };
   };
   const handleUploadResponse = res => {
     try {
       const jsonRes = JSON.parse(res);
-      const fileUuid = mapUploadResponse ? mustache.render(mapUploadResponse.fileUuid, jsonRes) : jsonRes.DATA.fileUuid;
-      setCurrentFileId(fileUuid);
-      onChange(fileUuid);
+      const id = mustache.render(mapUploadResponseToIdTemplate, jsonRes);
+      return id;
     } catch (err) {
-      console.log(err);
+      var _window$logger;
+      (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+        name: `Upload response could not be parsed. ${err}`,
+        data: res
+      });
     }
   };
-  const handleDelete = () => {
-    setCurrentFileId();
-    setFiles([]);
-    onChange();
-  };
+
+  // TODO: move to message HOC
   const messageProps = {
     title: (message == null ? void 0 : message.title) || undefined,
     description: (message == null ? void 0 : message.description) || undefined,
@@ -17289,48 +17240,91 @@ const Upload = props => {
   const {
     error
   } = useNotify();
-  const filePondProps = {
-    acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
-    files,
-    allowMultiple: false,
-    server: {
-      url: uploadUrl,
-      process: {
-        method: "POST",
-        headers: {
-          Methods: "POST"
-        },
-        onload: handleUploadResponse,
-        onerror: e => {
-          var _window$logger;
-          const message = `The image could not be uploaded.`;
-          error(message);
-          (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
-            name: message,
-            data: e
-          });
-        }
+  const handleFileChange = () => {
+    const ids = getFileIds();
+
+    // TODO: fill the data
+    const value = ids.map(id => ({
+      value: id,
+      data: {}
+    }));
+    if (value.length === 0) onChange(emptyValue);else onChange(value);
+  };
+
+  // TODO: move to memo component
+  const FileUpload = useMemo(() => {
+    const styles = isReadOnly ? {
+      // INFO: hide drop panel and drop panel
+      "div>div>div.filepond--drop-label": {
+        display: "none"
       },
-      load: handleLoad,
-      revert: handleDelete
-    },
-    onupdatefiles: files => {
-      if (files.length === 0) {
-        onChange(undefined);
+      "button.filepond--action-remove-item": {
+        display: "none"
       }
-      setFiles(files);
-    },
-    allowProcess: false,
-    disabled: isReadOnly,
-    allowDownloadByUrl: true
-  };
-  const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    } : null;
+    const getAcceptedFileTypes = () => {
+      if (acceptedFileTypes) return acceptedFileTypes;
+      if (isImage) return ["image/*"];
+      return null;
+    };
+    const filePondProps = {
+      acceptedFileTypes: getAcceptedFileTypes(),
+      files: initialFiles,
+      // files: undefined,
+      allowMultiple: true,
+      server: {
+        url: uploadUrl,
+        process: {
+          method: "POST",
+          headers: {
+            Methods: "POST"
+          },
+          onload: handleUploadResponse,
+          onerror: e => {
+            var _window$logger2;
+            const message = `The image could not be uploaded.`;
+            error(message);
+            (_window$logger2 = window.logger) == null ? void 0 : _window$logger2.sendLog({
+              name: message,
+              data: e
+            });
+          }
+        },
+        load: handleLoad
+      },
+      onprocessfile: () => handleFileChange(),
+      onremovefile: () => handleFileChange(),
+      maxParallelUploads: 3,
+      allowProcess: false,
+      disabled: isReadOnly,
+      allowDownloadByUrl: true,
+      maxFiles: maxFiles,
+      maxFileSize,
+      maxTotalFileSize,
+      // INFO: allowDrop create problem on file type validation       //
+      // (check badge form), for preview image allowDrop: false,      //
+      // labelIdle: "Click Here to Browse File(s)" 					//
+      allowFileTypeValidation: false
+    };
+    const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
+    return /*#__PURE__*/jsx(Box$1, {
+      sx: styles,
+      children: /*#__PURE__*/jsx(FilePond, _extends({
+        ref: filePondRef
+      }, filePondProps, overrideProps))
+    });
+  }, []);
+
+  // TODO: better implementation
   if (isReadOnly) {
     if (formData == undefined) return /*#__PURE__*/jsx(ReadOnlyView, {
       label: schema.title,
       emptyViewText: "No file uploaded"
     });
-    if (isImage) return /*#__PURE__*/jsx(ImageUploadReadOnly, _extends({}, props));
+    return /*#__PURE__*/jsx(ReadOnlyView, {
+      label: schema.title,
+      renderValue: () => FileUpload
+    });
   }
   return /*#__PURE__*/jsxs(FieldContainer, {
     children: [/*#__PURE__*/jsxs(DisableWrapper, {
@@ -17347,7 +17341,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
+        children: FileUpload
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });