rez-table-listing-mui 1.3.47 → 1.3.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.47",
+  "version": "1.3.49",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/table-settings/common/info-alert.tsx

@@ -14,7 +14,7 @@ const InfoAlert = ({
   width = "100%",
   top = 10,
   color = "#088AB2",
-  zIndex = 0,
+  zIndex = -1,
   position = "absolute",
 }: InfoAlertProps) => {
   return (
@@ -29,7 +29,9 @@ const InfoAlert = ({
         top,
       }}
     >
-      <Alert severity="info">{message}</Alert>
+      <Alert sx={{ borderRadius: "12px 12px 0 0 !important" }} severity="info">
+        {message}
+      </Alert>
     </Box>
   );
 };

package/src/listing/components/table-settings/common/listing-values.tsx

@@ -100,7 +100,16 @@ const ListingValues = ({
         <Loader />
       ) : (
         <>
-          <Box sx={{ p: 2, zIndex: 10 }}>
+          <Box
+            sx={{
+              p: 2,
+              border: "1px solid #1a191934",
+              backgroundColor: "#fdfdfc",
+              borderRadius: "12px",
+              top: 2,
+              height: "100%",
+            }}
+          >
             <Box sx={listingValuesStyles.headerContainer}>
               <Typography variant="h6" sx={listingValuesStyles.heading}>
                 {headerText}

package/src/listing/components/table-settings/components/column.tsx

@@ -421,7 +421,7 @@ const ColumnTab = ({
       sx={{
         display: "flex",
         flexDirection: "column",
-        gap: "0.75rem",
+        // gap: "0.75rem",
         height: "100%",
         position: "relative",
       }}
@@ -477,11 +477,11 @@ const ColumnTab = ({
                     message={
                       "Please select at least 1 value to display as tabs."
                     }
-                    width={"49%"}
-                    position="absolute"
-                    color="#088AB2"
-                    top={2}
-                    zIndex={1}
+                    width={"49.2%"}
+                    // position="absolute"
+                    // color="#088AB2"
+                    top={93}
+                    // zIndex={1}
                   />
                 }
               />

package/src/listing/components/table-settings/components/quick-tab.tsx

@@ -745,7 +745,7 @@ const QuickTab = ({
             collisionDetection={closestCenter}
             onDragEnd={handleDragEnd}
           >
-            <Grid sx={{ mt: 2 }} container spacing={2} size={12}>
+            <Grid sx={{ mt: 1 }} container spacing={2} size={12}>
               <ListingValues
                 buttonText="Show All"
                 onClick={handleShowAll}
@@ -771,11 +771,11 @@ const QuickTab = ({
                   <InfoAlert
                     message="Please select at least 1 and at most 5 values to display as
                                 tabs."
-                    width={"49%"}
-                    position="absolute"
-                    color="#088AB2"
-                    top={10}
-                    zIndex={1}
+                    width={"49.2%"}
+                    // position="absolute"
+                    // color="#088AB2"
+                    // top={10}
+                    zIndex={-1}
                   />
                 }
               />

package/src/listing/components/table-settings/components/toggle-button-switch.tsx

@@ -30,7 +30,13 @@ export default function CustomToggleSwitchButton({
   ...props
 }: { buttons: ToggleButtonTabsProps[] } & ToggleButtonGroupProps) {
   return (
-    <ToggleButtonGroup exclusive size="small" color="primary" {...props}>
+    <ToggleButtonGroup
+      exclusive
+      size="small"
+      color="primary"
+      sx={{ marginTop: "-4px", marginBottom: "6px" }}
+      {...props}
+    >
       {buttons.map((button) => (
         <ToggleButton
           key={button?.label}

package/src/listing/components/table-settings/style.ts

@@ -46,11 +46,11 @@ export const dialogStyles: DialogStyleProps = {
 
 export const listingValuesStyles: ListingValuesStyleProps = {
   wrapper: {
-    border: "0.5px solid #0E0C0B1F",
+    // border: "0.5px solid #0E0C0B1F",
     borderRadius: "8px",
-    minHeight: "10rem",
+    // minHeight: "10rem",
     backgroundColor: "#fdfdfc",
-    zIndex: 1,
+    zIndex: 10,
   },
   heading: { fontWeight: 400, color: "#0E0C0BB2", fontSize: "16px" },
   button: { fontSize: "13px", textTransform: "none", color: "#0E0C0BB2" },
@@ -91,6 +91,7 @@ export const TabsStyles: TabStyleProps = {
   mainTabSelect: {
     width: "65%",
     "& .MuiOutlinedInput-root": {
+      borderRadius: "6px",
       "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
         borderColor: "#7A5AF8",
       },
@@ -100,6 +101,7 @@ export const TabsStyles: TabStyleProps = {
   selectDropdownSeparator: {
     width: "30%",
     "& .MuiOutlinedInput-root": {
+      borderRadius: "6px",
       "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
         borderColor: "#7A5AF8",
       },