@canmingir/link 1.2.27 → 1.2.30

package/src/components/settings/drawer/presets-options.jsx

@@ -7,11 +7,12 @@ import { presetOptions } from "../../../theme/options/presets";
 export default function PresetsOptions({ value, onChange }) {
   return (
     <Box
-      columnGap={2}
-      rowGap={1.5}
-      display="grid"
-      gridTemplateColumns="repeat(3, 1fr)"
-    >
+      sx={{
+        columnGap: 2,
+        rowGap: 1.5,
+        display: "grid",
+        gridTemplateColumns: "repeat(3, 1fr)"
+      }}>
       {presetOptions.map((option) => {
         const selected = value === option.name;
 

package/src/components/settings/drawer/settings-drawer.jsx

@@ -32,10 +32,13 @@ export default function SettingsDrawer() {
   const renderHead = (
     <Stack
       direction="row"
-      alignItems="center"
-      justifyContent="space-between"
-      sx={{ py: 2, pr: 1, pl: 2.5 }}
-    >
+      sx={{
+        alignItems: "center",
+        justifyContent: "space-between",
+        py: 2,
+        pr: 1,
+        pl: 2.5
+      }}>
       <Typography variant="h6" sx={{ flexGrow: 1 }}>
         Settings
       </Typography>

package/src/components/settings/drawer/stretch-options.jsx

@@ -30,16 +30,16 @@ export default function StretchOptions({ value, onChange }) {
     >
       <Stack
         direction="row"
-        alignItems="center"
-        justifyContent="space-between"
         sx={{
+          alignItems: "center",
+          justifyContent: "space-between",
           width: 0.24,
           transition: (theme) => theme.transitions.create(["width"]),
+
           ...(value && {
             width: 0.5,
-          }),
-        }}
-      >
+          })
+        }}>
         <Iconify
           icon={
             value ? "eva:arrow-ios-back-fill" : "eva:arrow-ios-forward-fill"

package/src/layouts/DashboardLayout/header.jsx

@@ -46,12 +46,13 @@ export default function Header({ onOpenNav }) {
       {projectBar && <ProjectBar />}
 
       <Stack
-        flexGrow={1}
         direction="row"
-        alignItems="center"
-        justifyContent="flex-end"
         spacing={{ xs: 0.5, sm: 1 }}
-      >
+        sx={{
+          flexGrow: 1,
+          alignItems: "center",
+          justifyContent: "flex-end"
+        }}>
         <NotificationsPopover />
 
         <SettingsButton />

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -39,7 +39,6 @@ export default function NavMini({ only }) {
           }}
         />
       )}
-
       <Stack
         sx={{
           pb: 2,
@@ -60,16 +59,15 @@ export default function NavMini({ only }) {
         <Box sx={{ flexGrow: 1 }} />
         <Stack
           direction={"column"}
-          alignItems={"center"}
-          justifyItems={"center"}
           sx={{
+            alignItems: "center",
+            justifyItems: "center",
+            gap: 2,
             marginBottom: 0,
             position: lgUp ? "static" : "fixed",
             bottom: lgUp ? "auto" : 66,
-            width: "100%",
-          }}
-          gap={2}
-        >
+            width: "100%"
+          }}>
           {actionButtons &&
             actionButtons.map((Action, index) => (
               <Box key={index} component={Action}></Box>

package/src/layouts/DashboardLayout/nav-vertical.jsx

@@ -123,16 +123,15 @@ export default function NavVertical({ openNav, onCloseNav }) {
       <Box sx={{ flexGrow: 1 }} />
       <Stack
         direction={"column"}
-        alignItems={"center"}
-        justifyItems={"center"}
         sx={{
+          alignItems: "center",
+          justifyItems: "center",
+          gap: 2,
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%",
-        }}
-        gap={2}
-      >
+          width: "100%"
+        }}>
         {actionButtons &&
           actionButtons?.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -171,7 +170,6 @@ export default function NavVertical({ openNav, onCloseNav }) {
       }}
     >
       <NavToggleButton />
-
       {lgUp ? (
         <Stack
           sx={{
@@ -187,10 +185,12 @@ export default function NavVertical({ openNav, onCloseNav }) {
         <Drawer
           open={openNav}
           onClose={onCloseNav}
-          PaperProps={{
-            sx: {
-              width: NAV.W_VERTICAL,
-            },
+          slotProps={{
+            paper: {
+              sx: {
+                width: NAV.W_VERTICAL,
+              },
+            }
           }}
         >
           {renderContent}

package/src/layouts/FullScreenLayout/FullScreenLayout.jsx

@@ -63,7 +63,11 @@ export default function FullScreenLayout() {
         return (
           <>
             {renderHorizontal}
-            <Stack width={"100%"} sx={{ mt: 7 }}>
+            <Stack
+              sx={{
+                width: "100%",
+                mt: 7
+              }}>
               <Outlet />
             </Stack>
           </>

package/src/layouts/FullScreenLayout/nav-vertical.jsx

@@ -62,16 +62,15 @@ export default function NavVertical({ openNav, onCloseNav }) {
       <Box sx={{ flexGrow: 1 }} />
       <Stack
         direction={"column"}
-        alignItems={"center"}
-        justifyItems={"center"}
         sx={{
+          alignItems: "center",
+          justifyItems: "center",
+          gap: 2,
           marginBottom: lgUp ? 3 : 0,
           position: lgUp ? "static" : "fixed",
           bottom: lgUp ? "auto" : 66,
-          width: "100%",
-        }}
-        gap={2}
-      >
+          width: "100%"
+        }}>
         {actionButtons &&
           actionButtons.map((Action, index) => (
             <Box key={index} component={Action}></Box>
@@ -105,7 +104,6 @@ export default function NavVertical({ openNav, onCloseNav }) {
       }}
     >
       <NavToggleButton />
-
       {lgUp ? (
         <Stack
           sx={{
@@ -121,10 +119,12 @@ export default function NavVertical({ openNav, onCloseNav }) {
         <Drawer
           open={openNav}
           onClose={onCloseNav}
-          PaperProps={{
-            sx: {
-              width: NAV.W_VERTICAL,
-            },
+          slotProps={{
+            paper: {
+              sx: {
+                width: NAV.W_VERTICAL,
+              },
+            }
           }}
         >
           {renderContent}

package/src/layouts/MainLayout/footer.jsx

@@ -104,12 +104,11 @@ export default function Footer() {
 
             <Stack
               direction="row"
-              justifyContent={{ xs: "center", md: "flex-start" }}
               sx={{
+                justifyContent: { xs: "center", md: "flex-start" },
                 mt: 3,
-                mb: { xs: 5, md: 0 },
-              }}
-            ></Stack>
+                mb: { xs: 5, md: 0 }
+              }}></Stack>
           </Grid>
 
           <Grid xs={12} md={6}>
@@ -118,9 +117,10 @@ export default function Footer() {
                 <Stack
                   key={list.headline}
                   spacing={2}
-                  alignItems={{ xs: "center", md: "flex-start" }}
-                  sx={{ width: 1 }}
-                >
+                  sx={{
+                    alignItems: { xs: "center", md: "flex-start" },
+                    width: 1
+                  }}>
                   <Typography component="div" variant="overline">
                     {list.headline}
                   </Typography>

package/src/layouts/MainLayout/header.jsx

@@ -61,8 +61,10 @@ export default function Header() {
           {mdUp && <NavDesktop data={topMenu} />}
 
           <Stack
-            alignItems="center"
             direction={{ xs: "row", md: "row-reverse" }}
+            sx={{
+              alignItems: "center"
+            }}
           >
             <NotificationsPopover />
 
@@ -74,7 +76,6 @@ export default function Header() {
           </Stack>
         </Container>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );

package/src/layouts/MainLayout/nav/desktop/nav-list.jsx

@@ -103,18 +103,19 @@ function NavSubList({ data, subheader, sx, ...other }) {
   return (
     <Stack
       spacing={2}
-      flexGrow={1}
-      alignItems="flex-start"
-      sx={{
+      {...other}
+      sx={[{
+        flexGrow: 1,
+        alignItems: "flex-start",
         pb: 2,
+
         ...(dashboard && {
           pb: 0,
           maxWidth: { md: 1 / 3, lg: 540 },
         }),
-        ...sx,
-      }}
-      {...other}
-    >
+
+        ...sx
+      }, ...(Array.isArray(other.sx) ? other.sx : [other.sx])]}>
       <ListSubheader
         disableSticky
         sx={{
@@ -126,7 +127,6 @@ function NavSubList({ data, subheader, sx, ...other }) {
       >
         {subheader}
       </ListSubheader>
-
       {data.map((item) =>
         dashboard ? (
           <NavItemDashboard key={item.title} path={item.path} />

package/src/layouts/MainLayout/nav/mobile/index.jsx

@@ -36,15 +36,16 @@ export default function NavMobile({ data }) {
       <IconButton onClick={handleOpenMenu} sx={{ ml: 1 }}>
         <SvgColor src="/assets/icons/navbar/ic_menu_item.svg" />
       </IconButton>
-
       <Drawer
         open={openMenu}
         onClose={handleCloseMenu}
-        PaperProps={{
-          sx: {
-            pb: 5,
-            width: 260,
-          },
+        slotProps={{
+          paper: {
+            sx: {
+              pb: 5,
+              width: 260,
+            },
+          }
         }}
       >
         <Scrollbar>

package/src/layouts/TwoSideLayout/TwoSideLayout.jsx

@@ -1,5 +1,5 @@
 import Container from "@mui/material/Container";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid";
 import React from "react";
 import Typography from "@mui/material/Typography";
 // ----------------------------------------------------------------------
@@ -12,14 +12,20 @@ export default function TwoSideLayout({ rows, title }) {
       <Typography variant="h4" sx={{ mb: 5 }}>
         {title}
       </Typography>
-
       {Object.values(rowData).map((array, index) => {
         const eleman_sayisi = array.length;
         const grid_sayisi = 12 / eleman_sayisi;
         return (
           <Grid container spacing={3} key={index}>
             {array.map((component, i) => (
-              <Grid item xs={12} sm={6} md={grid_sayisi} key={i}>
+              <Grid
+                key={i}
+                size={{
+                  xs: 12,
+                  sm: 6,
+                  md: grid_sayisi,
+                }}
+              >
                 {component}
               </Grid>
             ))}

package/src/layouts/auth/classic.jsx

@@ -44,20 +44,20 @@ export default function AuthClassicLayout({ image, title }) {
 
   const renderSection = (
     <Stack
-      flexGrow={1}
       spacing={10}
-      alignItems="center"
-      justifyContent="center"
       sx={{
+        flexGrow: 1,
+        alignItems: "center",
+        justifyContent: "center",
+
         ...bgGradient({
           color: alpha(
             theme.palette.background.default,
             theme.palette.mode === "light" ? 0.88 : 0.94
           ),
           imgUrl: "https://minimals.cc/assets/background/overlay_2.jpg",
-        }),
-      }}
-    >
+        })
+      }}>
       <Typography variant="h3" sx={{ maxWidth: 480, textAlign: "center" }}>
         {title || "Hi, Welcome back"}
       </Typography>

package/src/layouts/auth/modern.jsx

@@ -59,11 +59,10 @@ export default function AuthModernLayout({ image }) {
 
   const renderSection = (
     <Stack
-      flexGrow={1}
       sx={{
-        position: "relative",
-      }}
-    >
+        flexGrow: 1,
+        position: "relative"
+      }}>
       <Box
         component="img"
         alt="auth"

package/src/layouts/common/ProjectBar/index.jsx

@@ -175,10 +175,11 @@ function ProjectBar() {
   const renderButton = (
     <Stack
       direction="row"
-      alignItems="center"
-      justifyContent={"flex-start"}
-      sx={{ width: "100%" }}
-    >
+      sx={{
+        alignItems: "center",
+        justifyContent: "flex-start",
+        width: "100%"
+      }}>
       <IconButton
         data-cy="open-select-bar-button"
         onClick={search.onTrue}
@@ -270,7 +271,6 @@ function ProjectBar() {
   return (
     <>
       {renderButton}
-
       <Dialog
         data-cy="select-bar-dialog"
         fullWidth={true}
@@ -281,17 +281,19 @@ function ProjectBar() {
           enter: theme.transitions.duration.shortest,
           exit: 0,
         }}
-        PaperProps={{
-          sx: {
-            mt: 15,
-            overflow: "unset",
-          },
-        }}
         sx={{
           [`& .${dialogClasses.container}`]: {
             alignItems: "flex-start",
           },
         }}
+        slotProps={{
+          paper: {
+            sx: {
+              mt: 15,
+              overflow: "unset",
+            },
+          }
+        }}
       >
         <Box sx={{ p: 3, borderBottom: `solid 1px gray` }}>
           <InputBase

package/src/layouts/common/header-sim.jsx

@@ -41,11 +41,12 @@ export default function HeaderSim() {
       >
         <Logo />
 
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{
+          alignItems: "center"
+        }}>
           <SettingsButton />
         </Stack>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );

package/src/layouts/common/header-simple.jsx

@@ -52,7 +52,9 @@ export default function HeaderSimple({
           }),
         }}
       >
-        <Stack direction="row" alignItems="center" spacing={5}>
+        <Stack direction="row" spacing={5} sx={{
+          alignItems: "center"
+        }}>
           <Logo />
           <ProjectBar
             handleItemSelect={handleItemSelect}
@@ -60,7 +62,9 @@ export default function HeaderSimple({
             setSelectedItem={setSelectedItem}
           />
         </Stack>
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" spacing={1} sx={{
+          alignItems: "center"
+        }}>
           {mdUp && <NavDesktop data={topMenu} />}
           <NotificationsPopover />
 
@@ -69,7 +73,6 @@ export default function HeaderSimple({
           <AccountPopover />
         </Stack>
       </Toolbar>
-
       {offsetTop && <HeaderShadow />}
     </AppBar>
   );

package/src/layouts/common/notifications-popover/index.jsx

@@ -69,9 +69,13 @@ export default function NotificationsPopover() {
   const renderHead = (
     <Stack
       direction="row"
-      alignItems="center"
-      sx={{ py: 2, pl: 2.5, pr: 1, minHeight: 68 }}
-    >
+      sx={{
+        alignItems: "center",
+        py: 2,
+        pl: 2.5,
+        pr: 1,
+        minHeight: 68
+      }}>
       <Typography variant="h6" sx={{ flexGrow: 1 }}>
         Notifications
       </Typography>
@@ -140,28 +144,29 @@ export default function NotificationsPopover() {
           <Iconify icon="solar:bell-bing-bold-duotone" width={24} />
         </Badge>
       </IconButton>
-
       <Drawer
         open={drawer.value}
         onClose={drawer.onFalse}
         anchor="right"
         slotProps={{
           backdrop: { invisible: true },
-        }}
-        PaperProps={{
-          sx: { width: 1, maxWidth: 420 },
-        }}
-      >
+
+          paper: {
+            sx: { width: 1, maxWidth: 420 },
+          }
+        }}>
         {renderHead}
 
         <Divider />
 
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ pl: 2.5, pr: 1 }}
-        >
+          sx={{
+            alignItems: "center",
+            justifyContent: "space-between",
+            pl: 2.5,
+            pr: 1
+          }}>
           {renderTabs}
           <IconButton onClick={handleMarkAllAsRead}>
             <Iconify icon="solar:settings-bold-duotone" />

package/src/layouts/common/notifications-popover/notification-item.jsx

@@ -23,15 +23,14 @@ export default function NotificationItem({ notification }) {
         />
       ) : (
         <Stack
-          alignItems="center"
-          justifyContent="center"
           sx={{
+            alignItems: "center",
+            justifyContent: "center",
             width: 40,
             height: 40,
             borderRadius: "50%",
-            bgcolor: "background.neutral",
-          }}
-        >
+            bgcolor: "background.neutral"
+          }}>
           <Box
             component="img"
             src={`/assets/icons/notification/${
@@ -54,8 +53,6 @@ export default function NotificationItem({ notification }) {
       secondary={
         <Stack
           direction="row"
-          alignItems="center"
-          sx={{ typography: "caption", color: "text.disabled" }}
           divider={
             <Box
               sx={{
@@ -67,7 +64,11 @@ export default function NotificationItem({ notification }) {
               }}
             />
           }
-        >
+          sx={{
+            alignItems: "center",
+            typography: "caption",
+            color: "text.disabled"
+          }}>
           {fToNow(notification.createdAt)}
           {notification.category}
         </Stack>
@@ -101,7 +102,9 @@ export default function NotificationItem({ notification }) {
   );
 
   const projectAction = (
-    <Stack alignItems="flex-start">
+    <Stack sx={{
+      alignItems: "flex-start"
+    }}>
       <Box
         sx={{
           p: 1.5,
@@ -142,9 +145,10 @@ export default function NotificationItem({ notification }) {
       <Stack
         spacing={1}
         direction={{ xs: "column", sm: "row" }}
-        flexGrow={1}
-        sx={{ minWidth: 0 }}
-      >
+        sx={{
+          flexGrow: 1,
+          minWidth: 0
+        }}>
         <ListItemText
           disableTypography
           primary={
@@ -160,8 +164,6 @@ export default function NotificationItem({ notification }) {
           secondary={
             <Stack
               direction="row"
-              alignItems="center"
-              sx={{ typography: "caption", color: "text.disabled" }}
               divider={
                 <Box
                   sx={{
@@ -173,7 +175,11 @@ export default function NotificationItem({ notification }) {
                   }}
                 />
               }
-            >
+              sx={{
+                alignItems: "center",
+                typography: "caption",
+                color: "text.disabled"
+              }}>
               <span>2.3 GB</span>
               <span>30 min ago</span>
             </Stack>
@@ -188,7 +194,13 @@ export default function NotificationItem({ notification }) {
   );
 
   const tagsAction = (
-    <Stack direction="row" spacing={0.75} flexWrap="wrap" sx={{ mt: 1.5 }}>
+    <Stack
+      direction="row"
+      spacing={0.75}
+      sx={{
+        flexWrap: "wrap",
+        mt: 1.5
+      }}>
       <Label variant="outlined" color="info">
         Design
       </Label>

package/src/lib/APIPath/APIPath.jsx

@@ -37,8 +37,8 @@ const APIPath = ({
   return (
     <Grid container sx={styles.root} data-cy="api-path">
       <Grid sx={styles.firstElement} />
-      <Grid item>
-        <Grid container item sx={styles.content}>
+      <Grid>
+        <Grid container sx={styles.content}>
           {isMethodDisabled ? (
             <Typography data-cy="method-text">{method}</Typography>
           ) : (