aefis-core-ui 2.3.0-rc20 → 2.3.0-rc22

package/dist/index.modern.js

@@ -1917,7 +1917,7 @@ MenuButton.propTypes = {
 const useTag = color => {
   const useStyles = makeStyles(theme => ({
     tag: {
-      borderLeft: `4px solid ${color ? color : theme.palette.primary.main}`
+      borderLeft: `16px solid ${color ? color : theme.palette.primary.main}`
     }
   }));
   return useStyles();
@@ -2101,6 +2101,10 @@ const ContentBox = props => {
     height: props.imageHeight,
     backgroundColor: props.imageBackgroundColor ? props.imageBackgroundColor : "transparent"
   } : {};
+  const otherSx = !props.children && !props.description ? {
+    display: "none",
+    visibility: "hidden"
+  } : undefined;
   return /*#__PURE__*/jsxs(Box$1, {
     sx: props.sx,
     style: props.containerStyle,
@@ -2124,12 +2128,15 @@ const ContentBox = props => {
         component: "img",
         alt: "",
         image: props.image
-      }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps)), props.formatContent && /*#__PURE__*/jsx(CardContent, {
+      }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps, {
+        sx: {
+          padding: props.dense ? 1 : 2
+        }
+      })), props.formatContent && /*#__PURE__*/jsx(CardContent, {
         className: !props.title ? classes.cardContentWithoutTitle : classes.cardContent,
-        sx: !props.children && !props.description ? {
-          display: "none",
-          visibility: "hidden"
-        } : undefined,
+        sx: _extends({
+          padding: props.dense ? 1 : 2
+        }, otherSx),
         children: /*#__PURE__*/jsxs(React.Fragment, {
           children: [props.description && /*#__PURE__*/jsx(Typography, {
             variant: "body2",
@@ -2153,6 +2160,9 @@ const ContentBox = props => {
         }), renderChildren()]
       }), props.actions && /*#__PURE__*/jsx(CardActions, {
         disableSpacing: true,
+        sx: {
+          paddingTop: props.dense ? 0 : 1
+        },
         children: props.actions
       }), props.afterActionContent]
     })]
