aefis-core-ui 2.3.0-rc13 → 2.3.0-rc15

package/dist/index.modern.js

@@ -10,6 +10,7 @@ import { red, orange, green, blue, grey, yellow, indigo, purple, cyan, teal, lim
 import makeStyles$1 from '@mui/styles/makeStyles';
 import withStyles from '@mui/styles/withStyles';
 import { useTheme, alpha, createTheme as createTheme$1, ThemeProvider, styled as styled$1, StyledEngineProvider } from '@mui/material/styles';
+import { useFormControl } from '@mui/material/FormControl';
 import mustache from 'mustache';
 import { Box as Box$2 } from '@mui/system';
 import { Skeleton as Skeleton$4, TextField as TextField$1, Box as Box$3 } from '@mui/material/';
@@ -66,18 +67,11 @@ import Nouislider from 'nouislider-react';
 import 'lodash/camelCase';
 import debounce from 'lodash/debounce';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import '@mui/icons-material/MoreVert';
-import produce from 'immer';
-import { v4 } from 'uuid';
 import { MuiForm5 } from '@rjsf/material-ui';
 import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
 import Chip$2 from '@mui/material/Chip';
 import TextField$2 from '@mui/material/TextField';
-import { useFormControl } from '@mui/material/FormControl';
 import get$1 from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import ToggleButton$1 from '@mui/material/ToggleButton';
@@ -90,7 +84,6 @@ 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';
 
@@ -1692,12 +1685,12 @@ const LegacyButtonTheme = createTheme(theme, {
   }
 });
 
