@m4l/styles 0.0.21 → 0.0.22

package/theme/overrides/M4LExtendedComponents/M4LDynamicFilter.d.ts

@@ -346,6 +346,7 @@ export declare const M4LDynamicFilter: (theme: Theme) => {
                         gap: string;
                         widht: string;
                         minWidht: string;
+                        height: string;
                         '& .M4LDynamicFilter-popoverFilterHeader': {
                             background: string;
                             display: string;
@@ -361,8 +362,13 @@ export declare const M4LDynamicFilter: (theme: Theme) => {
                             };
                         };
                         '& .M4LDynamicFilter-popoverContainerFields': {
+                            height: string;
                             "& .M4LDynamicFilter-containerStringFilter,\n                                  & .M4LDynamicFilter-containerBooleanFilter,\n                                  & .M4LDynamicFilter-containerNumberFilter,\n                                  & .M4LDynamicFilter-containerDateTimeFilter\n                                ": {
+                                [x: string]: string | {
+                                    gap: string;
+                                };
                                 display: string;
+                                height: string;
                                 flexDirection: string;
                                 padding: string;
                                 gap: string;

package/theme/overrides/M4LExtendedComponents/M4LPager.d.ts

@@ -0,0 +1,34 @@
+import { Theme } from '@mui/material/styles';
+export declare const M4LPager: (theme: Theme) => {
+    M4LPager: {
+        styleOverrides: {
+            '&.M4LPager-root': {
+                test: string;
+                '& .M4LPager-skeletonRoot': {
+                    width: string;
+                    display: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    marginLeft: string;
+                    '& .M4LPager-skeletonRowsPerPage': {
+                        display: string;
+                        gridTemplateColumns: string;
+                        gridGap: string;
+                        marginRight: string;
+                    };
+                    '& .M4LPager-skeletonButtonContainer': {
+                        display: string;
+                        marginLeft: string;
+                        '& .M4LPager-skeletonIconButton': {
+                            display: string;
+                            justifyContent: string;
+                            alignItems: string;
+                            width: string;
+                            height: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts

@@ -99,6 +99,7 @@ export declare const M4LSideBar: (theme: Theme) => {
                                     backgroundColor: string;
                                     '&:hover': {
                                         background: string;
+                                        cursor: string;
                                     };
                                 };
                                 '&.M4LSideBar-itemMainActive': {
@@ -106,6 +107,7 @@ export declare const M4LSideBar: (theme: Theme) => {
                                         background: string;
                                         '&:hover': {
                                             background: string;
+                                            cursor: string;
                                         };
                                     };
                                     '& .M4LSideBar-navItemRootContent': {
@@ -349,6 +351,7 @@ export declare const M4LSideBar: (theme: Theme) => {
                                     backgroundColor: string;
                                     '&:hover': {
                                         background: string;
+                                        cursor: string;
                                     };
                                 };
                                 '&.M4LSideBar-itemMainActive': {
@@ -356,6 +359,7 @@ export declare const M4LSideBar: (theme: Theme) => {
                                         background: string;
                                         '&:hover': {
                                             background: string;
+                                            cursor: string;
                                         };
                                     };
                                     '& .M4LSideBar-navItemRootContent': {

package/theme/overrides/M4LExtendedComponents/{index.9ecb9eb5.js → index.28d622ba.js}

@@ -1,5 +1,5 @@
 import { alpha as t } from "@mui/material/styles";
-import { alpha as e } from "@mui/system";
+import { alpha as r } from "@mui/system";
 const i = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
@@ -83,7 +83,7 @@ const i = (o) => ({
           height: "29px",
           [o.breakpoints.down("sm")]: {
             height: "100%",
-            padding: "4px 8px 4px 8px"
+            padding: "4px"
           }
         },
         "& .M4LDynamicFilter-containerApplyedFilters": {
@@ -154,6 +154,7 @@ const i = (o) => ({
             gap: "0px",
             widht: "max-content",
             minWidht: "220px",
+            height: "fit-content",
             "& .M4LDynamicFilter-popoverFilterHeader": {
               background: o.palette.state.default,
               display: "flex",
@@ -170,15 +171,20 @@ const i = (o) => ({
               }
             },
             "& .M4LDynamicFilter-popoverContainerFields": {
+              height: "fit-content",
               [`& .M4LDynamicFilter-containerStringFilter,
                                   & .M4LDynamicFilter-containerBooleanFilter,
                                   & .M4LDynamicFilter-containerNumberFilter,
                                   & .M4LDynamicFilter-containerDateTimeFilter
                                 `]: {
                 display: "flex",
+                height: "auto",
                 flexDirection: "column",
                 padding: "8px 8px 0 8px",
-                gap: "8px"
+                gap: "8px",
+                [o.breakpoints.down("sm")]: {
+                  gap: "12px"
+                }
               }
             },
             "& .M4LCommonActions-root": {
@@ -1072,14 +1078,16 @@ const i = (o) => ({
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   "&:hover": {
-                    background: o.palette.state.default
+                    background: o.palette.state.default,
+                    cursor: "pointer"
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
                     "&:hover": {
-                      background: t(o.palette.state.active || "#fff", 0.18)
+                      background: t(o.palette.state.active || "#fff", 0.24),
+                      cursor: "pointer"
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
@@ -1762,7 +1770,7 @@ const i = (o) => ({
       }
     }
   }
-}), w = (o) => ({
+}), f = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -1974,8 +1982,22 @@ const i = (o) => ({
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.paragraphDens
                 },
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.primary
+                "& .MuiButtonBase-root": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.text.primary
+                  }
+                },
+                "& .Mui-disabled": {
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.text.disabled
+                  }
+                },
+                "& .MuiButtonBase-root:hover": {
+                  background: o.palette.state.default,
+                  color: o.palette.state.hover,
+                  "& .M4LIcon-icon": {
+                    backgroundColor: o.palette.state.hover
+                  }
                 }
               }
             }
@@ -2105,7 +2127,7 @@ const i = (o) => ({
             boxShadow: o.customShadows.z2,
             "&.M4LAreasViewer-selected": {
               background: o.palette.state.active12,
-              boxShadow: `inset 1px 2px 3px 0 ${e(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
+              boxShadow: `inset 1px 2px 3px 0 ${r(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
             }
           }
         },
@@ -2232,7 +2254,7 @@ const i = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: e(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
+          background: r(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -2295,7 +2317,7 @@ const i = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), w = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -2401,23 +2423,26 @@ const i = (o) => ({
       overflow: "hidden"
     }
   }
-}), v = (o) => ({
+}), h = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
         "& .MuiAvatar-root": {
           width: "36px",
           height: "36px",
-          borderRadius: "4px"
+          borderRadius: "4px",
+          background: o.palette.patronus?.blazeOrange[40]
         },
         test: "root"
       }
     }
   }
-}), h = (o) => ({
+}), v = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
-      "&.M4LAccountPopover-root": {}
+      "&.M4LAccountPopover-root": {
+        borderRadius: "6px"
+      }
     }
   },
   M4LAccountPopoverPopover: {
@@ -2427,17 +2452,21 @@ const i = (o) => ({
         display: "flex",
         flexDirection: "column",
         gap: "8px",
+        borderRadius: "6px",
         "& .MuiPaper-root": {
           display: "flex",
           flexDirection: "column",
           gap: "8px",
-          padding: "16px"
+          padding: "8px",
+          borderRadius: "6px",
+          boxShadow: o.customShadows.z3,
+          background: o.palette.background.background
         },
         "& .M4LAccountPopover-containerAppVersion": {
           display: "flex",
           borderBottom: "2px solid",
           borderColor: o.palette.state.default,
-          paddingBottom: "8px"
+          padding: "4px 4px 8px 4px"
         },
         "& .M4LAccountPopover-containerMenuItems": {
           "& .M4LAccountPopover-menuItem": {
@@ -2735,7 +2764,7 @@ const i = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), T = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -2787,7 +2816,7 @@ const i = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), D = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -2798,7 +2827,7 @@ const i = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), m = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -3106,7 +3135,7 @@ const i = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), F = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -3131,7 +3160,7 @@ const i = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "& .M4LBadge-root": {
@@ -3139,38 +3168,321 @@ const i = (o) => ({
       }
     }
   }
+}), O = (o) => ({
+  M4LDataGrid: {
+    styleOverrides: {
+      "&.M4LDataGrid-root": {
+        test: "root",
+        "& .M4LDataGrid-actions": {
+          ...o.typography.caption,
+          position: "absolute",
+          left: "0px",
+          right: "0px",
+          top: "0px",
+          height: o.spacing(5.5),
+          padding: 0,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          [o.breakpoints.up("sm")]: {
+            padding: o.spacing(0, 1.5)
+          },
+          "& .M4LDataGrid-rowsCount": {
+            display: "flex",
+            "& .M4LDataGrid-rowsCountLabel": {},
+            "& .M4LDataGrid-rowsCountValue": {
+              marginLeft: o.spacing(2),
+              paddingTop: "2px",
+              paddingBottom: "2px",
+              paddingLeft: "4px",
+              paddingRight: "4px",
+              border: `1px solid ${o.palette.divider}`
+            }
+          },
+          "& .M4LDataGrid-actionFilter": {},
+          "& .M4LDataGrid-actionSettings": {}
+        },
+        "& .M4LDataGrid-tableContaniner": {
+          display: "flex",
+          flexDirection: "column",
+          position: "absolute",
+          top: "40px",
+          bottom: "0px",
+          left: "0px",
+          right: "0px",
+          overflow: "hidden",
+          "& .M4LDataGrid-wrapperDataGridCss": {
+            position: "absolute",
+            bottom: "0px",
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            "& .rdg ": {
+              userSelect: "initial",
+              height: "100%",
+              contentVisibility: "unset",
+              overflow: "scroll",
+              borderRadius: "5px",
+              "--rdg-grid-inline-size": "0px",
+              "--rdg-header-background-color": o.palette.grid?.sectionHeader,
+              "--rdg-row-selected-background-color": o.palette.state.hover,
+              "--rdg-row-hover-background-color": o.palette.grid?.rowHover,
+              "--rdg-background-color": o.palette.background.default,
+              "--rdg-selection-color": o.palette.primary.main,
+              "--row-selected-hover-background-color": o.palette.mode === "light" ? o.palette.primary.LightSelectedHover : o.palette.primary.DarkSelectedHover,
+              "--rdg-checkbox-color": o.palette.primary.main,
+              "--rdg-checkbox-focus-color": t(
+                o.palette.primary.main,
+                o.palette.action.selectedOpacity
+              ),
+              "--rdg-border-color": o.palette.divider
+            },
+            "& .rdg::-webkit-scrollbar": {
+              width: "6px",
+              height: "6px",
+              borderRadius: "3px",
+              backgroundColor: "transparent"
+            },
+            "& .rdg::-webkit-scrollbar-track": {
+              backgroundColor: "transparent",
+              border: "0px solid transparent"
+            },
+            "& .rdg::-webkit-scrollbar-corner": {
+              backgroundColor: "transparent"
+            },
+            "& ::-webkit-scrollbar-thumb": {
+              borderRadius: "10px",
+              backgroundColor: o.palette.divider,
+              border: "0px solid transparent"
+            },
+            '& [role="columnheader"]': {
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            "& .rdg-cell": {
+              fontFamily: o.typography.body2.fontFamily,
+              fontWeight: o.typography.body2.fontWeight,
+              fontSize: o.typography.body2.fontSize,
+              color: o.palette.text.secondary,
+              borderBottom: `1px solid ${o.palette.divider}`,
+              borderRight: "0px solid transparent",
+              position: "relative",
+              "&.rdg-cell-frozen": {
+                position: "sticky"
+              },
+              "&:after": {
+                content: '""',
+                borderRight: `1px solid ${o.palette.divider}`,
+                position: "absolute",
+                right: "0px",
+                top: "25%",
+                bottom: "25%"
+              },
+              "& .m4l_icon": {
+                height: "100%"
+              }
+            },
+            "& [aria-selected=true]": {
+              backgroundColor: o.palette.state.active
+            },
+            "& .rdg-cell.rdg-cell-align-left": {
+              textAlign: "left"
+            },
+            "& .rdg-cell.rdg-cell-align-center": {
+              textAlign: "center"
+            },
+            "& .rdg-cell.rdg-cell-align-right": {
+              textAlign: "right"
+            },
+            "& .rdg-row .rdg-cell-frozen-last:after": {
+              borderRight: "0px solid transparent",
+              boxShadow: "none"
+            },
+            "& .rdg-row :last-child:after": {
+              borderRight: "0px solid transparent"
+            },
+            "& .rdg-header-row .rdg-cell": {
+              fontFamily: o.typography.subtitle2.fontFamily,
+              fontWeight: o.typography.subtitle2.fontWeight,
+              fontSize: o.typography.subtitle2.fontSize,
+              color: o.palette.text.primary,
+              borderRight: "0px solid transparent",
+              boxShadow: "none",
+              "&.rdg-cell-frozen-last": {
+                "&:after": {
+                  borderRight: "0px solid transparent"
+                },
+                boxShadow: "var(--rdg-frozen-cell-box-shadow)"
+              },
+              "& .rdg-sort-arrow": {
+                width: o.spacing(1),
+                margin: `0 ${o.spacing(0.5)}`
+              }
+            },
+            "& .rdg-header-row :last-child.rdg-cell": {
+              borderTopRightRadius: "5px",
+              "&:after": {
+                borderRight: "0px solid transparent"
+              }
+            },
+            "& .filter_cell_div": {
+              paddingLeft: o.spacing(0.5),
+              paddingRight: o.spacing(0.5)
+            },
+            "& .rdg-header-sort-cell": {
+              width: "100%",
+              flexGrow: "1",
+              alignItems: "center"
+            },
+            '& [aria-columnsort="ASC"]': {
+              borderTop: `2px solid ${o.palette.primary.main}`
+            },
+            '& [aria-columnsort="DESC"]': {
+              borderBottom: `2px solid ${o.palette.primary.main}`
+            }
+          }
+        },
+        "&.M4LDataGrid-withNoPager": {}
+      }
+    }
+  },
+  M4LDataGridDensityPopover: {
+    styleOverrides: {
+      "&.M4LDataGrid-actionDensityPopover": {
+        test: "root"
+      }
+    }
+  },
+  M4LDataGridActionsFormatter: {
+    styleOverrides: {
+      "&.M4LDataGrid-actionsFormatter": {
+        test: "root"
+      }
+    }
+  }
+}), H = (o) => ({
+  M4LPager: {
+    styleOverrides: {
+      "&.M4LPager-root": {
+        test: "root",
+        "& .M4LPager-skeletonRoot": {
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginLeft: o.spacing(3),
+          "& .M4LPager-skeletonRowsPerPage": {
+            display: "grid",
+            gridTemplateColumns: "auto auto",
+            gridGap: o.spacing(1),
+            marginRight: o.spacing(3)
+          },
+          "& .M4LPager-skeletonButtonContainer": {
+            display: "flex",
+            marginLeft: o.spacing(3),
+            "& .M4LPager-skeletonIconButton": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: o.spacing(3.75),
+              height: o.spacing(3.75)
+            }
+          }
+        }
+      }
+    }
+  }
+}), W = (o) => ({
+  M4LCheckBox: {
+    styleOverrides: {
+      "&.M4LCheckBox-root": {
+        display: "flex",
+        flexDirection: "column",
+        gap: o.spacing(0.5),
+        "& .MuiTypography-root": {
+          color: o.palette.text.primary,
+          ...o.typography.body
+        },
+        ".M4LCheckBox-small .MuiButtonBase-root": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        ".M4LCheckBox-medium .MuiButtonBase-root": {
+          width: "24px",
+          height: "24px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiButtonBase-root": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: o.palette.state?.active12
+        },
+        ".Mui-focusVisible": {
+          border: "1px solid",
+          borderColor: o.palette.state?.focus
+        },
+        ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
+          fill: o.palette.state?.hover
+        },
+        ".M4LCheckBox-checkTypography .MuiTypography-root": {
+          ...o.typography.body
+        },
+        ".M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
+          fill: o.palette.state?.default
+        },
+        ".M4LCheckBox-stateDisabled .MuiTypography-root": {
+          color: o.palette.text.disabled
+        },
+        ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+          outline: "#fff00"
+        }
+      }
+    }
+  }
 });
 export {
-  m as A,
-  D as B,
-  z as C,
-  P as D,
-  V as E,
+  A,
+  T as B,
+  m as C,
+  z as D,
+  P as E,
+  F,
+  H as G,
+  W as H,
   b as M,
   i as a,
-  T as b,
+  D as b,
   n as c,
   p as d,
   d as e,
   l as f,
   M as g,
   s as h,
-  F as i,
+  V as i,
   c as j,
-  u as k,
-  x as l,
-  g as m,
-  y as n,
-  f as o,
-  L as p,
-  w as q,
-  v as r,
+  O as k,
+  u as l,
+  x as m,
+  g as n,
+  y as o,
+  w as p,
+  L as q,
+  f as r,
   h as s,
-  k as t,
-  C as u,
-  I as v,
-  B as w,
-  S as x,
-  R as y,
-  A as z
+  v as t,
+  k as u,
+  C as v,
+  I as w,
+  B as x,
+  S as y,
+  R as z
 };