aefis-core-ui 2.1.20 → 2.1.22

package/dist/index.modern.js

@@ -5286,7 +5286,8 @@ const useStyles$y = makeStyles(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
-    position: "relative"
+    position: "relative",
+    minHeight: 60
   },
   closeButton: {
     position: "absolute",
@@ -9952,13 +9953,13 @@ const Drawer = props => {
   };
   const theme = useTheme$1();
   const appBarStyle = {
-    primary: {
+    primary: _extends({
       color: "#ffffff"
-    },
-    secondary: {
+    }, props.appBarStyle),
+    secondary: _extends({
       backgroundColor: "#ffffff",
       color: "#333333"
-    }
+    }, props.appBarStyle)
   };
   const closeDrawerIconStyle = {
     color: props.headerColor === "secondary" ? "rgba(0, 0, 0, 0.54)" : "#ffffff",
@@ -10166,6 +10167,8 @@ Drawer.propTypes = {
   menuPositionOffset: PropTypes.oneOf(["none", "primaryMenu", "secondaryMenu"]),
   /** Additional styles to apply to the drawer paper. */
   paperStyle: PropTypes.any,
+  /** Additional styles to apply to the appbar. */
+  appBarStyle: PropTypes.any,
   /** Whether or not to show the header divider */
   headerDivider: PropTypes.bool,
   /** The component to use while rendering the drawer title */
@@ -14632,36 +14635,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"
@@ -14674,7 +14648,7 @@ const useStyles$5 = makeStyles(theme => ({
     marginRight: 8
   }
 }));
-const bottomBarStyle = {
+const bottomBarDefaultStyle = {
   background: "#ffffff",
   display: "flex",
   minHeight: 64,
@@ -14690,7 +14664,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;
@@ -14722,9 +14696,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({
@@ -14738,9 +14737,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, {
@@ -14751,7 +14750,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,
@@ -14768,7 +14767,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, {
@@ -14829,9 +14827,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,