IPG-Automotive-UK · m4manjesh · Dec 10, 2024 · Nov 25, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "9.0.2",
+  "version": "10.0.0-2",
   "description": "React UI component library for IPG web applications",
   "author": {
     "name": "IPG-Automotive-UK"

diff --git a/src/AppHeader/AppHeader.tsx b/src/AppHeader/AppHeader.tsx
@@ -22,7 +22,12 @@ function AppHeader({
       })}
     >
       <Toolbar style={{ justifyContent: "space-between" }}>
-        <Box display="flex" alignItems="center">
+        <Box
+          sx={{
+            alignItems: "center",
+            display: "flex"
+          }}
+        >
           <IpgLogo
             textColour={mode === "light" ? "white" : "black"}
             sx={{
@@ -31,28 +36,42 @@ function AppHeader({
             }}
           />
         </Box>
-        <Box display="flex" alignItems="center">
+        <Box
+          sx={{
+            alignItems: "center",
+            display: "flex"
+          }}
+        >
           {appLogo ? (
             <span>{appLogo}</span>
           ) : (
             <Typography
               variant="h6"
-              fontSize="20px"
-              lineHeight="34px"
-              letterSpacing="0.05em"
-              fontWeight="600"
-              sx={theme => ({
-                color: "white",
-                ...theme.applyStyles("dark", {
-                  color: "#003063"
+              sx={[
+                {
+                  fontSize: "20px",
+                  fontWeight: "600",
+                  letterSpacing: "0.05em",
+                  lineHeight: "34px"
+                },
+                theme => ({
+                  color: "white",
+                  ...theme.applyStyles("dark", {
+                    color: "#003063"
+                  })
                 })
-              })}
+              ]}
             >
               <span>{appName}</span>
             </Typography>
           )}
         </Box>
-        <Box display="flex" alignItems="center">
+        <Box
+          sx={{
+            alignItems: "center",
+            display: "flex"
+          }}
+        >
           {children}
           <UserMenu
             username={username}

diff --git a/src/AppLauncher/AppLauncher.tsx b/src/AppLauncher/AppLauncher.tsx
@@ -82,7 +82,12 @@ function AppLauncher({
   // header logo
   const logoBox = (
     <Fragment>
-      <Box display="flex" justifyContent="center">
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center"
+        }}
+      >
         <VirtoLogo
           sx={theme => ({
             color: theme.palette.primary.main,
@@ -103,7 +108,12 @@ function AppLauncher({
   );
 
   return (
-    <Box px={2} py={3}>
+    <Box
+      sx={{
+        px: 2,
+        py: 3
+      }}
+    >
       {showLogo ? (
         <Fragment>
           {logoLinkUrl ? (
@@ -122,7 +132,13 @@ function AppLauncher({
           )}
         </Fragment>
       ) : null}
-      <Box display="flex" flexWrap="wrap" justifyContent="space-between">
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "space-between"
+        }}
+      >
         {appList.map(app => {
           return (
             <Paper
@@ -179,7 +195,11 @@ function AppLauncher({
           VIRTO Status
         </Link>
       </Box>
-      <Box flexGrow={1} />
+      <Box
+        sx={{
+          flexGrow: 1
+        }}
+      />
     </Box>
   );
 }

diff --git a/src/AppLayout/AppLayout.tsx b/src/AppLayout/AppLayout.tsx
@@ -1,4 +1,4 @@
-import { Box, CssBaseline, Drawer, Hidden } from "@mui/material";
+import { Box, CssBaseline, Drawer, useMediaQuery } from "@mui/material";
 import React, { Fragment, useState } from "react";
 
 import AppHeader from "../AppHeader";
@@ -26,9 +26,17 @@ function Layout({
   // define state for managing dynamic sidebar
   const [mobileOpen, setMobileOpen] = useState(false);
 
+  // check if screen is medium
+  const isMediumScreen = useMediaQuery(theme => theme.breakpoints.down("md"));
+
   return (
     <Fragment>
-      <Box height="100vh" display="flex">
+      <Box
+        sx={{
+          display: "flex",
+          height: "100vh"
+        }}
+      >
         <CssBaseline />
         <AppHeader
           appName={appName}
@@ -47,56 +55,40 @@ function Layout({
             }
           })}
         >
-          <Hidden mdUp>
-            <Drawer
-              variant="temporary"
-              anchor="left"
-              open={mobileOpen}
-              onClose={() => setMobileOpen(false)}
-              sx={{
-                "& .MuiDrawer-paper": {
-                  height: `calc(100% - 64px)`,
-                  paddingTop: "8px",
-                  top: "64px",
-                  width: sidebarWidth
-                }
-              }}
-            >
-              <Sidebar showLogo={false} showVersion={false}>
-                {sidebarContent}
-              </Sidebar>
-            </Drawer>
-          </Hidden>
-          <Hidden mdDown>
-            <Drawer
-              sx={{
-                "& .MuiDrawer-paper": {
-                  height: `calc(100% - 64px)`,
-                  paddingTop: "8px",
-                  top: "64px",
-                  width: sidebarWidth
-                }
-              }}
-              variant="permanent"
-              open
+          <Drawer
+            variant={isMediumScreen ? "temporary" : "permanent"}
+            anchor="left"
+            open={isMediumScreen ? mobileOpen : true}
+            onClose={isMediumScreen ? () => setMobileOpen(false) : undefined}
+            sx={theme => ({
+              "& .MuiDrawer-paper": {
+                height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
+                paddingTop: "8px",
+                top: theme.mixins.toolbar.minHeight,
+                width: sidebarWidth
+              }
+            })}
+          >
+            <Sidebar
+              showLogo={false}
+              showVersion={isMediumScreen ? false : appVersion !== undefined}
+              appVersion={appVersion}
             >
-              <Sidebar
-                showLogo={false}
-                showVersion={appVersion !== undefined}
-                appVersion={appVersion}
-              >
-                {sidebarContent}
-              </Sidebar>
-            </Drawer>
-          </Hidden>
+              {sidebarContent}
+            </Sidebar>
+          </Drawer>
         </Box>
         <Box
-          flexGrow={1}
-          display="flex"
-          flexDirection="column"
-          sx={theme => ({
-            background: theme.palette.background.default
-          })}
+          sx={[
+            {
+              display: "flex",
+              flexDirection: "column",
+              flexGrow: 1
+            },
+            theme => ({
+              background: theme.palette.background.default
+            })
+          ]}
         >
           <Box sx={theme => theme.mixins.toolbar} />
           <Box

diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx
@@ -102,17 +102,21 @@ export default function Autocomplete<
           label={label}
           error={error}
           helperText={helperText}
-          InputProps={{
-            ...params.InputProps,
-            className: readOnly ? "Mui-disabled label.Mui-disabled" : undefined
-          }}
-          InputLabelProps={{
-            ...params.InputLabelProps
-          }}
           name={name}
           margin={margin}
           required={required}
           variant={variant}
+          slotProps={{
+            input: {
+              ...params.InputProps,
+              className: readOnly
+                ? "Mui-disabled label.Mui-disabled"
+                : undefined
+            },
+            inputLabel: {
+              ...params.InputLabelProps
+            }
+          }}
         />
       )}
       renderOption={Option}

diff --git a/src/CanvasItem/CanvasItem.stories.jsx b/src/CanvasItem/CanvasItem.stories.jsx
@@ -89,7 +89,13 @@ const Template = args => {
   };
 
   return (
-    <Box width="100%" height="100%" onClick={onCanvasClick}>
+    <Box
+      onClick={onCanvasClick}
+      sx={{
+        height: "100%",
+        width: "100%"
+      }}
+    >
       <CanvasItem
         {...args}
         {...rectangle}
@@ -100,11 +106,15 @@ const Template = args => {
         onClick={onClick}
       >
         <Box
-          sx={theme => ({
-            background: theme.palette.grey[100]
-          })}
-          width="100%"
-          height="100%"
+          sx={[
+            {
+              height: "100%",
+              width: "100%"
+            },
+            theme => ({
+              background: theme.palette.grey[100]
+            })
+          ]}
         ></Box>
       </CanvasItem>
     </Box>

diff --git a/src/Card/DetailCard/DetailCard.tsx b/src/Card/DetailCard/DetailCard.tsx
@@ -29,13 +29,13 @@ function DetailCard({
   return (
     <Stack
       className="detail-card-container"
-      mt={1}
-      mb={3}
       sx={{
         display: "flex",
         flexDirection: "column",
         flexGrow: 1,
         height: "100%",
+        mb: 3,
+        mt: 1,
         width
       }}
     >
@@ -55,7 +55,11 @@ function DetailCard({
           overflow: "auto"
         }}
       >
-        <Box ml={0.5}>
+        <Box
+          sx={{
+            ml: 0.5
+          }}
+        >
           <Card>
             <Infographic media={media} />
             <FileDetails
@@ -69,9 +73,14 @@ function DetailCard({
           </Card>
         </Box>
         <Stack
-          ml={2}
           spacing={2}
-          sx={{ display: "flex", flexGrow: 1, mr: 0.5, width: "100%" }}
+          sx={{
+            display: "flex",
+            flexGrow: 1,
+            ml: 2,
+            mr: 0.5,
+            width: "100%"
+          }}
         >
           {content}
         </Stack>
@@ -133,11 +142,11 @@ function DetailCardHeader({
   return (
     <Fragment>
       <Box
-        m={1}
         sx={{
           display: "flex",
           flexDirection: "row",
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          m: 1
         }}
       >
         <Box sx={{ width: headerContentWidth }}>
@@ -170,7 +179,11 @@ function DetailCardHeader({
           {buttonsStack}
         </Box>
       </Box>
-      <Box mx={1}>
+      <Box
+        sx={{
+          mx: 1
+        }}
+      >
         {labels && labels.length > 0 && <LabelChipGroup chips={labelChips} />}
       </Box>
     </Fragment>

diff --git a/src/Card/SummaryCard/SummaryCard.stories.tsx b/src/Card/SummaryCard/SummaryCard.stories.tsx
@@ -98,7 +98,11 @@ const WithMoreOptionsButtonRef: StoryFn<SummaryCardProps> = args => {
           vertical: "bottom"
         }}
       >
-        <Box p={2}>
+        <Box
+          sx={{
+            p: 2
+          }}
+        >
           <Typography>
             This popover is anchored to the more options button
           </Typography>