@@ -2166,7 +2176,8 @@ ContentBox.defaultProps = {
   imageBackgroundColor: "transparent",
   titleComponent: "div",
   wrapTitle: false,
-  wrapSubtitle: false
+  wrapSubtitle: false,
+  dense: false
 };
 ContentBox.propTypes = {
   /** Content of the content box */
@@ -2218,7 +2229,9 @@ ContentBox.propTypes = {
   /** Additional styles for the content box container */
   containerStyle: PropTypes.any,
   /** Additional styles to apply */
-  sx: PropTypes.object
+  sx: PropTypes.object,
+  /** Compact display? */
+  dense: PropTypes.bool
 };
 
 const defaultColorPalette = {
@@ -4760,19 +4773,26 @@ SwipeableTabPanel.propTypes = {
   appBarComponent: PropTypes.string
 };
 
-const List = props => {
+const List = ({
+  children,
+  containerStyle,
+  transparentBackground: _transparentBackground = false,
+  display: _display = "vertical",
+  animate: _animate = true,
+  sx
+}) => {
   const theme = useTheme$1();
   const rootStyle = _extends({
-    backgroundColor: props.transparentBackground ? "transparent" : theme.palette.background.paper,
+    backgroundColor: _transparentBackground ? "transparent" : theme.palette.background.paper,
     width: "100%"
-  }, props.containerStyle);
-  const listStyle = {
+  }, containerStyle);
+  const listStyle = _extends({
     margin: 0,
     padding: 0,
     flexWrap: "wrap"
-  };
+  }, sx);
   const listProps = {};
-  if (props.display === "horizontal") {
+  if (_display === "horizontal") {
     listStyle["display"] = "flex";
     listStyle["flexDirection"] = "row";
     listProps["dense"] = true;
@@ -4780,25 +4800,20 @@ const List = props => {
   }
   return /*#__PURE__*/jsx(Box$1, {
     sx: rootStyle,
-    children: props.animate ? /*#__PURE__*/jsx(FadeIn, {
+    children: _animate ? /*#__PURE__*/jsx(FadeIn, {
       in: true,
       children: /*#__PURE__*/jsx(List$2, _extends({
         sx: listStyle
       }, listProps, {
-        children: props.children
+        children: children
       }))
     }) : /*#__PURE__*/jsx(List$2, _extends({
       sx: listStyle
     }, listProps, {
-      children: props.children
+      children: children
     }))
   });
 };
-List.defaultProps = {
-  transparentBackground: false,
-  display: "vertical",
-  animate: true
-};
 List.propTypes = {
   /** Children of the list. Children should be the ListItem component.  */
   children: PropTypes.any.isRequired,
@@ -4809,7 +4824,9 @@ List.propTypes = {
   /** List display type */
   display: PropTypes.oneOf(["horizontal", "vertical"]),
   /** Show the animation? */
-  animate: PropTypes.bool
+  animate: PropTypes.bool,
+  /** Style to apply */
+  sx: PropTypes.any
 };
 
 const StyledMuiListItemButton = withStyles$1({
@@ -4817,38 +4834,53 @@ const StyledMuiListItemButton = withStyles$1({
     "&:hover": {
       backgroundColor: "rgba(0, 0, 0, 0.02) !important"
     }
-  },
-  selected: {
-    backgroundColor: "#f5fbfe !important"
-  }
-})(ListItem$2);
-const StyledMuiListItem = withStyles$1({
-  selected: {
-    backgroundColor: "#f5fbfe !important"
   }
 })(ListItem$2);
+const StyledMuiListItem = withStyles$1({})(ListItem$2);
 
 /** List Item component to be used with List component.  Displays items in a list. */
 
-const ListItem = props => {
-  const listItemStyle = {};
+const ListItem = ({
+  displayType: _displayType = "default",
+  avatar,
+  icon,
+  title,
+  subtitle,
+  hasBorder: _hasBorder = false,
+  borderStyle: _borderStyle = "2px solid",
+  canClick: _canClick = false,
+  onClick,
+  children,
+  id,
+  disabled: _disabled = false,
+  dense: _dense = false,
+  hasGutter: _hasGutter = true,
+  selected: _selected = false,
+  selectedType: _selectedType = "background",
+  display: _display = "vertical",
+  sx
+}) => {
   const keyValue = useUID();
-  if (!props.hasGutter) {
+  const listItemStyle = {
+    backgroundColor: _selected && _selectedType === "background" ? "#f5fbfe" : "transparent",
+    border: _selected && _selectedType === "outlined" ? "2px solid #2295f2" : "none"
+  };
+  if (!_hasGutter) {
     listItemStyle.padding = 0;
   }
-  if (props.hasBorder) {
-    listItemStyle.borderBottom = props.borderStyle;
+  if (_hasBorder) {
+    listItemStyle.borderBottom = _borderStyle;
     listItemStyle.borderColor = grey[200];
   }
   const listItemArgs = {
-    key: props.id ? props.id : keyValue,
+    key: id ? id : keyValue,
     style: listItemStyle,
-    disabled: props.disabled,
-    dense: props.dense,
-    selected: props.selected,
+    disabled: _disabled,
+    dense: _dense,
+    selected: _selected,
     component: "li"
   };
-  if (props.display === "horizontal") {
+  if (_display === "horizontal") {
     listItemArgs["sx"] = {
       marginRight: "2px",
       marginBottom: "2px",
@@ -4858,51 +4890,42 @@ const ListItem = props => {
     listItemArgs["disablePadding"] = true;
     listItemArgs["disableGutters"] = true;
   }
-  if (props.canClick) {
+  if (_canClick) {
     listItemArgs.button = true;
-    listItemArgs.onClick = props.onClick;
+    listItemArgs.onClick = onClick;
   }
-  return props.displayType === "default" && props.canClick && /*#__PURE__*/jsxs(StyledMuiListItemButton, _extends({}, listItemArgs, {
-    children: [props.title && props.title !== "" && props.avatar && /*#__PURE__*/jsx(ListItemAvatar, {
-      children: props.avatar
-    }), props.title && props.title !== "" && props.icon && /*#__PURE__*/jsx(ListItemIcon, {
-      children: props.icon
-    }), props.title && props.title !== "" && /*#__PURE__*/jsx(ListItemText, {
-      primary: props.title,
-      secondary: props.subtitle
-    }), !props.title && props.children && /*#__PURE__*/jsx(React.Fragment, {
-      children: props.children
+  return _displayType === "default" && _canClick && /*#__PURE__*/jsxs(StyledMuiListItemButton, _extends({}, listItemArgs, {
+    children: [title && title !== "" && avatar && /*#__PURE__*/jsx(ListItemAvatar, {
+      children: avatar
+    }), title && title !== "" && icon && /*#__PURE__*/jsx(ListItemIcon, {
+      children: icon
+    }), title && title !== "" && /*#__PURE__*/jsx(ListItemText, {
+      primary: title,
+      secondary: subtitle
+    }), !title && children && /*#__PURE__*/jsx(React.Fragment, {
+      children: children
     })]
-  })) || props.displayType === "default" && !props.canClick && /*#__PURE__*/jsxs(StyledMuiListItem, _extends({}, listItemArgs, {
-    children: [props.title && props.title !== "" && props.avatar && /*#__PURE__*/jsx(ListItemAvatar, {
-      children: props.avatar
-    }), props.title && props.title !== "" && props.icon && /*#__PURE__*/jsx(ListItemIcon, {
-      children: props.icon
-    }), props.title && props.title !== "" && /*#__PURE__*/jsx(ListItemText, {
-      primary: props.title,
-      secondary: props.subtitle
-    }), !props.title && props.children && /*#__PURE__*/jsx(React.Fragment, {
-      children: props.children
+  })) || _displayType === "default" && !_canClick && /*#__PURE__*/jsxs(StyledMuiListItem, _extends({}, listItemArgs, {
+    sx: sx,
+    children: [title && title !== "" && avatar && /*#__PURE__*/jsx(ListItemAvatar, {
+      children: avatar
+    }), title && title !== "" && icon && /*#__PURE__*/jsx(ListItemIcon, {
+      children: icon
+    }), title && title !== "" && /*#__PURE__*/jsx(ListItemText, {
+      primary: title,
+      secondary: subtitle
+    }), !title && children && /*#__PURE__*/jsx(React.Fragment, {
+      children: children
     })]
-  })) || props.displayType === "skeleton" && /*#__PURE__*/jsx(StyledMuiListItem, {
+  })) || _displayType === "skeleton" && /*#__PURE__*/jsx(StyledMuiListItem, {
     style: listItemStyle,
+    sx: sx,
     children: /*#__PURE__*/jsx(SkeletonContent, {
       displayType: "listItem",
       withAvatar: true
     })
   }, keyValue);
 };
-ListItem.defaultProps = {
-  displayType: "default",
-  hasBorder: false,
-  disabled: false,
-  dense: false,
-  canClick: false,
-  borderStyle: "2px solid",
-  hasGutter: true,
-  selected: false,
-  display: "vertical"
-};
 ListItem.propTypes = {
   /** The display type of the list item. */
   displayType: PropTypes.oneOf(["default", "skeleton"]),
@@ -4934,8 +4957,12 @@ ListItem.propTypes = {
   hasGutter: PropTypes.bool,
   /** Is the item selected? If selected, the list item will display a background color */
   selected: PropTypes.bool,
+  /** When the list item is selected, use background color or outline. */
+  selectedType: PropTypes.oneOf(["background", "outlined"]),
   /** List display type */
-  display: PropTypes.oneOf(["horizontal", "vertical"])
+  display: PropTypes.oneOf(["horizontal", "vertical"]),
+  /** Styles to apply */
+  sx: PropTypes.any
 };
 
 const useStyles$z = makeStyles(theme => ({