@applica-software-guru/react-admin 1.5.310 → 1.5.312

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.310"
+  "version": "1.5.312"
 }

package/src/components/Layout/Header/Profile/HeaderProfile.tsx

@@ -6,9 +6,14 @@ import { LogoutOutlined } from '@ant-design/icons';
 import { Popper } from '@mui/base';
 import { CardContent, ClickAwayListener, Grid, List, Paper, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useDataProvider, useGetIdentity, useLogout } from 'ra-core';
-import { useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 
-function HeaderProfile() {
+interface HeaderProfileProps {
+  roles?: ReactNode;
+}
+
+function HeaderProfile(props: HeaderProfileProps) {
+  const { roles } = props;
   const theme = useTheme();
   const dataProvider = useDataProvider();
   const { identity } = useGetIdentity();
@@ -26,6 +31,18 @@ function HeaderProfile() {
     }
   }, [dataProvider, hasProfilePic]);
 
+  const userRoles = useMemo(
+    () =>
+      React.isValidElement(roles) ? (
+        roles
+      ) : roles ? (
+        <>{roles}</>
+      ) : (
+        identity?.roles?.map((r: { name: string }) => r.name.replace('ROLE_', '')).join(',')
+      ),
+    [roles, identity]
+  );
+
   return (
     <>
       <HeaderToggleButton sx={{ p: 0.25, width: 'auto' }} onClick={handleToggle} value="profile" selected={open}>
@@ -62,7 +79,7 @@ function HeaderProfile() {
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
                             <Typography variant="body2" color="textSecondary">
-                              {identity?.roles?.map((r: { name: string }) => r.name.replace('ROLE_', '')).join(',')}
+                              {userRoles}
                             </Typography>
                           </Stack>
                         </Stack>

package/src/components/Layout/Sidebar/Drawer.tsx

@@ -1,10 +1,9 @@
-import { Drawer as MUIDrawer, useMediaQuery, useTheme } from '@mui/material';
+import { Drawer as MUIDrawer, SxProps, useMediaQuery, useTheme } from '@mui/material';
 import { useCallback } from 'react';
-import { useSx } from '@/hooks';
 import { isFunction } from 'lodash';
 
 type DrawerProps = {
-  PaperProps?: Record<string, any>;
+  sx?: SxProps;
   anchor?: 'left' | 'right' | 'top' | 'bottom';
   variant?: 'temporary' | 'persistent' | 'permanent';
   children: React.ReactNode;
@@ -12,8 +11,17 @@ type DrawerProps = {
   onClose?: () => void;
 };
 
+/**
+ * The Dialog component in Material UI has a maximum width of 444px at the 'xs' breakpoint.
+ * To maintain consistency, we use the same value as the max width for the Drawer component,
+ * but only for the 'sm' breakpoint and above.
+ * At the 'xs' breakpoint, the Drawer should occupy the full width.
+ * @see https://github.com/mui/material-ui/blob/v5.15.17/packages/mui-material/src/Dialog/Dialog.js
+ */
+const MAX_WIDTH = 444;
+
 function Drawer(props: DrawerProps) {
-  const { PaperProps, anchor = 'right', variant = 'temporary', open = false, onClose } = props;
+  const { sx, anchor = 'right', variant = 'temporary', open = false, onClose } = props;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const anchorPosition = isMobile ? 'bottom' : anchor;
@@ -22,15 +30,20 @@ function Drawer(props: DrawerProps) {
       onClose();
     }
   }, [onClose]);
-  const sx = useSx(PaperProps ?? {}, {
+  const sxProps = {
     backgroundImage: 'none',
     boxShadow: '-10px 4px 42px 0px rgba(0, 0, 0, 0.25)',
     width: {
-      xs: window.innerWidth,
-      sm: 480,
-      md: 600
+      sm: '30%'
+    },
+    maxWidth: {
+      sm: MAX_WIDTH
+    },
+    [theme.breakpoints.down('sm')]: {
+      width: '100% !important',
+      maxWidth: '100% !important'
     }
-  });
+  };
 
   return (
     <MUIDrawer
@@ -38,7 +51,7 @@ function Drawer(props: DrawerProps) {
       anchor={anchorPosition}
       onClose={handleClose}
       open={open}
-      PaperProps={{ sx: sx }}
+      PaperProps={{ sx: { ...sxProps, ...sx } }}
       variant={variant}
     >
       {props.children}

package/src/components/ra-lists/FilterSidebar/FilterSidebar.tsx

@@ -115,7 +115,7 @@ function FilterSidebar(props: FilterSidebarProps): ReactElement {
   }, [values, getValues, watchValues]);
 
   return (
-    <Sidebar PaperProps={{ sx: { height: '100%' } }} open={sidebarOpen} onClose={closeSidebar}>
+    <Sidebar sx={{ height: '100%' }} open={sidebarOpen} onClose={closeSidebar}>
       <Sidebar.Header>
         <Sidebar.HeaderText primary={translate('ra.action.add_filter')} />
         <Sidebar.HeaderAction>