-const _excluded$m = ["name"];
+const _excluded$k = ["name"];
 const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
   let {
       name
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   const isColorDefault = props.color === undefined || props.color === "default";
   const colorThemeName = isColorDefault ? "grey" : props.color;
   const theme = useTheme$1();
@@ -1790,7 +1783,7 @@ AnimatedExpandMoreIcon.propTypes = {
   sx: PropTypes.any
 };
 
-const _excluded$l = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
+const _excluded$j = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
 const AefisButton = withStyles$1({
   root: {
     "&:focus": {
@@ -1812,7 +1805,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
       onClick,
       link
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = (event, link, buttonId) => {
     setAnchorEl(event.currentTarget);
@@ -1912,12 +1905,7 @@ MenuButton.propTypes = {
   /** Button variant */
   variant: PropTypes.oneOf(["contained", "outlined", "text"]),
   /** The type of the button */
-  menuConfiguration: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    icon: PropTypes.any,
-    divider: PropTypes.any,
-    onClick: PropTypes.function
-  })),
+  menuConfiguration: PropTypes.array,
   /** The function to execute when the button is clicked. */
   onClick: PropTypes.func
 };
@@ -1962,23 +1950,30 @@ const useStyles$F = makeStyles(theme => ({
 }));
 const titleProps = {
   color: "textPrimary",
-  variant: "h6",
+  variant: "h3",
   style: {
-    fontSize: "1.1rem",
+    fontSize: "1.2rem",
     fontWeight: 500,
-    lineHeight: 1.43,
-    letterSpacing: "0.01071em"
+    lineHeight: 1.3,
+    letterSpacing: 0.5,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }
 };
 const subtitleProps = {
   color: "textSecondary",
-  variant: "body1",
   style: {
-    fontSize: "0.775rem",
-    fontWeight: "bolder",
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: 1.4,
+    letterSpacing: 0,
     display: "inline-flex",
     verticalAlign: "middle",
-    alignItems: "center"
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   }
 };
 const getGradientBackgroundColorArray = arrayIndex => {
@@ -2006,20 +2001,6 @@ 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,
@@ -2038,7 +2019,7 @@ const ContentBox = props => {
   }
   if (typeof props.subtitle !== "string" && props.subtitle !== undefined) {
     headerProps.title = /*#__PURE__*/jsx(Typography, {
-      variant: "h6",
+      variant: "h3",
       component: props.titleComponent,
       style: titleProps.style,
       display: "block",
@@ -2049,13 +2030,13 @@ const ContentBox = props => {
     headerProps.subheader = props.subtitle;
   }
   if (props.titleBadge) {
-    headerProps.title = /*#__PURE__*/jsx(Box$1, {
+    headerProps.title = /*#__PURE__*/jsx("div", {
       children: /*#__PURE__*/jsx(StyledBadge$1, {
         badgeContent: props.titleBadge,
         invisible: invisible,
         color: "secondary",
         children: /*#__PURE__*/jsx(Typography, {
-          variant: "h6",
+          variant: "h3",
           component: props.titleComponent,
           style: titleProps.style,
           display: "block",
@@ -2076,13 +2057,12 @@ const ContentBox = props => {
         variant: "body1",
         component: "span",
         noWrap: true,
-        color: "textSecondary",
+        sx: {
+          color: "text.secondary"
+        },
         style: {
-          fontSize: "0.775rem",
-          fontWeight: "bolder",
-          display: "inline-flex",
-          verticalAlign: "middle",
-          alignItems: "center"
+          fontSize: "0.875rem",
+          letterSpacing: 0
         },
         children: props.subtitle
       });
@@ -2094,7 +2074,6 @@ 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") {
@@ -2112,7 +2091,7 @@ const ContentBox = props => {
   return /*#__PURE__*/jsxs(Box$1, {
     sx: props.sx,
     style: props.containerStyle,
-    children: [props.header && /*#__PURE__*/jsx(Box$1, {
+    children: [props.header && /*#__PURE__*/jsx("div", {
       className: classes.sectionHeader,
       children: /*#__PURE__*/jsx(Typography, {
         variant: "h6",
@@ -2122,7 +2101,7 @@ const ContentBox = props => {
     }), /*#__PURE__*/jsxs(Card, {
       style: cardStyle,
       className: tag.tag,
-      children: [useHeaderImage && /*#__PURE__*/jsx(Box$1, {
+      children: [useHeaderImage && /*#__PURE__*/jsx("div", {
         style: imageDivStyle,
         className: classes.imageContainer,
         title: props.title,
@@ -2134,10 +2113,6 @@ const ContentBox = props => {
         image: props.image
       }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps)), props.formatContent && /*#__PURE__*/jsx(CardContent, {
         className: !props.title ? classes.cardContentWithoutTitle : classes.cardContent,
-        sx: !props.children && !props.description ? {
-          display: "none",
-          visibility: "hidden"
-        } : undefined,
         children: /*#__PURE__*/jsxs(React.Fragment, {
           children: [props.description && /*#__PURE__*/jsx(Typography, {
             variant: "body2",
@@ -2172,9 +2147,7 @@ ContentBox.defaultProps = {
   imageHeight: 150,
   hasGutter: true,
   imageBackgroundColor: "transparent",
-  titleComponent: "div",
-  wrapTitle: false,
-  wrapSubtitle: false
+  titleComponent: "div"
 };
 ContentBox.propTypes = {
   /** Content of the content box */
@@ -2189,10 +2162,6 @@ 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. */
@@ -2280,10 +2249,10 @@ ClickWrapper.propTypes = {
 const Chip = ({
   id,
   colorPalette,
-  size,
+  size: _size2 = "medium",
   icon,
   label,
-  displayType,
+  displayType: _displayType = "default",
   deleteIcon,
   onDelete,
   canDelete,
@@ -2291,7 +2260,7 @@ const Chip = ({
 }) => {
   const keyValue = useUID();
   const colors = _extends({}, defaultColorPalette, colorPalette);
-  const _size = size === "medium" || size === "large" ? "medium" : size;
+  const _size = _size2 === "medium" || _size2 === "large" ? "medium" : _size2;
   const styles = {
     outlined: {
       borderWidth: 2,
@@ -2311,14 +2280,14 @@ const Chip = ({
     }
   };
   let chipStyles = styles.chip;
-  if (displayType === "outlined") chipStyles = styles.outlined;
-  if (displayType === "withOutline") chipStyles = styles.withOutline;
+  if (_displayType === "outlined") chipStyles = styles.outlined;
+  if (_displayType === "withOutline") chipStyles = styles.withOutline;
   const chipProps = {
     key: id || keyValue,
     icon,
     label,
     sx: chipStyles,
-    variant: displayType === "withOutline" ? "default" : displayType,
+    variant: _displayType === "withOutline" ? "default" : _displayType,
     size: _size,
     deleteIcon: deleteIcon || /*#__PURE__*/jsx(ClickWrapper, {
       label: label,
@@ -2335,12 +2304,21 @@ const Chip = ({
       })
     })
   };
-  const Chip = () => /*#__PURE__*/jsx(Chip$1, _extends({
-    role: role || "presentation",
-    "aria-label": label
-  }, chipProps, canDelete && {
-    onDelete
-  }));
+
+  // TODO: create FormChip (or similar) and use contextful version there. Pure
+  // and Contextful component should be seperated
+  const formControl = useFormControl();
+  const _canDelete = canDelete && !(formControl != null && formControl.disabled);
+  const Chip = () => {
+    return /*#__PURE__*/jsx(Chip$1, _extends({
+      role: role || "presentation",
+      "aria-label": label
+    }, chipProps, _canDelete && {
+      onDelete
+    }, {
+      disabled: formControl == null ? void 0 : formControl.disabled
+    }));
+  };
 
   /**return tooltipText ? (
   	<Tooltip title={tooltipText}>
@@ -2380,12 +2358,6 @@ Chip.propTypes = {
   /** ARIA Role attribute */
   role: PropTypes.string
 };
-Chip.defaultProps = {
-  size: "medium",
-  variant: "default",
-  canRemove: false,
-  displayType: "default"
-};
 
 const colorPalette$v = {
   light: grey[200],
@@ -3463,7 +3435,7 @@ CardSectionTitle$1.propTypes = {
   title: PropTypes.string
 };
 
-const _excluded$k = ["title", "children", "height", "titleComponent"];
+const _excluded$i = ["title", "children", "height", "titleComponent"];
 const CardSection$1 = _ref => {
   let {
       title,
@@ -3471,7 +3443,7 @@ const CardSection$1 = _ref => {
       height,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/jsxs(Box$1, _extends({
     sx: {
       height: height || "inherit"
@@ -3571,7 +3543,7 @@ SvgImage.propTypes = {
   width: PropTypes.any
 };
 
-const _excluded$j = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
+const _excluded$h = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
   _excluded2$1 = ["src", "extension"];
 const RenderImage = _ref => {
   let {
@@ -3583,7 +3555,7 @@ const RenderImage = _ref => {
       showSkeleton,
       fallbackImage
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const altText = decorative ? "" : description;
   const role = decorative ? "presentation" : "img";
   const hidden = !!decorative;
@@ -3661,7 +3633,7 @@ Image.propTypes = {
   extension: PropTypes.string
 };
 
-const _excluded$i = ["type"];
+const _excluded$g = ["type"];
 const imageProps = {
   award: Award,
   building: Building,
@@ -3687,7 +3659,7 @@ const IsometricImage = _ref => {
   let {
       type
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   const image = getIsometricImage(type);
   return /*#__PURE__*/jsx(Image, _extends({
     src: image
@@ -4370,9 +4342,6 @@ 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,
@@ -4406,10 +4375,7 @@ RenderCard.propTypes = {
   avatarIconColor: PropTypes.string,
   gradientColorHeaderImageId: PropTypes.any,
   autoTruncateDescription: PropTypes.bool,
-  avatar: PropTypes.any,
-  cardStyle: PropTypes.any,
-  containerStyle: PropTypes.any,
-  sx: PropTypes.object
+  avatar: PropTypes.any
 };
 const BusinessObjectCard = props => {
   return props.displayType === "skeleton" ? /*#__PURE__*/jsx(RenderSkeleton, {
@@ -4454,22 +4420,16 @@ 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,
-  /** 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
+  autoTruncateDescription: PropTypes.bool
 };
 
-const _excluded$h = ["enableScrollTop", "containerProps"];
+const _excluded$f = ["enableScrollTop", "containerProps"];
 const SwipeableViews = _ref => {
   let {
       enableScrollTop = true,
       containerProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   const containerRef = containerProps.ref || useRef();
   useEffect(() => {
     if (enableScrollTop) {
@@ -5108,7 +5068,7 @@ SectionTitle.propTypes = {
   component: PropTypes.string
 };
 
-const _excluded$g = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
+const _excluded$e = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
 const Section = _ref => {
   let {
       title,
@@ -5119,7 +5079,7 @@ const Section = _ref => {
       renderList,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const containerStyle = {
     boxSizing: "border-box",
     width: "100%",
@@ -5756,7 +5716,7 @@ FullPageViewer.propTypes = {
   onMessage: PropTypes.func
 };
 
-const _excluded$f = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
+const _excluded$d = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
 const useStyles$w = makeStyles(() => ({
   scroller: {
     position: "relative",
@@ -5829,7 +5789,7 @@ const ScrollingContainer = _ref => {
       onScrollReachStart,
       onScrollReachEnd
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const classes = useStyles$w();
   const [scrolled, setScrolled] = useState(false);
   const rootStyle = {
@@ -7580,7 +7540,7 @@ var dataSourceManager = {
   getDataSourceUrl: getDataSourceUrl
 };
 
-const _excluded$e = ["clearOnChange", "minimumLength"];
+const _excluded$c = ["clearOnChange", "minimumLength"];
 const WAIT_INTERVAL = 1000;
 const ENTER_KEY = 13;
 const TextSearch$1 = _ref => {
@@ -7588,7 +7548,7 @@ const TextSearch$1 = _ref => {
       clearOnChange,
       minimumLength
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const [value, setValue] = useState("");
   const [timer, setTimer] = useState(null);
   const handleChange = e => {
@@ -7623,13 +7583,13 @@ const TextSearch$1 = _ref => {
     value: value,
     onKeyDown: handleKeyDown,
     placeholder: props.placeholder,
-    sx: _extends({
+    sx: {
       input: {
         "&::placeholder": {
           opacity: 0.7
         }
       }
-    }, props.sx)
+    }
   }, props, {
     inputProps: _extends({}, props.inputProps, {
       "aria-label": props.placeholder
@@ -7717,7 +7677,7 @@ const mapFilters = newFilters => {
   return mappedFilters;
 };
 
-const _excluded$d = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
+const _excluded$b = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
 const useMenuItemStyles = makeStyles(theme => ({
   root: props => ({
     backgroundColor: props.open ? theme.palette.action.hover : "rgba(0,0,0,0)"
@@ -7738,7 +7698,7 @@ const NestedMenuItem = /*#__PURE__*/React.forwardRef(function NestedMenuItem(pro
       tabIndex: tabIndexProp,
       ContainerProps: ContainerPropsProp = {}
     } = props,
-    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$d);
+    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$b);
   const {
       ref: containerRefProp
     } = ContainerPropsProp,
@@ -9000,12 +8960,12 @@ Actions.propTypes = {
   onAction: PropTypes.func
 };
 
-const _excluded$c = ["hasFilters"];
+const _excluded$a = ["hasFilters"];
 const RenderFilterButton = /*#__PURE__*/React.forwardRef(function RenderFilterButton(_ref, ref) {
   let {
       hasFilters
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsx(IconButton$1, _extends({}, props, {
     ref: ref,
     children: /*#__PURE__*/jsx(Badge, {
@@ -9098,7 +9058,7 @@ DefaultIconButton.propTypes = {
   onClick: PropTypes.func
 };
 
-const _excluded$b = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$9 = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$m = makeStyles(theme => ({
   operations: {
     display: "flex",
@@ -9170,7 +9130,7 @@ const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   const {
     id,
     disabled,
@@ -9226,7 +9186,7 @@ const renderUserDefinedFilters = ({
   index: index
 }, `user-defined-filters-${index}`));
 
-const _excluded$a = ["filterSet", "onClick", "disableSetDefault", "index"];
+const _excluded$8 = ["filterSet", "onClick", "disableSetDefault", "index"];
 const useStyles$l = makeStyles(() => ({
   operations: {
     display: "flex",
@@ -9268,7 +9228,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const {
     id,
     disabled,
@@ -10422,7 +10382,7 @@ const getInfoTextByFilterAndSortingCount = (filterCount, sortCount) => {
   return `${appliedText} applied to the data`;
 };
 
-const _excluded$9 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
+const _excluded$7 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
 const useDidMount = () => {
   const didMountRef = useRef(false);
   useEffect(() => {
@@ -10537,7 +10497,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       hasNextPage,
       refetch
     } = _useDataSourceInfinit;
-    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$9);
+    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$7);
   const isError = useIsError(status);
   const renderReTryButton = useCallback(status => /*#__PURE__*/jsx(Button, {
     onClick: () => refetch(),
@@ -10704,7 +10664,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,
@@ -10919,7 +10879,7 @@ const {
   withEvent: withBOPEvent
 } = createComponentEvent();
 
-const _excluded$8 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
+const _excluded$6 = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
 const useDialogOpenEventListener$1 = cb => useBOPEventlistener(event => {
   if (event.name === events.OPEN_ENHANCED_SEARCH_DIALOG) cb(event.payload);
 });
@@ -10933,7 +10893,7 @@ const EnhancedSearchDialog = _ref => {
       dataSource,
       confirmButtonText
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const [selection, setSelection] = useState([]);
   const [open, setOpen] = useState(false);
   useDialogOpenEventListener$1(isOpen => setOpen(isOpen));
@@ -11050,7 +11010,7 @@ const useDependencyChange = (callback, currentState) => {
   }
 };
 
-const _excluded$7 = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll", "renderAddItemForm", "AddItemFormModalComponent", "autoCompleteProps", "preventHorizontalExpand"];
+const _excluded$5 = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll", "renderAddItemForm", "AddItemFormModalComponent", "autoCompleteProps"];
 const useStyles$f = makeStyles(theme => ({
   menu: {
     textDecoration: "none",
@@ -11112,10 +11072,9 @@ const BusinessObjectPicker = _ref => {
       enableInfinteScroll,
       renderAddItemForm,
       AddItemFormModalComponent,
-      autoCompleteProps = {},
-      preventHorizontalExpand = false
+      autoCompleteProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const classes = useStyles$f();
   // TODO: implement controlled behaviour
   const [value, setValue] = useAutoCompleteValue(props.value, multiple);
@@ -11318,7 +11277,8 @@ const BusinessObjectPicker = _ref => {
       tooltipText: option.description,
       size: props.size === "medium" || props.size === "small" ? "small" : "large",
       onDelete: () => handleTagDelete(option),
-      canDelete: true
+      canDelete: true,
+      displayType: "default"
     })
   }, getKey(option))), [props.size, getKey, getLabel, handleTagDelete]);
   const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
@@ -11367,7 +11327,11 @@ const BusinessObjectPicker = _ref => {
         value: value,
         renderOption: renderOptionProp || (props.type ? renderBusinessObject : renderOption),
         noOptionsText: status === "error" ? "Error loading options" : "No options",
-        getOptionDisabled: optionItem => (optionItem == null ? void 0 : optionItem.__type) === "loadMore" || (optionItem == null ? void 0 : optionItem.__type) === "noOption",
+        getOptionDisabled: optionItem => {
+          if (props.disabled) return true;
+          const type = optionItem == null ? void 0 : optionItem.__type;
+          return type === "loadMore" || type === "noOption";
+        },
         handleHomeEndKeys: true
         // INFO: freeSolo prevents warning:
         // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid
@@ -11377,11 +11341,6 @@ const BusinessObjectPicker = _ref => {
         selectOnFocus: false,
         renderTags: renderTags || (props.type ? renderTypeTags : renderCustomTags),
         renderInput: params => /*#__PURE__*/jsx(TextSearch$1, _extends({}, params, props, {
-          sx: _extends({}, preventHorizontalExpand && {
-            "&>div.MuiInputBase-root": {
-              flexWrap: "nowrap !important"
-            }
-          }),
           type: "text",
           inputProps: _extends({}, params.inputProps, {
             "data-testid": "content-input"
@@ -11400,7 +11359,7 @@ const BusinessObjectPicker = _ref => {
                 style: {
                   color: red[500]
                 }
-              }), listSelect !== true && /*#__PURE__*/jsx(IconButton$1, {
+              }), listSelect !== true && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": open ? `hide options` : "show options",
                 size: "small",
                 onClick: () => {
@@ -11413,7 +11372,7 @@ const BusinessObjectPicker = _ref => {
                     [classes.expandOpen]: open
                   })
                 })
-              }), enhancedSearch && /*#__PURE__*/jsx(IconButton$1, {
+              }), enhancedSearch && /*#__PURE__*/jsx(IconButton, {
                 "aria-label": "search",
                 size: "small",
                 onKeyDown: handleKeyDown,
@@ -11421,6 +11380,7 @@ const BusinessObjectPicker = _ref => {
                   name: events.OPEN_ENHANCED_SEARCH_DIALOG,
                   payload: true
                 }),
+                disabled: props.disabled,
                 children: /*#__PURE__*/jsx(Search, {})
               })]
             })
@@ -11443,13 +11403,14 @@ const BusinessObjectPicker = _ref => {
         flexDirection: "column",
         padding: 1
       },
-      children: /*#__PURE__*/jsx(IconButton$1, {
+      children: /*#__PURE__*/jsx(IconButton, {
         onClick: () => {
           eventDispatch({
             name: events.OPEN_ADD_ITEM_DIALOG,
             payload: true
           });
         },
+        disabled: props.disabled,
         children: /*#__PURE__*/jsx(AddIcon, {
           sx: {
             color: "grey"
@@ -11549,9 +11510,7 @@ BusinessObjectPicker.propTypes = {
   /** render prop to handle form content, render function provided onSubmit callback function	 */
   renderAddItemForm: PropTypes.func,
   /** override props of MUI's AutoComplete components */
-  autoCompleteProps: PropTypes.object,
-  /** preventHorizontalExpand */
-  preventHorizontalExpand: PropTypes.bool
+  autoCompleteProps: PropTypes.object
 };
 BusinessObjectPicker.defaultProps = {
   multiple: false,
@@ -12513,7 +12472,7 @@ CurriculumChart.propTypes = {
   onLoad: PropTypes.func
 };
 
-const _excluded$6 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
+const _excluded$4 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
 const MuiDatePicker = props => {
   const isMobile = useMediaQuery$1(theme => theme.breakpoints.down("md"));
   if (props.type) {
@@ -12553,7 +12512,7 @@ const DatePickerBase = _ref => {
       maximumDate,
       inputEndAdornmentText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const [value, setValue] = useFormItemState(propsValue, isControlled);
   const handleChange = newValue => {
     !isControlled && setValue(newValue);
@@ -15249,485 +15208,6 @@ RubricDistributionChart.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "h4", "div", "p"])
 };
 
-const _excluded$5 = ["rules"];
-const FieldWrapper = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx(Box$1, {
-    sx: {
-      paddingTop: 1,
-      overflow: "auto"
-    },
-    children: children
-  });
-};
-const TemplateField = ({
-  templateSelectionCode,
-  templateOptions,
-  templateInputMap,
-  onChange
-}) => {
-  const data = useMemo(() => templateOptions.map(({
-    label,
-    code: value
-  }) => ({
-    label,
-    value
-  }), [templateOptions]));
-  const value = useMemo(() => {
-    if (!templateSelectionCode) return undefined;
-    return {
-      value: templateSelectionCode,
-      label: templateInputMap[templateSelectionCode].label
-    };
-  }, [templateSelectionCode]);
-  return /*#__PURE__*/jsx(BusinessObjectPicker$1, {
-    multiple: false,
-    data: data,
-    value: value,
-    onChange: onChange,
-    optionTemplate: "{{label}}",
-    preventHorizontalExpand: true
-  });
-};
-function Row({
-  groupId,
-  index,
-  ruleId,
-  ruleIndex,
-  name: templateSelectionCode,
-  // template selection
-  value: ruleValue,
-  // rule value
-  template: ruleTemplate,
-  onRuleDelete,
-  onTemplateSelect,
-  onTemplateValueChange,
-  templateInputMap,
-  templateOptions
-}) {
-  const handleChange = useDebounceCallback((value, template) => {
-    onTemplateValueChange({
-      value,
-      template,
-      // TODO: send these as 2nd argument
-      groupId,
-      ruleId
-      // TODO: fix index and ruleIndex lot of re-rendering
-      // index,
-      // ruleIndex
-    });
-  });
-
-  const templateValueField = useMemo(() => {
-    if (!templateSelectionCode) return null;
-    const TemplateInputField = templateInputMap[templateSelectionCode].component;
-    return /*#__PURE__*/jsx(TemplateInputField, {
-      value: ruleValue,
-      template: ruleTemplate
-      // TODO:  add debouncer
-      ,
-      onChange: handleChange
-    });
-
-    // TODO: take out index from here together with onChange handler
-    // index, ruleIndex,
-  }, [groupId, ruleId, templateSelectionCode, ruleValue, ruleTemplate]);
-  return /*#__PURE__*/jsxs(Box$1, {
-    sx: {
-      display: "flex",
-      flexWrap: "no-wrap",
-      paddingTop: 1
-    },
-    children: [/*#__PURE__*/jsxs(Grid, {
-      sx: {
-        flex: 1,
-        backgroundColor: "#f9f9f9",
-        marginLeft: 1,
-        paddingTop: 1,
-        paddingLeft: 2,
-        paddingBottom: 1,
-        paddingRight: 2,
-        borderRadius: "8px",
-        marginBottom: "4px"
-      } // this is for grow
-      ,
-      container: true,
-      rowSpacing: 0.5,
-      columnSpacing: 2,
-      direction: "row",
-      children: [/*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 4,
-        style: {
-          paddingLeft: 0
-        },
-        children: /*#__PURE__*/jsx(FieldWrapper, {
-          children: /*#__PURE__*/jsx(TemplateField, {
-            templateSelectionCode: templateSelectionCode,
-            templateInputMap: templateInputMap,
-            templateOptions: templateOptions,
-            onChange: valueFieldCode => {
-              onTemplateSelect({
-                templateCode: (valueFieldCode == null ? void 0 : valueFieldCode.value) || null,
-                groupId,
-                ruleId,
-                index,
-                ruleIndex
-              });
-            }
-          })
-        })
-      }), /*#__PURE__*/jsx(Grid, {
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 8,
-        children: /*#__PURE__*/jsx(FieldWrapper, {
-          children: templateValueField
-        })
-      })]
-    }), /*#__PURE__*/jsx(Box$1, {
-      sx: {
-        width: "48px",
-        marginTop: "22px"
-      },
-      children: /*#__PURE__*/jsx(MenuButton, {
-        displayType: "icon",
-        menuConfiguration: [{
-          name: "Move Up",
-          icon: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}),
-          onClick: () => {}
-        }, {
-          name: "Move Down",
-          icon: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {}),
-          onClick: () => {}
-        }, {
-          name: "Add Rule Below",
-          icon: /*#__PURE__*/jsx(AddIcon, {}),
-          onClick: () => {}
-        }, {
-          name: "Delete",
-          icon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
-          onClick: () => {
-            onRuleDelete({
-              ruleId,
-              index,
-              ruleIndex,
-              groupId
-            });
-          }
-        }]
-      })
-    })]
-  });
-}
-const RuleGroup = /*#__PURE__*/memo(_ref => {
-  let {
-      rules
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return /*#__PURE__*/jsx(Box$1, {
-    sx: {
-      paddingBottom: 1
-    },
-    children: rules.map(({
-      id,
-      name,
-      value,
-      template
-    }, ruleIndex) => /*#__PURE__*/jsx(Row, _extends({
-      name: name,
-      value: value,
-      template: template,
-      ruleIndex: ruleIndex,
-      ruleId: id
-    }, rest), id))
-  });
-});
-
-const RuleGroupFooter = /*#__PURE__*/memo(({
-  groupId,
-  onGroupDelete,
-  onRuleAdd
-}) => /*#__PURE__*/jsx(Box$1, {
-  sx: {
-    display: "flex",
-    justifyContent: "end",
-    marginRight: 6
-  },
-  children: /*#__PURE__*/jsxs(Box$1, {
-    sx: {
-      display: "flex",
-      flexDirection: "row"
-    },
-    children: [/*#__PURE__*/jsx(Button
-    // onClick={onGroupDelete}
-    , {
-      onClick: () => onGroupDelete({
-        groupId
-      }),
-      startIcon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
-      children: "Delete Group"
-    }), /*#__PURE__*/jsx(Button, {
-      onClick: () => onRuleAdd({
-        groupId
-      })
-      // onClick={onRuleAdd}
-      ,
-      startIcon: /*#__PURE__*/jsx(AddIcon, {}),
-      children: "Add Rule"
-    })]
-  })
-}));
-
-const BuilderHeader = /*#__PURE__*/memo(({
-  onAdd,
-  children
-}) => /*#__PURE__*/jsxs(Box$1, {
-  sx: {
-    display: "flex"
-  },
-  children: [/*#__PURE__*/jsx(Box$1, {
-    sx: {
-      flex: 1
-    },
-    children: children
-  }), /*#__PURE__*/jsx(Box$1, {
-    sx: {
-      display: "flex",
-      justifyContent: "end",
-      paddingBottom: 1
-    },
-    children: /*#__PURE__*/jsx(Button, {
-      startIcon: /*#__PURE__*/jsx(AddIcon, {}),
-      onClick: onAdd,
-      children: "Add Group"
-    })
-  })]
-}));
-
-const RuleGroupIndex = /*#__PURE__*/memo(({
-  onMovePosition,
-  groupId,
-  index,
-  isFirst,
-  isLast
-}) => /*#__PURE__*/jsx(Box$1, {
-  sx: {
-    width: "40px",
-    height: "88px"
-  },
-  children: /*#__PURE__*/jsxs(Box$1, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      position: "relative",
-      top: "0px",
-      width: "20px"
-    },
-    children: [/*#__PURE__*/jsx(IconButton$1, {
-      sx: {
-        visibility: isFirst ? "hidden" : "none"
-      },
-      "aria-label": "move up",
-      onClick: () => onMovePosition({
-        groupId,
-        index
-      }, true),
-      children: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {
-        sx: {
-          color: "grey"
-        }
-      })
-    }), /*#__PURE__*/jsx(Typography, {
-      variant: "body1",
-      color: "#727373",
-      sx: {
-        fontWeight: "500"
-      },
-      children: index + 1
-    }), /*#__PURE__*/jsx(IconButton$1, {
-      "aria-label": "move down",
-      sx: {
-        visibility: isLast ? "hidden" : "none"
-      },
-      onClick: () => onMovePosition({
-        groupId,
-        index
-      }, false),
-      children: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {
-        sx: {
-          color: "grey"
-        }
-      })
-    })]
-  })
-}));
-
-const _excluded$4 = ["code"];
-const TextBuilder = /*#__PURE__*/memo(({
-  renderHeader,
-  templateOptions,
-  value: _value = [],
-  onChange: _onChange = () => {},
-  defaultRule
-}) => {
-  const templateInputMap = useMemo(() => templateOptions.reduce((obj, _ref) => {
-    let {
-        code
-      } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    return _extends({}, obj, {
-      [code]: rest
-    });
-  }, {}), [templateOptions]);
-
-  // TODO: change rows => RuleGroups
-  const [rows, setRows] = useState(_value);
-  const setMutatableRows = useCallback(setterFn => {
-    setRows(rows => produce(rows, setterFn));
-  }, []);
-  useEffect(() => {
-    _onChange(rows);
-  }, [rows]);
-  const handleAddGroup = () => {
-    // TODO use setMutatableRows
-    setRows([...rows, {
-      index: rows.length,
-      groupId: v4(),
-      rules: [_extends({
-        id: v4()
-      }, defaultRule)]
-    }]);
-  };
-  const handleGroupDelete = ({
-    groupId
-  }) => {
-    const newRows = rows.filter(row => row.groupId !== groupId);
-    setRows(newRows);
-  };
-  const handleRuleDelete = ({
-    index,
-    ruleIndex,
-    groupId,
-    ruleId
-  }) => {
-    setMutatableRows(groups => {
-      groups[index].rules = groups[index].rules.filter(rule => rule.id !== ruleId);
-    });
-  };
-
-  // TODO change name
-  const handleRuleTemplateSelect = ({
-    groupId,
-    index,
-    ruleId,
-    ruleIndex,
-    templateCode
-  }) => {
-    setMutatableRows(groups => {
-      groups[index].rules[ruleIndex].name = templateCode || null;
-      groups[index].rules[ruleIndex].value = null;
-      groups[index].rules[ruleIndex].template = null;
-    });
-  };
-  const handleRuleTemplateValueChange = ({
-    value,
-    template,
-    groupId,
-    index,
-    ruleId,
-    ruleIndex
-  }) => {
-    setMutatableRows(groups => {
-      const rule = groups.find(group => group.groupId === groupId).rules.find(rule => rule.id === ruleId);
-      rule.value = value;
-      rule.template = template;
-      // groups[index].rules[ruleIndex].value = value;
-      // groups[index].rules[ruleIndex].template = template;
-    });
-  };
-
-  const moveGroupPosition = ({
-    index
-  }, isUp) => {
-    const newRows = rows.slice();
-    const nextRow = isUp ? index - 1 : index + 1;
-    [newRows[index], newRows[nextRow]] = [newRows[nextRow], newRows[index]];
-    setRows(newRows);
-  };
-  const handleAddRule = ({
-    groupId
-  }) => {
-    // TODO use setMutatableRows
-    const newRules = rows.map(row => {
-      if (row.groupId !== groupId) return row;
-      return _extends({}, row, {
-        rules: [...row.rules, _extends({
-          id: v4()
-        }, defaultRule)]
-      });
-    });
-    setRows(newRules);
-  };
-  return /*#__PURE__*/jsxs(ContentBox, {
-    sx: {
-      ".MuiFormControl-root": {
-        background: "white"
-      }
-    },
-    children: [/*#__PURE__*/jsx(BuilderHeader, {
-      onAdd: handleAddGroup,
-      children: renderHeader()
-    }), rows.map(({
-      groupId,
-      rules
-    }, index) => /*#__PURE__*/jsx(ContentBox, {
-      displayType: "outlined",
-      sx: {
-        paddingBottom: 2
-      },
-      children: /*#__PURE__*/jsxs(Box$1, {
-        sx: {
-          display: "flex",
-          flexWrap: "no-wrap",
-          border: "1px solid transparent"
-        },
-        children: [/*#__PURE__*/jsx(RuleGroupIndex, {
-          onMovePosition: moveGroupPosition,
-          isFirst: index === 0,
-          isLast: index === rows.length - 1,
-          index: index,
-          groupId: groupId
-        }), /*#__PURE__*/jsxs(Box$1, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/jsx(RuleGroup, {
-            index: index,
-            rules: rules,
-            groupId: groupId,
-            templateOptions: templateOptions,
-            templateInputMap: templateInputMap,
-            onRuleDelete: handleRuleDelete,
-            onTemplateSelect: handleRuleTemplateSelect,
-            onTemplateValueChange: handleRuleTemplateValueChange
-          }), /*#__PURE__*/jsx(RuleGroupFooter, {
-            groupIndex: index,
-            groupId: groupId,
-            onGroupDelete: handleGroupDelete,
-            onRuleAdd: handleAddRule
-          })]
-        })]
-      })
-    }, groupId))]
-  });
-});
-
 const moreThan = ruleValue => ({
   fieldValue
 }) => {
@@ -17096,6 +16576,14 @@ 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 => {
@@ -17382,7 +16870,7 @@ const DateSelectReadOnly$1 = ({
   schema
 }) => {
   const value = useMemo(() => {
-    if (!(formData != null && formData.date)) return null;
+    if (formData == undefined) return null;
     const date = new Date(formData.date);
     const options = _extends({}, formData.type === "y" && {
       year: "numeric"
@@ -17432,37 +16920,30 @@ const DateSelect = props => {
     rawErrors,
     disabled
   } = props;
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [dateType, setDateType] = useState(dateTypes.day);
   const serverSideDateFormat = "MM-dd-yyyy";
-  const [{
-    selectedDate,
-    dateType
-  }, setFieldValue] = useState(() => {
+  useEffect(() => {
     if (formData && typeof formData === "object" && formData.date != undefined) {
-      return {
-        selectedDate: parse$1(formData.date, serverSideDateFormat, new Date()),
-        dateType: findDateType(formData.type)
-      };
+      let obj = formData;
+      setDateType(findDateType(obj.type));
+      setSelectedDate(parse$1(obj.date, serverSideDateFormat, new Date()));
     } else {
-      return {
-        selectedDate: null,
-        dateType: formData != null && formData.type ? findDateType(formData.type) : dateTypes.day
-      };
+      setDateType(dateTypes.day);
+      setSelectedDate(null);
     }
-  });
+  }, [formData]);
   const handleDateTypeChange = (event, newDateType) => {
-    // INFO: toggle sends null value on double click
-    if (!newDateType) return;
-    let newDate = null;
-    if (typeof selectedDate !== "undefined" && selectedDate != null) {
-      newDate = format$1(selectedDate, serverSideDateFormat);
+    if (newDateType != null) {
+      setDateType(newDateType);
+      if (typeof selectedDate !== "undefined" && selectedDate != null) {
+        format$1(selectedDate, serverSideDateFormat);
+        onChange({
+          date: format$1(selectedDate, serverSideDateFormat),
+          type: newDateType.type
+        });
+      }
     }
-    setFieldValue(prev => _extends({}, prev, {
-      dateType: newDateType
-    }));
-    onChange({
-      date: newDate,
-      type: newDateType.type
-    });
   };
   const handleDateChange = newDate => {
     if (newDate != null) {
@@ -17472,17 +16953,13 @@ const DateSelect = props => {
         newDate = setDate(newDate, 1);
         newDate = setMonth(newDate, 0);
       }
-      setFieldValue(prev => _extends({}, prev, {
-        selectedDate: newDate
-      }));
+      setSelectedDate(newDate);
       onChange({
         date: format$1(newDate, serverSideDateFormat),
         type: dateType.type
       });
     } else {
-      setFieldValue(prev => _extends({}, prev, {
-        selectedDate: null
-      }));
+      setSelectedDate(newDate);
       onChange({
         date: null,
         type: dateType.type
@@ -17552,7 +17029,7 @@ const DateSelect = props => {
         inputVariant: "outlined",
         inputFormat: dateType.format,
         views: dateType.views,
-        value: selectedDate || null,
+        value: typeof selectedDate === "undefined" ? null : selectedDate,
         onChange: handleDateChange,
         disabled: disabled,
         renderInput: params => /*#__PURE__*/jsx(TextField, _extends({}, params, {
@@ -17562,12 +17039,7 @@ const DateSelect = props => {
           sx: dateInputStyles
         })),
         minDate: minDate,
-        maxDate: maxDate,
-        componentsProps: {
-          actionBar: {
-            actions: ["cancel", "clear", "accept"]
-          }
-        }
+        maxDate: maxDate
       })
     })]
   });
@@ -17607,6 +17079,49 @@ 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, {
@@ -17618,30 +17133,7 @@ const FieldContainer = props => {
 };
 FieldContainer.propTypes = Box$2.propTypes;
 
-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
-};
-
+registerPlugin(FilePondPluginFileValidateType, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
 const Upload = props => {
   const {
     schema,
@@ -17650,202 +17142,106 @@ const Upload = props => {
       "ui:options": {}
     },
     onChange,
-    disabled
+    disabled,
+    required
   } = props;
-  const emptyValue = uiSchema["ui:emptyValue"] || null;
   const isReadOnly = useReadOnly();
   const {
+    documentName: documentNameTemplate,
+    downloadUrl: downloadUrlTemplate,
+    extension: extensionTemplate,
     uploadDataSource,
+    mapUploadResponse,
     acceptedFileTypes,
     message,
-    // TODO: can be handled generic way with HOC
-    isImage = true,
-    // multiple = true, // change to false
-
-    isPreviewHidden = false,
-    idTemplate,
-    downloadUrlTemplate,
-    nameTemplate,
-    mapUploadResponseToIdTemplate,
-    maxFiles = 1,
-    maxFileSize = null,
-    maxTotalFileSize = null
+    isImage
   } = uiSchema["ui:options"];
-
-  // 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
-          }
-        }
-      };
-    });
-  }, []);
   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 documentName = useRender(documentNameTemplate);
+  const downloadUrl = useRenderUrl(downloadUrlTemplate);
+  useRender(extensionTemplate);
+  const [files, setFiles] = useState([]);
   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 => {
+
+  // INFO: this state is needed to prevent re-load of file during submit
+  const [currentFileId, setCurrentFileId] = useState();
+
+  // 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
+        }
+      }
+    }];
+    if (formData != undefined) setFiles(files);
+  }, [formData]);
+  const handleLoad = (source, load, error) => {
+    fetch(downloadUrl).then(res => res.blob()).then(res => {
       const file = res.type === "jpeg/jfif" || !res.type ? new Blob([res], {
         type: "image/jpeg"
       }) : res;
-      const preview = isPreviewHidden ? res : file;
-      load(preview);
+      load(file);
     }).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 id = mustache.render(mapUploadResponseToIdTemplate, jsonRes);
-      return id;
+      const fileUuid = mapUploadResponse ? mustache.render(mapUploadResponse.fileUuid, jsonRes) : jsonRes.DATA.fileUuid;
+      setCurrentFileId(fileUuid);
+      onChange(fileUuid);
     } catch (err) {
-      var _window$logger;
-      (_window$logger = window.logger) == null ? void 0 : _window$logger.sendLog({
-        name: `Upload response could not be parsed. ${err}`,
-        data: res
-      });
+      console.log(err);
     }
   };
-
-  // TODO: move to message HOC
+  const handleDelete = () => {
+    setCurrentFileId();
+    setFiles([]);
+    onChange();
+  };
   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 {
-    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"
-      },
-      "button.filepond--action-remove-item": {
-        display: "none"
-      }
-    } : 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
-            });
-          }
+  const filePondProps = {
+    acceptedFileTypes: acceptedFileTypes ? acceptedFileTypes : isImage ? ["image/*"] : null,
+    files,
+    allowMultiple: false,
+    server: {
+      url: uploadUrl,
+      process: {
+        method: "POST",
+        headers: {
+          Methods: "POST"
         },
-        load: handleLoad
+        onload: handleUploadResponse
       },
-      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
+      load: handleLoad,
+      revert: handleDelete
+    },
+    onupdatefiles: files => {
+      if (files.length === 0) {
+        onChange(undefined);
+      }
+      setFiles(files);
+    },
+    allowProcess: false,
+    disabled: isReadOnly,
+    allowDownloadByUrl: true
+  };
+  const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
   if (isReadOnly) {
     if (formData == undefined) return /*#__PURE__*/jsx(ReadOnlyView, {
       label: schema.title,
       emptyViewText: "No file uploaded"
     });
-    return /*#__PURE__*/jsx(ReadOnlyView, {
-      label: schema.title,
-      renderValue: () => FileUpload
-    });
+    if (isImage) return /*#__PURE__*/jsx(ImageUploadReadOnly, _extends({}, props));
   }
   return /*#__PURE__*/jsxs(FieldContainer, {
     children: [/*#__PURE__*/jsxs(DisableWrapper, {
@@ -17862,7 +17258,7 @@ const Upload = props => {
         sx: {
           marginTop: 1
         },
-        children: FileUpload
+        children: /*#__PURE__*/jsx(FilePond, _extends({}, filePondProps, overrideProps))
       })]
     }), message && /*#__PURE__*/jsx(Alert, _extends({}, messageProps))]
   });
@@ -18949,13 +18345,7 @@ const DateWidgetRaw = ({
     required: required,
     onChange: handleChange,
     disabled: disabled
-  }, uiSchema == null ? void 0 : uiSchema["ui:props"], {
-    componentsProps: {
-      actionBar: {
-        actions: ["cancel", "clear", "accept"]
-      }
-    }
-  }));
+  }, uiSchema == null ? void 0 : uiSchema["ui:props"]));
 };
 DateWidgetRaw.propTypes = {
   onChange: PropTypes.func,
@@ -20897,5 +20287,5 @@ const DynamicFormHooks = {
   useReadOnly
 };
 
-export { Actions$1 as Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CoreProvider, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon$1 as Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, TextBuilder, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
+export { Actions$1 as Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CoreProvider, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon$1 as Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricDistributionChart, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
 //# sourceMappingURL=index.modern.js.map