@canmingir/link 1.2.26 → 1.2.30

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>
           ) : (

package/src/lib/APITree/APITree.jsx

@@ -194,7 +194,9 @@ function APITree() {
                   ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
                   : undefined
               }
-              TransitionComponent={Fade}
+              slots={{
+                transition: Fade
+              }}
             >
               <MenuItem
                 onClick={() => {

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/Label/Label.jsx

@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
 import React from "react";
 import { StyledLabel } from "./styles";
 import { forwardRef } from "react";
-import { useTheme } from "@mui/material/styles";
 
 const Label = forwardRef(
   (
@@ -17,8 +16,6 @@ const Label = forwardRef(
     },
     ref
   ) => {
-    const theme = useTheme();
-
     const iconStyles = {
       width: 16,
       height: 16,
@@ -35,7 +32,6 @@ const Label = forwardRef(
           ...(endIcon && { pr: 0.75 }),
           ...sx,
         }}
-        theme={theme}
         {...other}
       >
         {startIcon && <Box sx={{ mr: 0.75, ...iconStyles }}> {startIcon} </Box>}

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/index.jsx

@@ -23,8 +23,9 @@ export default function ThemeProvider({ children }) {
   const contrast = createContrast(settings.themeContrast, settings.themeMode);
   const presets = createPresets(settings.themeColorPresets);
 
-  const memoizedValue = useMemo(
-    () => ({
+  const theme = useMemo(() => {
+    // 1. Define the base configuration
+    const baseOptions = {
       palette: {
         ...palette(settings.themeMode),
         ...presets.palette,
@@ -38,56 +39,54 @@ export default function ThemeProvider({ children }) {
       shadows: shadows(settings.themeMode),
       shape: { borderRadius: 8 },
       typography,
-    }),
-    [
-      settings.themeMode,
-      settings.themeDirection,
-      presets.palette,
-      presets.customShadows,
-      contrast.palette,
-    ]
-  );
-
-  const theme = createTheme(memoizedValue);
-
-  theme.components = merge(componentsOverrides(theme), contrast.components, {
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          scrollbarColor:
-            theme.palette.mode === "dark"
-              ? `${theme.palette.grey[700]} ${theme.palette.background.default}`
-              : `${theme.palette.grey[500]} ${theme.palette.background.default}`,
-          scrollbarWidth: "thin",
-
-          "&::-webkit-scrollbar": {
-            width: 10,
-            height: 10,
-          },
+    };
 
-          "&::-webkit-scrollbar-track": {
-            backgroundColor: theme.palette.background.default,
-          },
-
-          "&::-webkit-scrollbar-thumb": {
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? theme.palette.grey[700]
-                : theme.palette.grey[500],
-            borderRadius: 8,
-            border: `2px solid ${theme.palette.background.default}`,
-          },
+    // 2. Create a temporary theme instance to generate overrides
+    // (Overrides often need access to the palette/spacing of the theme)
+    const tempTheme = createTheme(baseOptions);
 
-          "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor:
-              theme.palette.mode === "dark"
-                ? theme.palette.grey[600]
-                : theme.palette.grey[700],
+    // 3. Merge components into the configuration
+    baseOptions.components = merge(
+      componentsOverrides(tempTheme),
+      contrast.components,
+      {
+        MuiCssBaseline: {
+          styleOverrides: {
+            body: {
+              scrollbarColor:
+                tempTheme.palette.mode === "dark"
+                  ? `${tempTheme.palette.grey[700]} ${tempTheme.palette.background.default}`
+                  : `${tempTheme.palette.grey[500]} ${tempTheme.palette.background.default}`,
+              scrollbarWidth: "thin",
+              "&::-webkit-scrollbar": { width: 10, height: 10 },
+              "&::-webkit-scrollbar-track": {
+                backgroundColor: tempTheme.palette.background.default,
+              },
+              "&::-webkit-scrollbar-thumb": {
+                backgroundColor:
+                  tempTheme.palette.mode === "dark"
+                    ? tempTheme.palette.grey[700]
+                    : tempTheme.palette.grey[500],
+                borderRadius: 8,
+                border: `2px solid ${tempTheme.palette.background.default}`,
+              },
+            },
           },
         },
-      },
-    },
-  });
+      }
+    );
+
+    // 4. Return the final, complete theme
+    return createTheme(baseOptions);
+  }, [
+    settings.themeMode,
+    settings.themeDirection,
+    settings.themeContrast, // Added this to the dependency array
+    presets.palette,
+    presets.customShadows,
+    contrast.palette,
+    contrast.components,
+  ]);
 
   return (
     <MuiThemeProvider theme={theme}>

package/src/theme/overrides/components/loading-button.js

@@ -1,4 +1,4 @@
-import { loadingButtonClasses } from "@mui/lab/LoadingButton";
+import { buttonClasses } from "@mui/material/Button";
 
 // ----------------------------------------------------------------------
 
@@ -8,17 +8,17 @@ export function loadingButton(theme) {
       styleOverrides: {
         root: ({ ownerState }) => ({
           ...(ownerState.variant === "soft" && {
-            [`& .${loadingButtonClasses.loadingIndicatorStart}`]: {
+            [`& .${buttonClasses.loadingIndicatorStart}`]: {
               left: 10,
             },
-            [`& .${loadingButtonClasses.loadingIndicatorEnd}`]: {
+            [`& .${buttonClasses.loadingIndicatorEnd}`]: {
               right: 14,
             },
             ...(ownerState.size === "small" && {
-              [`& .${loadingButtonClasses.loadingIndicatorStart}`]: {
+              [`& .${buttonClasses.loadingIndicatorStart}`]: {
                 left: 10,
               },
-              [`& .${loadingButtonClasses.loadingIndicatorEnd}`]: {
+              [`& .${buttonClasses.loadingIndicatorEnd}`]: {
                 right: 10,
               },
             }),