aefis-core-ui 3.0.0-rc113 → 3.0.0-rc115

package/dist/index.modern.js

@@ -6536,38 +6536,10 @@ const useStyles$u = makeStyles(theme => ({
       paddingBottom: theme.spacing(2)
     }
   },
-  imageContainer: {
-    display: "block",
-    backgroundSize: "cover",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center",
-    position: "relative"
-  },
   showOverflow: {
     overflow: "visible"
   }
 }));
-const titleProps = {
-  color: "textPrimary",
-  variant: "h6",
-  style: {
-    fontSize: "1.1rem",
-    fontWeight: 500,
-    lineHeight: 1.43,
-    letterSpacing: "0.01071em"
-  }
-};
-const subtitleProps = {
-  color: "textSecondary",
-  variant: "body1",
-  style: {
-    fontSize: "0.775rem",
-    fontWeight: "bolder",
-    display: "inline-flex",
-    verticalAlign: "middle",
-    alignItems: "center"
-  }
-};
 const getGradientBackgroundColorArray = arrayIndex => {
   const color1Array = [blue[100], indigo[100], purple[100], cyan[100], teal[100], green[100], blue[300], cyan[200], lime[200], indigo[300]];
   const color2Array = [blue[600], indigo[600], purple[600], cyan[600], teal[600], green[600], blue[600], cyan[600], lime[600], indigo[600]];
@@ -6586,18 +6558,77 @@ const handleSingleMenuItemClick = (action, data) => {
 
 /** Displays AEFIS content box similar to MUI Card. */
 
-const ContentBox = props => {
-  var _props$menu, _props$menu2;
+const ContentBox = ({
+  children,
+  menu,
+  renderFullMenu: _renderFullMenu = true,
+  titleContent,
+  data,
+  formatContent: _formatContent = true,
+  header,
+  headerAction,
+  headerMenu,
+  subtitle,
+  title,
+  wrapTitle: _wrapTitle = false,
+  wrapSubtitle: _wrapSubtitle = false,
+  titleBadge,
+  titleComponent: _titleComponent = "div",
+  avatar,
+  description,
+  actions,
+  afterActionContent,
+  displayType: _displayType = "default",
+  tag,
+  image,
+  imageHeight: _imageHeight = 150,
+  imageContent,
+  imageBackgroundColor: _imageBackgroundColor = "transparent",
+  gradientColorHeaderImageId,
+  hasGutter: _hasGutter = true,
+  cardStyle,
+  containerStyle,
+  sx,
+  cardContentSx,
+  dense: _dense = false,
+  collapsible: _collapsible = false,
+  headerBorder: _headerBorder = false,
+  footerBorder: _footerBorder = false,
+  headerBackgroundColor,
+  titleStyles,
+  subTitleStyles
+}) => {
   const classes = useStyles$u();
   const [invisible, setInvisible] = useState(true);
+  const titleProps = {
+    color: "textPrimary",
+    variant: "h6",
+    style: _extends({
+      fontSize: "1.1rem",
+      fontWeight: 500,
+      lineHeight: 1.43,
+      letterSpacing: "0.01071em"
+    }, titleStyles)
+  };
+  const subtitleProps = {
+    color: "textSecondary",
+    variant: "body1",
+    style: _extends({
+      fontSize: "0.775rem",
+      fontWeight: "bolder",
+      display: "inline-flex",
+      verticalAlign: "middle",
+      alignItems: "center"
+    }, subTitleStyles)
+  };
   useEffect(() => {
-    props.titleBadge && setInvisible(false);
-  }, [props.titleBadge]);
+    titleBadge && setInvisible(false);
+  }, [titleBadge]);
   const renderChildren = () => {
-    return props.children ? /*#__PURE__*/React__default.cloneElement(props.children) : "";
+    returnchildren ? /*#__PURE__*/React__default.cloneElement(children) : "";
   };
-  titleProps.component = props.titleComponent;
-  if (!props.wrapTitle) {
+  titleProps.component = _titleComponent;
+  if (!_wrapTitle) {
     titleProps["style"] = _extends({}, titleProps.style, {
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -6610,7 +6641,7 @@ const ContentBox = props => {
       textOverflow: "unset"
     });
   }
-  if (props.wrapSubtitle) {
+  if (_wrapSubtitle) {
     titleProps["noWrap"] = true;
     titleProps["style"] = _extends({}, titleProps.style, {
       whiteSpace: "nowrap",
@@ -6619,20 +6650,20 @@ const ContentBox = props => {
     });
   }
   const headerProps = {
-    title: props.title,
+    title: title,
     disableTypography: false,
     titleTypographyProps: titleProps
   };
-  if (props.titleContent) {
+  if (titleContent) {
     headerProps.action = /*#__PURE__*/jsx(Box$2, {
       sx: {
         display: "flex",
         justifyContent: "flex-end"
       },
-      children: props.titleContent
+      children: titleContent
     });
   }
-  if (props.collapsible) {
+  if (_collapsible) {
     headerProps.action = /*#__PURE__*/jsx(Box$2, {
       sx: {
         display: "flex",
@@ -6641,80 +6672,80 @@ const ContentBox = props => {
       children: /*#__PURE__*/jsx(CollapsibleContentButtonContainer, {})
     });
   }
-  if (((_props$menu = props.menu) == null ? void 0 : _props$menu.length) > 1 || props.menu && props.renderFullMenu) {
+  if ((menu == null ? void 0 : menu.length) > 1 || menu && _renderFullMenu) {
     headerProps.action = /*#__PURE__*/jsxs(Box$2, {
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end"
       },
-      children: [props.titleContent && /*#__PURE__*/jsx(Box$2, {
+      children: [titleContent && /*#__PURE__*/jsx(Box$2, {
         sx: {
           display: "flex",
           justifyContent: "flex-end",
           mr: 2
         },
-        children: props.titleContent
+        children: titleContent
       }), /*#__PURE__*/jsx(MenuButton, {
-        name: props.title,
-        menuConfiguration: props.menu,
-        data: props.data || undefined,
+        name: title,
+        menuConfiguration: menu,
+        data: data || undefined,
         displayType: "icon"
       })]
     });
   }
-  if (props.menu && !props.renderFullMenu && ((_props$menu2 = props.menu) == null ? void 0 : _props$menu2.length) === 1) {
+  if (menu && !_renderFullMenu && (menu == null ? void 0 : menu.length) === 1) {
     headerProps.action = /*#__PURE__*/jsxs(Box$2, {
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end"
       },
-      children: [props.titleContent && /*#__PURE__*/jsx(Box$2, {
+      children: [titleContent && /*#__PURE__*/jsx(Box$2, {
         sx: {
           display: "flex",
           justifyContent: "flex-end",
           mr: 2
         },
-        children: props.titleContent
+        children: titleContent
       }), /*#__PURE__*/jsx(IconButton, {
-        name: props.menu[0].name,
+        name: menu[0].name,
         size: "small",
-        onClick: () => handleSingleMenuItemClick(props.menu[0].onClick, props.data),
+        onClick: () => handleSingleMenuItemClick(menu[0].onClick, data),
         showTooltip: true,
-        children: props.menu[0].icon
+        children: menu[0].icon
       })]
     });
   }
-  if (typeof props.subtitle === "string" && props.subtitle !== undefined) {
+  if (typeof subtitle === "string" && subtitle !== undefined) {
     headerProps.subheaderTypographyProps = subtitleProps;
-    headerProps.subheader = props.subtitle;
+    headerProps.subheader = subtitle;
   }
-  if (typeof props.subtitle !== "string" && props.subtitle !== undefined) {
+  if (typeof subtitle !== "string" && subtitle !== undefined) {
     headerProps.title = /*#__PURE__*/jsx(Typography, {
       variant: "h6",
-      component: props.titleComponent,
+      component: _titleComponent,
       style: titleProps.style,
       display: "flex",
-      noWrap: props.wrapTitle,
-      children: props.title
+      noWrap: _wrapTitle,
+      children: title
     });
     headerProps.disableTypography = true;
-    headerProps.subheader = props.subtitle;
+    headerProps.subheader = subtitle;
   }
-  if (props.titleBadge) {
+  if (titleBadge) {
     headerProps.title = /*#__PURE__*/jsx(Box$2, {
       children: /*#__PURE__*/jsx(StyledBadge, {
-        badgeContent: props.titleBadge,
+        badgeContent: titleBadge,
         invisible: invisible,
         color: "secondary",
         children: /*#__PURE__*/jsx(Typography, {
           variant: "h6",
-          component: props.titleComponent,
+          component: _titleComponent,
           style: titleProps.style,
           display: "block",
           noWrap: true,
-          children: props.title
+          children: title
         })
       })
     });
@@ -6725,11 +6756,11 @@ const ContentBox = props => {
     headerProps.classes = {
       content: classes.showOverflow
     };
-    if (props.subtitle) {
+    if (subtitle) {
       headerProps.subheader = /*#__PURE__*/jsx(Typography, {
         variant: "body1",
         component: "span",
-        noWrap: props.wrapSubtitle,
+        noWrap: _wrapSubtitle,
         color: "textSecondary",
         style: {
           fontSize: "0.775rem",
@@ -6738,32 +6769,32 @@ const ContentBox = props => {
           verticalAlign: "middle",
           alignItems: "center"
         },
-        children: props.subtitle
+        children: subtitle
       });
     }
   }
-  if (props.avatar) {
-    headerProps.avatar = props.avatar;
+  if (avatar) {
+    headerProps.avatar = avatar;
   }
-  const cardStyle = _extends({
-    marginBottom: props.hasGutter ? 8 : 0,
+  const cardStyles = _extends({
+    marginBottom: _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") {
-    cardStyle.border = "2px solid #dddddd";
+    boxShadow: _displayType === "outlined" ? "none" : "rgb(58 53 65 / 10%) 0px 2px 10px 0px"
+  }, cardStyle);
+  if (_displayType === "outlined") {
+    cardStyles.border = "2px solid #dddddd";
   }
   // eslint-disable-next-line
-  const tag = props.tag ? useTag(props.tag) : {};
-  const useHeaderImage = props.image !== undefined && typeof props.image === "string" || props.gradientColorHeaderImageId !== undefined ? true : false;
-  const useLocalHeaderImage = props.image !== undefined && typeof props.image !== "string" ? true : false;
-  const imageDivStyle = props.image !== undefined || props.gradientColorHeaderImageId !== undefined ? {
-    backgroundImage: props.gradientColorHeaderImageId !== undefined ? "linear-gradient(135deg," + getGradientBackgroundColorArray(props.gradientColorHeaderImageId)[0] + " 10%," + getGradientBackgroundColorArray(props.gradientColorHeaderImageId)[1] + ")" : "url(" + props.image + ")",
-    height: props.imageHeight,
-    backgroundColor: props.imageBackgroundColor ? props.imageBackgroundColor : "transparent"
+  const newTag = tag ? useTag(tag) : {};
+  const useHeaderImage = image !== undefined && typeof image === "string" || gradientColorHeaderImageId !== undefined ? true : false;
+  const useLocalHeaderImage = image !== undefined && typeof image !== "string" ? true : false;
+  const imageDivStyle = image !== undefined || gradientColorHeaderImageId !== undefined ? {
+    backgroundImage: gradientColorHeaderImageId !== undefined ? "linear-gradient(135deg," + getGradientBackgroundColorArray(gradientColorHeaderImageId)[0] + " 10%," + getGradientBackgroundColorArray(gradientColorHeaderImageId)[1] + ")" : "url(" + image + ")",
+    height: _imageHeight,
+    backgroundColor: _imageBackgroundColor ? _imageBackgroundColor : "transparent"
   } : {};
-  const otherSx = !props.children && !props.description ? {
+  const otherSx = !children && !description ? {
     display: "none",
     visibility: "hidden"
   } : undefined;
@@ -6772,100 +6803,91 @@ const ContentBox = props => {
       open: true
     },
     children: /*#__PURE__*/jsxs(Box$2, {
-      sx: props.sx,
-      style: props.containerStyle,
-      children: [props.header && /*#__PURE__*/jsx(ContentBoxHeader, {
-        header: props.header,
-        headerMenu: props.headerMenu,
-        title: props.title,
-        data: props.data,
-        headerAction: props.headerAction
+      sx: sx,
+      style: containerStyle,
+      children: [header && /*#__PURE__*/jsx(ContentBoxHeader, {
+        header: header,
+        headerMenu: headerMenu,
+        title: title,
+        data: data,
+        headerAction: headerAction
       }), /*#__PURE__*/jsxs(Card, {
-        style: cardStyle,
-        className: tag.tag,
+        style: cardStyles,
+        className: newTag.tag,
         children: [useHeaderImage && /*#__PURE__*/jsx(Box$2, {
           style: imageDivStyle,
-          className: classes.imageContainer,
-          title: props.title,
-          children: props.imageContent
+          sx: {
+            display: "block",
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            position: "relative"
+          },
+          title: title,
+          children: imageContent
         }), useLocalHeaderImage && /*#__PURE__*/jsx(CardMedia, {
-          height: props.imageHeight,
+          height: _imageHeight,
           component: "img",
           alt: "",
-          image: props.image
-        }), props.title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps, {
+          image: image
+        }), title && /*#__PURE__*/jsx(CardHeader, _extends({}, headerProps, {
           sx: {
-            backgroundColor: props.headerBackgroundColor || "#ffffff",
-            padding: props.dense ? 1 : 2,
-            borderBottom: props.headerBorder ? "1px solid #dddddd" : "none",
-            ".MuiCardHeader-content": _extends({}, !props.wrapTitle && {
+            backgroundColor: headerBackgroundColor || "#ffffff",
+            padding: _dense ? 1 : 2,
+            borderBottom: _headerBorder ? "1px solid #dddddd" : "none",
+            ".MuiCardHeader-content": _extends({}, !_wrapTitle && {
               overflow: "hidden"
             })
           }
-        })), props.formatContent && /*#__PURE__*/jsx(CardContent, {
-          className: !props.title ? classes.cardContentWithoutTitle : classes.cardContent,
+        })), _formatContent && /*#__PURE__*/jsx(CardContent, {
+          className: !title ? classes.cardContentWithoutTitle : classes.cardContent,
           sx: _extends({
-            padding: props.dense ? 1 : 2
-          }, otherSx, props.cardContentSx),
-          children: props.collapsible ? /*#__PURE__*/jsxs(CollapsibleContentContainer, {
-            children: [props.description && /*#__PURE__*/jsx(Typography, {
+            padding: _dense ? 1 : 2
+          }, otherSx, cardContentSx),
+          children: _collapsible ? /*#__PURE__*/jsxs(CollapsibleContentContainer, {
+            children: [description && /*#__PURE__*/jsx(Typography, {
               variant: "body2",
               sx: {
                 color: "text.secondary"
               },
               component: "p",
-              children: props.description
-            }), React__default.Children.map(props.children || null, child => {
+              children: description
+            }), React__default.Children.map(children || null, child => {
               return child;
             })]
           }) : /*#__PURE__*/jsxs(React__default.Fragment, {
-            children: [props.description && /*#__PURE__*/jsx(Typography, {
+            children: [description && /*#__PURE__*/jsx(Typography, {
               variant: "body2",
               sx: {
                 color: "text.secondary"
               },
               component: "p",
-              children: props.description
-            }), React__default.Children.map(props.children || null, child => {
+              children: description
+            }), React__default.Children.map(children || null, child => {
               return child;
             })]
           })
-        }), !props.formatContent && /*#__PURE__*/jsxs(React__default.Fragment, {
-          children: [props.description && /*#__PURE__*/jsx(Typography, {
+        }), !_formatContent && /*#__PURE__*/jsxs(React__default.Fragment, {
+          children: [description && /*#__PURE__*/jsx(Typography, {
             variant: "body2",
             sx: {
               color: "text.secondary"
             },
             component: "p",
-            children: props.description
+            children: description
           }), renderChildren()]
-        }), props.actions && /*#__PURE__*/jsx(CardActions, {
+        }), actions && /*#__PURE__*/jsx(CardActions, {
           disableSpacing: true,
           sx: {
-            paddingTop: props.dense ? 0 : 1,
-            borderTop: props.footerBorder === true ? "1px solid #dddddd" : "none"
+            paddingTop: _dense ? 0 : 1,
+            borderTop: _footerBorder === true ? "1px solid #dddddd" : "none"
           },
-          children: props.actions
-        }), props.afterActionContent]
+          children: actions
+        }), afterActionContent]
       })]
     })
   });
 };
-ContentBox.defaultProps = {
-  formatContent: true,
-  displayType: "default",
-  imageHeight: 150,
-  hasGutter: true,
-  imageBackgroundColor: "transparent",
-  titleComponent: "div",
-  wrapTitle: false,
-  wrapSubtitle: false,
-  dense: false,
-  collapsible: false,
-  renderFullMenu: true,
-  headerBorder: false,
-  footerBorder: false
-};
 ContentBox.propTypes = {
   /** Content of the content box */
   children: PropTypes.any,
@@ -6958,7 +6980,13 @@ ContentBox.propTypes = {
   /** show border on footer */
   footerBorder: PropTypes.bool,
   /** additional header styles */
-  headerBackgroundColor: PropTypes.string
+  headerBackgroundColor: PropTypes.string,
+  /** additional title styles */
+  titleStyles: PropTypes.object,
+  /** additional subtitle styles */
+  subTitleStyles: PropTypes.object,
+  /** function to execute when title is clicked */
+  onTitleClick: PropTypes.func
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
@@ -26729,6 +26757,9 @@ const Widget = ({
       }
     })
   }) : undefined;
+  const titleStyles = {
+    fontSize: "1.25rem"
+  };
   return /*#__PURE__*/jsx(Box$2, {
     component: "article",
     sx: containerStyle,
@@ -26739,6 +26770,7 @@ const Widget = ({
     },
     children: /*#__PURE__*/jsx(ContentBox, _extends({
       title: title,
+      titleStyles: titleStyles,
       subtitle: subtitle,
       avatar: avatar,
       titleComponent: _titleComponent,