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

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.311"
 }

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>