@sinco/react 1.1.1-rc.5 → 1.1.1-rc.7

package/index.js

@@ -6789,6 +6789,29 @@ const paletteAdpro = {
 
 var _palette$action;
 const components = {
+  MuiTabs: {
+    styleOverrides: {
+      root: {
+        minHeight: 40
+      }
+    }
+  },
+  MuiTab: {
+    styleOverrides: {
+      labelIcon: {
+        paddingTop: 10,
+        paddingBottom: 10
+      },
+      root: {
+        minHeight: "40px",
+        root: {
+          "& .MuiTabs-root": {
+            minHeight: "40px"
+          }
+        }
+      }
+    }
+  },
   MuiDataGrid: {
     defaultProps: {
       columnHeaderHeight: 35,
@@ -6974,7 +6997,7 @@ const components = {
       },
       icon: {
         color: (_palette$action = palette.action) == null ? void 0 : _palette$action.active,
-        opacity: "26%"
+        opacity: "70%"
       },
       root: {
         fontFamily: 'Roboto',
@@ -7179,6 +7202,9 @@ const components = {
   },
   MuiFilledInput: {
     styleOverrides: {
+      root: {
+        height: 48
+      },
       sizeSmall: {
         height: 38
       }
@@ -7200,7 +7226,8 @@ const components = {
           paddingBlock: 14
         },
         ".MuiFilledInput-input.MuiInputBase-inputSizeSmall": {
-          paddingBlock: "none"
+          paddingTop: 16,
+          paddingBottom: 2
         },
         ".MuiFilledInput-input": {
           paddingTop: 22,
@@ -7341,13 +7368,31 @@ const components = {
         padding: "4px 0px 4px 0px"
       },
       root: {
-        padding: "7.5px 0px 7.5px 0px"
+        padding: "7.5px 16px 7.5px 16px"
       }
     }
   },
   MuiMenuItem: {
-    defaultProps: {
-      dense: true
+    styleOverrides: {
+      dense: {
+        height: 28,
+        minHeight: 28,
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "14.3px",
+          letterSpacing: 0.15
+        }
+      },
+      root: {
+        padding: "7px 16px 7px 16px",
+        ".MuiMenuList-root": {
+          height: 34,
+          minHeight: 34
+        },
+        ".MuiListItemText-root > .MuiTypography-root": {
+          lineHeight: "20px",
+          letterSpacing: 0.17
+        }
+      }
     }
   },
   MuiTable: {
@@ -14306,6 +14351,8 @@ const borderStyles = {
 };
 const DrawerComponent = ({
   title,
+  backgroundColor,
+  color,
   children,
   actions,
   showActions,
@@ -14325,7 +14372,7 @@ const DrawerComponent = ({
     anchor: _anchor,
     open: open,
     onClose: onClose,
-    sx: {
+    sx: Object.assign({
       '& .MuiBackdrop-root': {
         backgroundColor: '#F0f0f099 !important',
         backdropFilter: 'blur(4px)'
@@ -14333,7 +14380,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, {
@@ -14344,7 +14391,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,
@@ -14352,6 +14399,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",
@@ -14360,7 +14410,6 @@ const DrawerComponent = ({
   }, children), stateActions && /*#__PURE__*/React__default.createElement(Stack$1, {
     alignItems: _anchorActions,
     gap: 1,
-    mt: 0.5,
     py: 1.5,
     px: 1,
     sx: {
@@ -20066,26 +20115,29 @@ const DynamicColor = async src => {
   };
 };
 
-const useDynamicColor = url => {
-  const [primary, setPrimary] = useState(SincoTheme.palette.primary);
-  const [secondary, setSecondary] = useState(SincoTheme.palette.secondary);
-  const [background, setBackground] = useState(SincoTheme.palette.background);
+const useDynamicColor = (url, theme) => {
   const [loading, setLoading] = useState(false);
   useEffect(() => {
-    DynamicColor(url).then(({
-      primaryColor,
-      secondaryColor,
-      backgroundColor
-    }) => {
-      setPrimary(primaryColor);
-      setSecondary(secondaryColor);
-      setBackground(backgroundColor);
-      setLoading(true);
-    });
-  }, [url]);
-  SincoTheme.palette.primary = primary;
-  SincoTheme.palette.secondary = secondary;
-  SincoTheme.palette.background = background;
+    const fetchDynamicColor = () => {
+      const dynamicColorPromise = DynamicColor(url);
+      dynamicColorPromise.then(({
+        primaryColor,
+        secondaryColor,
+        backgroundColor
+      }) => {
+        const updatedTheme = Object.assign({}, theme, {
+          palette: Object.assign({}, theme.palette, {
+            primary: primaryColor,
+            secondary: secondaryColor,
+            background: backgroundColor
+          })
+        });
+        theme.setTheme(updatedTheme);
+        setLoading(true);
+      });
+    };
+    fetchDynamicColor();
+  }, [url, theme]);
   return {
     loading
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.1.1-rc.5",
+  "version": "1.1.1-rc.7",
   "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/Hooks/useDynamicColor.d.ts

@@ -1,3 +1,3 @@
-export declare const useDynamicColor: (url: string) => {
+export declare const useDynamicColor: (url: string, theme: any) => {
     loading: boolean;
 };