aefis-core-ui 2.1.19 → 2.1.21

package/dist/index.modern.js

@@ -4797,7 +4797,8 @@ const ListItem = props => {
     style: listItemStyle,
     disabled: props.disabled,
     dense: props.dense,
-    selected: props.selected
+    selected: props.selected,
+    component: "li"
   };
   if (props.display === "horizontal") {
     listItemArgs["sx"] = {
@@ -5285,7 +5286,8 @@ const useStyles$y = makeStyles(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
-    position: "relative"
+    position: "relative",
+    minHeight: 60
   },
   closeButton: {
     position: "absolute",
@@ -13558,7 +13560,7 @@ const color = percent => {
   return percent ? dynamicSuccess[percent] : inProgress["default"];
 };
 const Chart = props => {
-  let bgColor = props.dynamicColor ? color(props.percentValue) : props.showComplete && props.percentValue === 100 ? goalMet["default"] : color();
+  const bgColor = props.customSeriesColor || (props.dynamicColor ? color(props.percentValue) : props.showComplete && props.percentValue === 100 ? goalMet["default"] : color());
   const XSmallSlider = withStyles$1({
     root: {
       borderRadius: 10,
@@ -13639,7 +13641,8 @@ Chart.propTypes = {
   percentValue: PropTypes.number,
   showComplete: PropTypes.any,
   size: PropTypes.string,
-  label: PropTypes.string
+  label: PropTypes.string,
+  customSeriesColor: PropTypes.string
 };
 const SliderChart = props => {
   const classes = useStyles$a();
@@ -13669,7 +13672,7 @@ const SliderChart = props => {
     }), props.title && props.title !== "" && props.showTitle && /*#__PURE__*/jsx(Typography, {
       variant: "h3",
       sx: titleStyle,
-      component: "span",
+      component: props.titleComponent,
       children: props.title
     }), /*#__PURE__*/jsxs(Box$1, {
       className: classes.chartContainer,
@@ -13690,17 +13693,22 @@ const SliderChart = props => {
     })]
   });
 };
+SliderChart.defaultProps = {
+  titleComponent: "div"
+};
 SliderChart.propTypes = {
   dynamicColor: PropTypes.bool,
   height: PropTypes.any,
   percentValue: PropTypes.any,
   size: PropTypes.string,
   title: PropTypes.string,
+  titleComponent: PropTypes.any,
   subtitle: PropTypes.string,
   width: PropTypes.any,
   color: PropTypes.any,
   description: PropTypes.string,
-  showTitle: PropTypes.bool
+  showTitle: PropTypes.bool,
+  customSeriesColor: PropTypes.string
 };
 
 const getPercent = (total, value, roundPercent) => {
@@ -13738,6 +13746,8 @@ ProgressChart.propTypes = {
   description: PropTypes.string,
   /** The title of the progress chart. */
   title: PropTypes.string,
+  /** The component to use to render the title.  Only available in slider charts. */
+  titleComponent: PropTypes.string,
   /** The subtitle of the progress chart. */
   subtitle: PropTypes.string,
   /** For "circle" progress chart, the main display value.  Default is the percentage. */
@@ -13755,7 +13765,9 @@ ProgressChart.propTypes = {
   /** Automatically round the percentage value. */
   roundPercent: PropTypes.bool,
   /** Even if title given, do not display it. */
-  showTitle: PropTypes.bool
+  showTitle: PropTypes.bool,
+  /** If provided, will override the color the the series of the chart. Only active for slider charts. */
+  customSeriesColor: PropTypes.string
 };
 
 const sortObjectBy = (field, reverse, primer) => {
@@ -14621,36 +14633,7 @@ Header.propTypes = {
   allStepsCompleted: PropTypes.bool
 };
 
-// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$5 = makeStyles(theme => ({
-  container: {
-    position: "absolute",
-    overflowY: "auto",
-    left: 0,
-    right: 0,
-    bottom: 64,
-    top: 178
-  },
-  tabBar: {
-    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
-    zIndex: 1,
-    background: "#ffffff",
-    padding: theme.spacing(2)
-  },
-  scrolledTabBar: {
-    zIndex: 1,
-    borderBottom: "none",
-    background: "#ffffff",
-    padding: theme.spacing(2),
-    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
-  },
-  bottomBar: {
-    borderTop: "1px solid rgba(0, 0, 0, 0.12)"
-  },
-  scrolledBottomBar: {
-    borderTop: "none",
-    boxShadow: "0px -4px 8px -4px rgba(0,0,0,0.12)"
-  },
   buttonContainer: {
     marginLeft: "auto",
     display: "flex"
@@ -14663,7 +14646,7 @@ const useStyles$5 = makeStyles(theme => ({
     marginRight: 8
   }
 }));
-const bottomBarStyle = {
+const bottomBarDefaultStyle = {
   background: "#ffffff",
   display: "flex",
   minHeight: 64,
@@ -14679,7 +14662,7 @@ const bottomBarStyle = {
   right: 0
 };
 
-/** Component to display a "stepper" wizard panel for multiple step proceses with swipeable tabs. Designed to be display within a Drawer component. */
+/** Component to display a "stepper" wizard panel for multiple step processes with swipeable tabs. Designed to be display within a Drawer component. */
 
 const WizardPanel = props => {
   var _props$panels;
@@ -14711,9 +14694,34 @@ const WizardPanel = props => {
     props.onComplete && props.onComplete();
   };
   const theme = useTheme$1();
+  const stepsContainer = {
+    position: "absolute",
+    overflowY: "auto",
+    left: 0,
+    right: 0,
+    bottom: 64,
+    top: 178
+  };
   const containerStyle = {
     backgroundColor: props.cardContent ? "rgb(239, 242, 246)" : "rgb(255,255,255)"
   };
+  const tabBarStyle = {
+    borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+    zIndex: 1,
+    background: "#ffffff",
+    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px"
+  };
+  const scrolledTabBarStyle = {
+    zIndex: 1,
+    borderBottom: "none",
+    background: "#ffffff",
+    padding: props.display === "drawer" ? 2 : "0px 0px 16px 0px",
+    boxShadow: "0px 2px 4px -4px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px -10px rgba(0,0,0,0.12)"
+  };
+  const bottomBarStyle = _extends({}, bottomBarDefaultStyle, {
+    borderTop: "none",
+    boxShadow: props.display === "drawer" ? "0px -4px 8px -4px rgba(0,0,0,0.12)" : "none"
+  });
   useEffect(() => {
     var _containerRef$current;
     (_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.scrollTo == null ? void 0 : _containerRef$current.scrollTo({
@@ -14727,9 +14735,9 @@ const WizardPanel = props => {
   }, [props.completed]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(AppBar$1, {
-      position: "sticky",
+      position: props.display === "drawer" ? "sticky" : "relative",
       component: "div",
-      className: scrollTrigger ? classes.scrolledTabBar : classes.tabBar,
+      sx: scrollTrigger ? scrolledTabBarStyle : tabBarStyle,
       elevation: 0,
       color: "default",
       children: /*#__PURE__*/jsx(Header, {
@@ -14740,7 +14748,7 @@ const WizardPanel = props => {
     }), /*#__PURE__*/jsx(Box$1, {
       ref: containerRef,
       sx: containerStyle,
-      className: classes.container,
+      style: props.display === "drawer" ? stepsContainer : undefined,
       children: /*#__PURE__*/jsx(SwipeableViews, {
         axis: theme.direction === "rtl" ? "x-reverse" : "x",
         index: activeStep,
@@ -14757,7 +14765,6 @@ const WizardPanel = props => {
       })
     }), /*#__PURE__*/jsx(Box$1, {
       style: bottomBarStyle,
-      className: classes.scrolledBottomBar,
       children: /*#__PURE__*/jsxs(Box$1, {
         className: classes.buttonContainer,
         children: [/*#__PURE__*/jsx(Button, {
@@ -14818,9 +14825,12 @@ WizardPanel.defaultProps = {
   completed: false,
   completeButtonText: "Finish",
   disableComplete: false,
-  completing: false
+  completing: false,
+  display: "drawer"
 };
 WizardPanel.propTypes = {
+  /** Where to display the panel, a dialog or drawer. */
+  display: PropTypes.oneOf(["drawer"], ["dialog"]),
   /** The data defining the wizard steps and content. */
   panels: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.any.isRequired,