aefis-core-ui 2.2.3-rc6 → 2.3.0-rc10

package/dist/index.modern.js

@@ -42,7 +42,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import CircularProgress$1 from '@mui/material/CircularProgress';
 import { useQuery, useInfiniteQuery, useQueryClient, useMutation, QueryClient, QueryClientProvider } from 'react-query';
 import axios from 'axios';
-import _ from 'lodash';
+import _, { merge } from 'lodash';
 import qs from 'query-string';
 import SortIcon from '@mui/icons-material/Sort';
 import { useSnackbar, SnackbarProvider } from 'notistack';
@@ -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"];
@@ -6882,12 +6907,9 @@ const sanitizedEval = (code, context, options) => {
   }
 };
 
+// TODO: move this to a state
 let token = "";
-const apiClient = axios.create({
-  validateStatus: false
-  //baseURL: process.env.NODE_ENV === "development" ? "" : "/ui"
-});
-
+const apiClient = axios.create({});
 const parseQueryParam = url => {
   const hashIndex = url.indexOf("#");
   const noHashExists = hashIndex === -1;
@@ -6934,44 +6956,11 @@ apiClient.interceptors.request.use(config => {
     for (const key in queryParams) {
       queryParams[key] = objectParse(queryParams[key]);
     }
-    config.params = _.merge(queryParams, config.params);
+    config.params = merge(queryParams, config.params);
     config.url = urlOrigin;
   }
   return config;
 });
