@sinco/react 1.1.1-rc.9 → 1.1.2-rc.0

package/index.js

@@ -6717,16 +6717,16 @@ const palette = {
     contrastText: "#ffffff"
   },
   grey: {
-    50: "#F7F7F8",
-    100: "#EAEBEC",
-    200: "#DCDEE0",
-    300: "#CED1D4",
-    400: "#C4C7CA",
-    500: "#B9BDC1",
-    600: "#B2B7BB",
-    700: "#AAAEB3",
-    800: "#A2A6AB",
-    900: "#93989E",
+    50: "#FBFBFB",
+    100: "#F5F5F6",
+    200: "#EAEBEC",
+    300: "#DCDEEO",
+    400: "#CED1D4",
+    500: "#C4C7CA",
+    600: "#B9BDC1",
+    700: "#B2B7BB",
+    800: "#AAAEB3",
+    900: "#A2A6AB",
     A100: "#FFFFFF",
     A200: "#FFFFFF",
     A400: "#D4EAFF",
@@ -6746,7 +6746,7 @@ const palette = {
     focus: "#1018401f"
   },
   background: {
-    default: "#f5f5f5",
+    default: "#F1F0EE",
     paper: "#fff"
   },
   common: {
@@ -6899,6 +6899,39 @@ const paletteAdpro = {
 
 var _palette$action;
 const components = {
+  MuiSpeedDialIcon: {
+    styleOverrides: {
+      icon: {
+        height: 24,
+        width: 24
+      }
+    }
+  },
+  MuiSpeedDialAction: {
+    styleOverrides: {
+      fab: {
+        height: 40,
+        width: 40
+      }
+    }
+  },
+  MuiSpeedDial: {
+    styleOverrides: {
+      fab: {
+        height: 56,
+        width: 56
+      }
+    }
+  },
+  MuiAccordion: {
+    styleOverrides: {
+      root: {
+        ".MuiButtonBase-root.MuiAccordionSummary-root": {
+          minHeight: 44
+        }
+      }
+    }
+  },
   MuiTabs: {
     styleOverrides: {
       root: {
@@ -6909,16 +6942,10 @@ const components = {
   MuiTab: {
     styleOverrides: {
       labelIcon: {
-        paddingTop: 10,
-        paddingBottom: 10
+        paddingBlock: 10
       },
       root: {
-        minHeight: "40px",
-        root: {
-          "& .MuiTabs-root": {
-            minHeight: "40px"
-          }
-        }
+        minHeight: 40
       }
     }
   },
@@ -7019,13 +7046,6 @@ const components = {
       }
     }
   },
-  MuiToolbar: {
-    styleOverrides: {
-      root: {
-        height: "48px"
-      }
-    }
-  },
   MuiDrawer: {
     styleOverrides: {
       root: {
@@ -7087,13 +7107,16 @@ const components = {
   MuiToggleButton: {
     styleOverrides: {
       sizeSmall: {
-        height: 32
+        height: 32,
+        width: 32
       },
       sizeMedium: {
-        height: 38
+        height: 38,
+        width: 38
       },
       sizeLarge: {
-        height: 48
+        height: 48,
+        width: 48
       }
     }
   },
@@ -7107,7 +7130,7 @@ const components = {
       },
       icon: {
         color: (_palette$action = palette.action) == null ? void 0 : _palette$action.active,
-        opacity: "26%"
+        opacity: "70%"
       },
       root: {
         fontFamily: 'Roboto',
@@ -7213,7 +7236,7 @@ const components = {
     styleOverrides: {
       circular: {
         boxShadow: "0px 1px 18px 0px rgba(24, 39, 75, 0.12), 0px 6px 10px 0px rgba(24, 39, 75, 0.14), 0px 3px 5px -1px rgba(24, 39, 75, 0.20)",
-        "&.MuiFab-sizeSmall": {
+        "&.MuiFab-sizeSmall:not(.MuiSpeedDial-fab, .MuiSpeedDialAction-fab)": {
           height: 36,
           width: 36,
           ".MuiSvgIcon-fontSizeSmall": {
@@ -7303,10 +7326,10 @@ const components = {
         padding: 3
       },
       sizeMedium: {
-        padding: 12
+        padding: 8
       },
       sizeLarge: {
-        padding: 17
+        padding: 12
       }
     }
   },
@@ -7365,6 +7388,9 @@ const components = {
         "&.MuiAutocomplete-root .MuiOutlinedInput-root.MuiInputBase-sizeSmall": {
           paddingBlock: 3.5,
           paddingRight: 14,
+          "& .MuiAutocomplete-endAdornment": {
+            top: "calc(50% - 12px)"
+          },
           ".MuiIconButton-sizeSmall .MuiAutocomplete-popupIndicator": {
             padding: 5
           }
@@ -7485,6 +7511,18 @@ const components = {
   MuiList: {
     defaultProps: {
       dense: true
+    },
+    styleOverrides: {
+      padding: {
+        ".MuiListItem-padding": {
+          paddingBlock: 1
+        }
+      },
+      dense: {
+        ".MuiListItem-dense": {
+          padding: "0.25px 12px 0.25px 16px"
+        }
+      }
     }
   },
   MuiListItemButton: {
@@ -7493,26 +7531,57 @@ const components = {
         padding: "4px 0px 4px 0px"
       },
       root: {
-        padding: "7.5px 0px 7.5px 0px"
+        padding: "8.5px 16px"
       }
     }
   },
-  MuiMenuList: {
-    defaultProps: {
-      dense: false
-    },
+  MuiMenuItem: {
     styleOverrides: {
+      dense: {
+        height: 28,
+        minHeight: 28,
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "14.3px",
+          letterSpacing: 0.15
+        }
+      },
       root: {
-        ".MuiMenuItem-root": {
-          minHeight: 28
+        padding: "7px 16px 7px 16px",
+        ".MuiMenuList-root": {
+          height: 34,
+          minHeight: 34
+        },
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "20px",
+          letterSpacing: 0.17
+        },
+        ".MuiListItemIcon-root": {
+          minWidth: 32
         }
       }
     }
   },
+  MuiTableBody: {
+    styleOverrides: {
+      root: {
+        ".MuiTableCell-body.MuiTableCell-sizeMedium": {
+          padding: "16px !important"
+        }
+      }
+    }
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      sizeMedium: {
+        padding: 13
+      }
+    }
+  },
   MuiTable: {
     defaultProps: {
       size: "small"
-    }
+    },
+    styleOverrides: {}
   }
 };
 
@@ -14371,6 +14440,8 @@ const borderStyles = {
 };
 const DrawerComponent = ({
   title,
+  backgroundColor,
+  color,
   children,
   actions,
   showActions,
@@ -14390,7 +14461,7 @@ const DrawerComponent = ({
     anchor: _anchor,
     open: open,
     onClose: onClose,
-    sx: {
+    sx: Object.assign({
       '& .MuiBackdrop-root': {
         backgroundColor: '#F0f0f099 !important',
         backdropFilter: 'blur(4px)'
@@ -14398,7 +14469,7 @@ const DrawerComponent = ({
       '& .MuiDrawer-paper': Object.assign({
         width: width
       }, paperSx)
-    }
+    }, sx)
   }, /*#__PURE__*/React__default.createElement(Stack$1, {
     height: "100%"
   }, /*#__PURE__*/React__default.createElement(Stack$1, {
@@ -14409,7 +14480,7 @@ const DrawerComponent = ({
     px: 1,
     bgcolor: "secondary.main"
   }, /*#__PURE__*/React__default.createElement(Typography$1, {
-    sx: Object.assign({}, sx),
+    color: color,
     variant: "h6"
   }, title), /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: onClose,
@@ -14417,6 +14488,9 @@ const DrawerComponent = ({
   }, /*#__PURE__*/React__default.createElement(Close, {
     fontSize: "small"
   }))), /*#__PURE__*/React__default.createElement(Stack$1, {
+    sx: {
+      backgroundColor: backgroundColor
+    },
     py: 1.5,
     px: 1,
     overflow: "auto",
@@ -14425,7 +14499,6 @@ const DrawerComponent = ({
   }, children), stateActions && /*#__PURE__*/React__default.createElement(Stack$1, {
     alignItems: _anchorActions,
     gap: 1,
-    mt: 0.5,
     py: 1.5,
     px: 1,
     sx: {
@@ -14608,7 +14681,7 @@ function PageHeaderWraps({
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item);
 }
-const PageHeader = ({
+const PageHeaderComponent = ({
   title,
   subtitle,
   actions,
@@ -14621,11 +14694,11 @@ const PageHeader = ({
     bgcolor: "background.paper",
     sx: {
       boxShadow: theme => theme.shadows[1],
-      zIndex: 1400
+      zIndex: 1000
     }
   }, /*#__PURE__*/React__default.createElement(Stack$1, {
     px: 3,
-    py: 1,
+    py: 1.25,
     justifyContent: "space-between",
     flexDirection: "row",
     alignItems: "center"
@@ -14633,19 +14706,15 @@ const PageHeader = ({
     gap: 1.5,
     flexDirection: "row",
     alignItems: "center"
-  }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(PageHeaderWraps, {
+  }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(PageHeaderWraps, {
     color: "text.primary",
     item: title,
     variant: "h6"
-  })), subtitle && /*#__PURE__*/React__default.createElement(Stack$1, {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: 2
-  }, /*#__PURE__*/React__default.createElement(PageHeaderWraps, {
+  }), subtitle && /*#__PURE__*/React__default.createElement(PageHeaderWraps, {
     color: "text.secondary",
     item: subtitle,
     variant: "caption"
-  })))), actions && /*#__PURE__*/React__default.createElement(Stack$1, {
+  }))), actions && /*#__PURE__*/React__default.createElement(Stack$1, {
     gap: 1,
     alignItems: "center",
     flexDirection: "row"
@@ -20132,6 +20201,9 @@ const DynamicColor = async src => {
 };
 
 const useDynamicColor = url => {
+  const [primaryAdpro, setPrimaryAdpro] = useState(AdproSincoTheme.palette.primary);
+  const [secondaryAdpro, setSecondaryAdpro] = useState(AdproSincoTheme.palette.secondary);
+  const [backgroundAdpro, setBackgroundAdpro] = useState(AdproSincoTheme.palette.background);
   const [primary, setPrimary] = useState(SincoTheme.palette.primary);
   const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
   const [background, setBackground] = useState(SincoTheme.palette.background);
@@ -20145,15 +20217,21 @@ const useDynamicColor = url => {
       setPrimary(primaryColor);
       setSecondary(secondaryColor);
       setBackground(backgroundColor);
+      setPrimaryAdpro(primaryColor);
+      setSecondaryAdpro(secondaryColor);
+      setBackgroundAdpro(backgroundColor);
       setLoading(true);
     });
   }, [url]);
   SincoTheme.palette.primary = primary;
   SincoTheme.palette.secondary = secondary;
   SincoTheme.palette.background = background;
+  AdproSincoTheme.palette.primary = primaryAdpro;
+  AdproSincoTheme.palette.secondary = secondaryAdpro;
+  AdproSincoTheme.palette.background = backgroundAdpro;
   return {
     loading
   };
 };
 
-export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeader, PageHeaderWraps, SincoTheme, ToastNotification, useDynamicColor };
+export { AdproSincoTheme, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyState, EmptyStateImageUrls, FooterAction, PageHeaderComponent as PageHeader, PageHeaderComponent, PageHeaderWraps, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.1.1-rc.9",
+  "version": "1.1.2-rc.0",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/Drawer.d.ts

@@ -12,6 +12,8 @@ export interface DrawerComponentProperties {
     open: boolean;
     onClose: () => void;
     sx?: SxProps;
+    backgroundColor?: string;
+    color?: string;
 }
-export declare const DrawerComponent: ({ title, children, actions, showActions, anchor, anchorActions, width, open, onClose, sx, }: DrawerComponentProperties) => JSX.Element;
+export declare const DrawerComponent: ({ title, backgroundColor, color, children, actions, showActions, anchor, anchorActions, width, open, onClose, sx, }: DrawerComponentProperties) => JSX.Element;
 export { DrawerComponent as Drawer };

package/src/lib/Components/PageHeader.d.ts

@@ -12,4 +12,5 @@ export declare function PageHeaderWraps({ item, color, variant, }: {
     color: string;
     variant: Variant;
 }): JSX.Element;
-export declare const PageHeader: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
+export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, fixed, }: PageheaderProperties) => JSX.Element;
+export { PageHeaderComponent as PageHeader };