@ebubekirylmaz/link-test 1.2.45 → 1.2.46

package/src/lib/AddItemWizard/AddItemWizard.jsx

@@ -73,10 +73,11 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
       <Stack
         container
         direction="column"
-        alignItems="center"
-        justifyContent="center"
         spacing={2}
-      >
+        sx={{
+          alignItems: "center",
+          justifyContent: "center"
+        }}>
         <SparkleInput
           prop="name"
           value={newItems[0].details.name}
@@ -94,7 +95,9 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
         <Typography variant="subtitle1" color={"gray"} sx={{ mb: -2 }}>
           Service Type
         </Typography>
-        <Stack direction="row" alignItems="center">
+        <Stack direction="row" sx={{
+          alignItems: "center"
+        }}>
           <Typography>Single</Typography>
           <Switch
             data-cy="type-switch"
@@ -109,8 +112,14 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
 
   const Service = () => {
     return (
-      <Grid container justifyContent="center" mt={1} spacing={2}>
-        <Grid item xs={5}>
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          justifyContent: "center",
+          mt: 1
+        }}>
+        <Grid size={5}>
           <Stack
             sx={{
               borderStyle: "none dotted none none",
@@ -128,9 +137,11 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
             <Typography
               variant="subtitle1"
               color={"gray"}
-              textAlign={"center"}
-              sx={{ marginTop: 2, marginBottom: 1 }}
-            >
+              sx={{
+                textAlign: "center",
+                marginTop: 2,
+                marginBottom: 1
+              }}>
               Select an Icon
             </Typography>
             <SelectAvatar
@@ -142,7 +153,7 @@ function AddItemWizard({ onSubmit, items, steps, stepExp }) {
             />
           </Stack>
         </Grid>
-        <Grid item xs={7}>
+        <Grid size={7}>
           <SparkleInput
             prop="description"
             value={newItems[1].details.description}

package/src/lib/CustomBreadcrumbs/CustomBreadcrumbs.jsx

@@ -19,7 +19,9 @@ export default function CustomBreadcrumbs({
 
   return (
     <Box sx={{ ...sx }}>
-      <Stack direction="row" alignItems="center">
+      <Stack direction="row" sx={{
+        alignItems: "center"
+      }}>
         <Box sx={{ flexGrow: 1 }}>
           {heading && (
             <Typography variant="h4" gutterBottom>
@@ -43,7 +45,6 @@ export default function CustomBreadcrumbs({
 
         {action && <Box sx={{ flexShrink: 0 }}> {action} </Box>}
       </Stack>
-
       {!!moreLink && (
         <Box sx={{ mt: 2 }}>
           {moreLink.map((href) => (

package/src/lib/Flow/layouts/CardLayout.jsx

@@ -383,9 +383,10 @@ export function AvatarRoleCard({
       >
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="flex-start"
-        >
+          sx={{
+            justifyContent: "space-between",
+            alignItems: "flex-start"
+          }}>
           {leftContent}
           {topRightContent}
         </Stack>

package/src/lib/Flow/nodes/DefaultCard.jsx

@@ -70,13 +70,12 @@ const DefaultNodeCard = ({
         {subtitle && (
           <Typography
             variant="body2"
-            color="text.secondary"
             sx={{
+              color: "text.secondary",
               textAlign: "center",
               fontSize: 11,
-              mb: metaEntries.length ? 0.5 : 0,
-            }}
-          >
+              mb: metaEntries.length ? 0.5 : 0
+            }}>
             {subtitle}
           </Typography>
         )}
@@ -87,13 +86,12 @@ const DefaultNodeCard = ({
               <Typography
                 key={key}
                 variant="caption"
-                color="text.secondary"
                 sx={{
+                  color: "text.secondary",
                   textAlign: "center",
                   display: "block",
-                  fontSize: 10,
-                }}
-              >
+                  fontSize: 10
+                }}>
                 {key}: {String(value)}
               </Typography>
             ))}

package/src/lib/IconSelector/IconSelector.jsx

@@ -18,7 +18,11 @@ export default function IconSelector({
     setEmojiDialogOpen(true);
   };
   return (
-    <Stack alignContent={"center"} justifyContent={"center"}>
+    <Stack
+      sx={{
+        alignContent: "center",
+        justifyContent: "center"
+      }}>
       <Stack>
         <IconButton
           data-cy="avatar-select-button"

package/src/lib/ItemSummary/ItemSummary.jsx

@@ -17,15 +17,15 @@ export default function ItemSummary({ newItem }) {
       <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
         Summary
       </DialogContentText>
-      <Grid container spacing={1} mb={4}>
+      <Grid container spacing={1} sx={{
+        mb: 4
+      }}>
         <Grid
-          item
-          xs={newItem.description ? 4 : 12}
           sx={{
             justifyContent: "center",
             display: "flex",
           }}
-        >
+          size={newItem.description ? 4 : 12}>
           <Card
             sx={{
               bgcolor: (theme) => theme.palette.background.paper,
@@ -37,7 +37,12 @@ export default function ItemSummary({ newItem }) {
             <CardContent
               children={
                 <>
-                  <Typography variant="h6" textAlign={"center"} mb={2}>
+                  <Typography
+                    variant="h6"
+                    sx={{
+                      textAlign: "center",
+                      mb: 2
+                    }}>
                     {newItem.name}
                   </Typography>
                   <Stack
@@ -63,7 +68,7 @@ export default function ItemSummary({ newItem }) {
           </Card>
         </Grid>
         {newItem.description && (
-          <Grid item xs={8}>
+          <Grid size={8}>
             <Card sx={{ minHeight: "100%" }}>
               <CardHeader title="Description" />
               <CardContent>

package/src/lib/ItemSummary/ItemsSummary.jsx

@@ -19,15 +19,15 @@ export default function ItemsSummary({ newItems }) {
       <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
         Summary
       </DialogContentText>
-      <Grid container mb={4}>
+      <Grid container sx={{
+        mb: 4
+      }}>
         <Grid
-          item
-          xs={5}
           sx={{
             justifyContent: "center",
             display: "flex",
           }}
-        >
+          size={5}>
           <Stack
             sx={{
               height: "100%",
@@ -45,27 +45,34 @@ export default function ItemsSummary({ newItems }) {
             >
               <CardHeader
                 title={"Project Summary"}
-                titleTypographyProps={{
-                  variant: "subtitle1",
-                  textAlign: "center",
-                  color: "text.secondary",
+                slotProps={{
+                  title: {
+                    variant: "subtitle1",
+                    textAlign: "center",
+                    color: "text.secondary",
+                  }
                 }}
               />
               <CardContent
                 children={
                   <>
-                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        textAlign: "center",
+                        mb: 2
+                      }}>
                       {newItems[0].details.name}
                     </Typography>
                     <Stack
-                      padding={1}
                       sx={{
+                        padding: 1,
+
                         "& .svg-color": {
                           background: (theme) =>
                             `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
-                        },
-                      }}
-                    >
+                        }
+                      }}>
                       <SvgColor
                         src={`https://api.iconify.design/${newItems[0].details.icon?.slice(
                           1,
@@ -87,17 +94,15 @@ export default function ItemsSummary({ newItems }) {
           </Stack>
         </Grid>
         <Grid
-          item
-          xs={2}
           sx={{
             display: "flex",
             alignContent: "center",
             justifyContent: "center",
           }}
-        >
+          size={2}>
           <Divider orientation="vertical" sx={{ borderStyle: "dashed" }} />
         </Grid>
-        <Grid item xs={5}>
+        <Grid size={5}>
           <Stack
             sx={{
               height: "100%",
@@ -108,27 +113,34 @@ export default function ItemsSummary({ newItems }) {
             <Card>
               <CardHeader
                 title={"Service Summary"}
-                titleTypographyProps={{
-                  variant: "subtitle1",
-                  textAlign: "center",
-                  color: "text.secondary",
+                slotProps={{
+                  title: {
+                    variant: "subtitle1",
+                    textAlign: "center",
+                    color: "text.secondary",
+                  }
                 }}
               />
               <CardContent
                 children={
                   <>
-                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                    <Typography
+                      variant="h6"
+                      sx={{
+                        textAlign: "center",
+                        mb: 2
+                      }}>
                       {newItems[1].details.name}
                     </Typography>
                     <Stack
-                      padding={1}
                       sx={{
+                        padding: 1,
+
                         "& .svg-color": {
                           background: (theme) =>
                             `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
-                        },
-                      }}
-                    >
+                        }
+                      }}>
                       <SvgColor
                         src={`https://api.iconify.design/${newItems[1].details.icon?.slice(
                           1,

package/src/lib/ResourceMenu/ResourceMenu.jsx

@@ -125,7 +125,9 @@ const ResourceMenu = (props) => {
           top: anchor?.clientY || 0,
           left: anchor?.clientX || 0,
         }}
-        TransitionComponent={Fade}
+        slots={{
+          transition: Fade
+        }}
       >
         <MenuItem onClick={addResource} data-cy="add-resource">
           <SourceIcon />

package/src/lib/SparkleInput/SparkleInput.jsx

@@ -11,41 +11,44 @@ export default function SparkleInput({
 }) {
   return (
     <TextField
-      inputProps={{
-        "data-cy": prop,
-      }}
       autoFocus
       margin="dense"
       label={prop}
       fullWidth={true}
       value={value || ""}
       onChange={onChange}
-      InputLabelProps={{
-        sx: { color: (theme) => theme.palette.text.primary },
-      }}
-      InputProps={{
-        endAdornment: sparkle && (
-          <InputAdornment position="end">
-            <IconButton>
-              <SvgIcon>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fill="white"
-                    d="M7.398 12.809a1.042 1.042 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.336 2.336 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.335 2.335 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.336 2.336 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.333 2.333 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.331 3.331 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.344 3.344 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.336 3.336 0 0 0-.8-1.31a3.373 3.373 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.358 3.358 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.09 1.09 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.075 1.075 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.068 1.068 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.078 2.078 0 0 0 1.316 1.316l.195.063l-.18.06a2.076 2.076 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.075 2.075 0 0 0-1.32-1.323"
-                  />
-                </svg>
-              </SvgIcon>
-            </IconButton>
-          </InputAdornment>
-        ),
-      }}
       sx={{ textTransform: "capitalize" }}
       {...others}
-    />
+      slotProps={{
+        input: {
+          endAdornment: sparkle && (
+            <InputAdornment position="end">
+              <IconButton>
+                <SvgIcon>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fill="white"
+                      d="M7.398 12.809a1.042 1.042 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.336 2.336 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.335 2.335 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.336 2.336 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.333 2.333 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.331 3.331 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.344 3.344 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.336 3.336 0 0 0-.8-1.31a3.373 3.373 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.358 3.358 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.09 1.09 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.075 1.075 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.068 1.068 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.078 2.078 0 0 0 1.316 1.316l.195.063l-.18.06a2.076 2.076 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.075 2.075 0 0 0-1.32-1.323"
+                    />
+                  </svg>
+                </SvgIcon>
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
+
+        htmlInput: {
+          "data-cy": prop,
+        },
+
+        inputLabel: {
+          sx: { color: (theme) => theme.palette.text.primary },
+        }
+      }} />
   );
 }

package/src/lib/TableSelectedAction/TableSelectedAction.jsx

@@ -19,8 +19,9 @@ export default function TableSelectedAction({
   return (
     <Stack
       direction="row"
-      alignItems="center"
-      sx={{
+      {...other}
+      sx={[{
+        alignItems: "center",
         pl: 1,
         pr: 2,
         top: 0,
@@ -30,19 +31,18 @@ export default function TableSelectedAction({
         height: 58,
         position: "absolute",
         bgcolor: "primary.lighter",
+
         ...(dense && {
           height: 38,
         }),
-        ...sx,
-      }}
-      {...other}
-    >
+
+        ...sx
+      }, ...(Array.isArray(other.sx) ? other.sx : [other.sx])]}>
       <Checkbox
         indeterminate={!!numSelected && numSelected < rowCount}
         checked={!!rowCount && numSelected === rowCount}
         onChange={(event) => onSelectAllRows(event.target.checked)}
       />
-
       <Typography
         variant="subtitle2"
         sx={{
@@ -56,7 +56,6 @@ export default function TableSelectedAction({
       >
         {numSelected} selected
       </Typography>
-
       {action && action}
     </Stack>
   );

package/src/pages/ConfigError.jsx

@@ -20,7 +20,9 @@ const ConfigErrorDialog = () => {
   return (
     <Dialog fullWidth open>
       <DialogTitle>
-        <Stack direction="row" alignItems="center">
+        <Stack direction="row" sx={{
+          alignItems: "center"
+        }}>
           <Box
             component="span"
             sx={{ display: "flex", alignItems: "center", mr: 1 }}

package/src/theme/overrides/default-props.jsx

@@ -105,11 +105,14 @@ export function defaultProps(theme) {
     },
     MuiCardHeader: {
       defaultProps: {
-        titleTypographyProps: { variant: "h6" },
-        subheaderTypographyProps: {
-          variant: "body2",
-          marginTop: theme.spacing(0.5),
-        },
+        slotProps: {
+          title: { variant: "h6" },
+
+          subheader: {
+            variant: "body2",
+            marginTop: theme.spacing(0.5),
+          }
+        }
       },
     },
     MuiChip: {
@@ -134,12 +137,15 @@ export function defaultProps(theme) {
     },
     MuiListItemText: {
       defaultProps: {
-        primaryTypographyProps: {
-          typography: "subtitle2",
-        },
-        secondaryTypographyProps: {
-          component: "span",
-        },
+        slotProps: {
+          primary: {
+            typography: "subtitle2",
+          },
+
+          secondary: {
+            component: "span",
+          }
+        }
       },
     },
     MuiPaper: {

package/src/widgets/Login/CognitoLogin.jsx

@@ -180,28 +180,33 @@ export default function CognitoLogin() {
           )}
         </Box>
 
-        <Typography variant="h4" fontWeight={700} gutterBottom>
+        <Typography variant="h4" gutterBottom sx={{
+          fontWeight: 700
+        }}>
           {titles[mode].heading}
         </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography variant="body2" sx={{
+          color: "text.secondary"
+        }}>
           {titles[mode].sub}
         </Typography>
       </Box>
-
       <Stack spacing={2}>
         <TextField
           label="Email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           fullWidth
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
-              </InputAdornment>
-            ),
-          }}
           sx={inputSx}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <EmailOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+                </InputAdornment>
+              ),
+            }
+          }}
         />
 
         {mode !== "confirm" && (
@@ -211,17 +216,19 @@ export default function CognitoLogin() {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: passwordAdornment,
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: passwordAdornment,
+              }
+            }}
           />
         )}
 
@@ -232,28 +239,30 @@ export default function CognitoLogin() {
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LockOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    edge="end"
-                    size="small"
-                    tabIndex={-1}
-                  >
-                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <LockOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                      edge="end"
+                      size="small"
+                      tabIndex={-1}
+                    >
+                      {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }
+            }}
           />
         )}
 
@@ -263,20 +272,21 @@ export default function CognitoLogin() {
             value={code}
             onChange={(e) => setCode(e.target.value)}
             fullWidth
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <CheckOutlined
-                    sx={{ color: "text.secondary", fontSize: 22 }}
-                  />
-                </InputAdornment>
-              ),
-            }}
             sx={inputSx}
+            slotProps={{
+              input: {
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <CheckOutlined
+                      sx={{ color: "text.secondary", fontSize: 22 }}
+                    />
+                  </InputAdornment>
+                ),
+              }
+            }}
           />
         )}
       </Stack>
-
       {mode === "login" && (
         <Stack spacing={1.5}>
           <Button
@@ -297,7 +307,6 @@ export default function CognitoLogin() {
           </Button>
         </Stack>
       )}
-
       {mode === "signup" && (
         <Stack spacing={1.5}>
           <Button
@@ -318,7 +327,6 @@ export default function CognitoLogin() {
           </Button>
         </Stack>
       )}
-
       {mode === "confirm" && (
         <Button
           variant="contained"