-const getLoggerErrorMessage = error => {
-  if (error.response) {
-    var _error$response, _error$request, _error$response2, _error$response2$conf, _error$response2$conf2;
-    const status = (_error$response = error.response) == null ? void 0 : _error$response.status;
-    const URL = (_error$request = error.request) == null ? void 0 : _error$request.responseURL;
-    const method = (_error$response2 = error.response) == null ? void 0 : (_error$response2$conf = _error$response2.config) == null ? void 0 : (_error$response2$conf2 = _error$response2$conf.method) == null ? void 0 : _error$response2$conf2.toUpperCase();
-    const message = `RequestError: [${method}] ${status} ${URL}`;
-    return message;
-  } else if (error.request) {
-    return "RequestError: No Response";
-  } else {
-    return `RequestError: ${error.message.toString()}`;
-  }
-};
-
-// Error is formatted to react query and reporting is handled by react-query
-// This prevent re-tried queries to trigger logger request
-const loggerForwardError = promise => (...args) => {
-  return promise(...args).catch(error => {
-    if (window.logger) {
-      var _error$response3, _error$response3$conf, _window$logger;
-      const message = getLoggerErrorMessage(error);
-      const requestBody = ((_error$response3 = error.response) == null ? void 0 : (_error$response3$conf = _error$response3.config) == null ? void 0 : _error$response3$conf.data) || null;
-      (_window$logger = window.logger) == null ? void 0 : _window$logger.logELKEvent == null ? void 0 : _window$logger.logELKEvent({
-        name: message,
-        data: requestBody
-      });
-      throw message;
-    } else {
-      throw error;
-    }
-  });
-};
 function download(url) {
   apiClient.request({
     url: url,
@@ -6992,33 +6981,32 @@ function download(url) {
     link.remove();
   });
 }
-function get() {
-  let args = [...arguments];
-  if (args[0].includes("http://gateway") || args[0].includes("https://gateway")) {
-    args[1]["headers"] = {
-      Authorization: "Bearer " + token
-    };
-  }
-  return apiClient.get(...args);
+function get(endPoint, config = {}) {
+  const isGateway = endPoint.includes("http://gateway") || endPoint.includes("https://gateway");
+  return apiClient.get(endPoint, _extends({}, config, {
+    headers: _extends({}, config.headers, isGateway && {
+      Authorization: `Bearer ${token}`
+    })
+  }));
 }
-function post() {
-  return apiClient.post(...arguments);
+function post(...args) {
+  return apiClient.post(...args);
 }
-function put() {
-  return apiClient.put(...arguments);
+function put(...args) {
+  return apiClient.put(...args);
 }
-function destroy() {
-  return apiClient.destroy(...arguments);
+function destroy(...args) {
+  return apiClient.delete(...args);
 }
 async function setUserToken(t) {
   token = t;
 }
 var http = {
-  get: loggerForwardError(get),
-  post: loggerForwardError(post),
-  put: loggerForwardError(put),
-  download: loggerForwardError(download),
-  delete: loggerForwardError(destroy),
+  get,
+  post,
+  put,
+  download,
+  delete: destroy,
   setUserToken
 };
 
@@ -7200,6 +7188,23 @@ let dataSourceConfiguration = {
   }
 };
 
+// TODO: move this function to logger
+const getLoggerErrorMessage = error => {
+  if (!error.isAxiosError) return (error == null ? void 0 : error.toString()) || "Undefined error";
+  if (error.response) {
+    var _error$response, _error$request, _error$response2, _error$response2$conf, _error$response2$conf2;
+    const status = (_error$response = error.response) == null ? void 0 : _error$response.status;
+    const URL = (_error$request = error.request) == null ? void 0 : _error$request.responseURL;
+    const method = (_error$response2 = error.response) == null ? void 0 : (_error$response2$conf = _error$response2.config) == null ? void 0 : (_error$response2$conf2 = _error$response2$conf.method) == null ? void 0 : _error$response2$conf2.toUpperCase();
+    const message = `RequestError: [${method}] ${status} ${URL}`;
+    return message;
+  } else if (error.request) {
+    return "RequestError: No Response";
+  } else {
+    return `RequestError: ${error.message.toString()}`;
+  }
+};
+
 /**
  * wraps function and reports (fire request) to Logger
  * @param {function} onError
@@ -7208,11 +7213,29 @@ let dataSourceConfiguration = {
 const logger = onError => (error, ...rest) => {
   var _window$logger;
   onError == null ? void 0 : onError(error, ...rest);
-  const event = {
-    name: (error == null ? void 0 : error.toString()) || "Undefined error"
-  };
-  (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog == null ? void 0 : _window$logger.sendLog(event);
+  (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
+    name: getLoggerErrorMessage(error),
+    data: error
+  });
 };
+
+/**
+ * Promisify fetch, this is required for useQuery to handle error properly.
+ * @param {Promise} fetch
+ * @returns Promise
+ */
+const promisifyRequest = fetch => (...args) => new Promise(async (resolve, reject) => {
+  try {
+    const res = await fetch(...args);
+    resolve(res);
+  } catch (error) {
+    var _window$logger2;
+    reject(error);
+    (_window$logger2 = window.logger) == null ? void 0 : _window$logger2.logEvent({
+      name: getLoggerErrorMessage(error)
+    });
+  }
+});
 const getGenericBusinessObjectAction = source => {
   var typeAction = source.split("_");
   return typeAction.length === 2 ? `businessObject_${typeAction[1]}` : source;
@@ -7368,7 +7391,7 @@ const useDataSourceQuery = (dataSource, parameters, options, templateContext) =>
     return runQuery(dataSource, parameters, templateContext);
   };
   const fetchStrategy = configuration && typeof configuration.endPoint === "function" ? configuration.endPoint : fetch;
-  return useQuery([dataSource, parameters], fetchStrategy, _extends({}, (configuration == null ? void 0 : configuration.options) || {}, options, {
+  return useQuery([dataSource, parameters], promisifyRequest(fetchStrategy), _extends({}, (configuration == null ? void 0 : configuration.options) || {}, options, {
     onError: logger(options == null ? void 0 : options.onError)
   }));
 };
@@ -7391,12 +7414,11 @@ const useDataSourceInfiniteQuery = (dataSource, parameters, initialParameters, o
   const configuration = getConfiguration(dataSource);
   const fetch = ({
     pageParam: _pageParam = initialParameters
-  }) => {
-    return runQuery(dataSource, _extends({}, parameters, _pageParam));
-  };
+  }) => runQuery(dataSource, _extends({}, parameters, _pageParam));
   const fetchStrategy = configuration && typeof configuration.endPoint === "function" ? configuration.endPoint : fetch;
-  return useInfiniteQuery([dataSource, parameters], fetchStrategy, _extends({}, configuration ? configuration.options : {}, options, {
-    onError: logger(options == null ? void 0 : options.onError)
+  return useInfiniteQuery([dataSource, parameters], promisifyRequest(fetchStrategy), _extends({}, configuration ? configuration.options : {}, options, {
+    onError: logger(options == null ? void 0 : options.onError),
+    retry: false
   }));
 };
 
@@ -7415,7 +7437,6 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
   var _mutationOptions;
   const queryClient = useQueryClient();
   const configuration = getConfiguration(dataSource);
-  getEndpoint(dataSource, configuration);
   const invalidateFunction = () => {
     if (invalidateQueries) {
       for (let q of invalidateQueries) {
@@ -7442,11 +7463,11 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
     };
   }
   function requestCall(requestBody) {
-    const request = axios[httpMethodType];
+    const request = http[httpMethodType];
     const endPoint = getEndpoint(dataSource, configuration); //?
     if (httpMethodType === "get" || httpMethodType === "delete") {
       // INFO (Caveat!): requestBody is used as query param in case of
-      // httpMethodType is get or delete
+      // httpMethodType is GET or DELETE
       const params = _extends({}, baseParameters, requestBody);
       return request(endPoint, {
         params
@@ -7454,7 +7475,7 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
     }
     return request(endPoint, requestBody);
   }
-  return useMutation(requestCall, _extends({}, mutationOptions, {
+  return useMutation(promisifyRequest(requestCall), _extends({}, mutationOptions, {
     onError: logger((_mutationOptions = mutationOptions) == null ? void 0 : _mutationOptions.onError)
   }));
 };
@@ -7663,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 => {
@@ -8100,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,
@@ -8115,7 +8074,7 @@ const FilterChips = ({
             displayOptions: {
               hasIcon: filter.type !== "keyword"
             },
-            type: "businessObject",
+            type: filter.type || "businessObject",
             template: filter.template,
             data: filter.data,
             onDelete: () => {
@@ -8126,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", {
@@ -8364,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)) || [];
 
@@ -8382,7 +8375,7 @@ const FilterPanel = props => {
     searchTooltip,
     searchPlaceHolderText,
     configuration,
-    filters: filtersProp,
+    filters: filtersProp = [],
     displayType,
     limitTags,
     bottomGutter,
@@ -8392,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(() => {
@@ -8425,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) {
@@ -8464,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);
@@ -10753,7 +10686,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       exportOptions: props.exportOptions,
       actions: props.actions && props.actions.length > 0 || props.addAction ? updateActions(props.actions, handleDrawerOpen, enableTableRowAction, selectedRowCount, Add) : undefined,
       onFilterClick: isFilterPanelEnabled ? handleFilterClick : undefined,
-      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0 || filterPanelState.searchText,
+      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0 || !!filterPanelState.searchText,
       disableFilterButton: isFetching
     }, props.titleAndActionHeaderProps)), /*#__PURE__*/jsx(DataTable, _extends({}, props, {
       tableRef: DataTableRef,
@@ -16658,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 => {
@@ -17161,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, {
@@ -17215,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,
@@ -17224,106 +17129,202 @@ 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,
     type: (message == null ? void 0 : message.type) || "info",
     canDismiss: (message == null ? void 0 : message.canDismiss) || true
   };
-  const filePondProps = {
-    acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
-    files,
-    allowMultiple: false,
-    server: {
-      url: uploadUrl,
-      process: {
-        method: "POST",
-        headers: {
-          Methods: "POST"
-        },
-        onload: handleUploadResponse
+  const {
+    error
+  } = useNotify();
+  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, {
@@ -17340,7 +17341,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
+        children: FileUpload
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });