@applica-software-guru/react-admin 1.5.305 → 1.5.307-alpha.0

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.305"
+  "version": "1.5.307-alpha.0"
 }

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

@@ -7,7 +7,9 @@ type ContentProps = {
 
 function Content(props: ContentProps) {
   const { sx } = props;
-  return <Box sx={{ ...sx, flex: '1 1 auto', backgroundColor: 'background.paper' }}>{props.children}</Box>;
+  return (
+    <Box sx={{ ...sx, flex: '1 1 auto', backgroundColor: 'background.paper', overflowY: 'auto' }}>{props.children}</Box>
+  );
 }
 
 export { Content };

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

@@ -1,7 +1,6 @@
 import { Drawer as MUIDrawer, useMediaQuery, useTheme } from '@mui/material';
 import { useCallback } from 'react';
 import { useSx } from '@/hooks';
-import { useListViewContext } from '@/components/ra-lists';
 import { isFunction } from 'lodash';
 
 type DrawerProps = {
@@ -10,21 +9,21 @@ type DrawerProps = {
   variant?: 'temporary' | 'persistent' | 'permanent';
   children: React.ReactNode;
   open?: boolean;
+  onClose?: () => void;
 };
 
 function Drawer(props: DrawerProps) {
-  const { PaperProps, anchor = 'right', variant = 'temporary', open = false } = props;
+  const { PaperProps, anchor = 'right', variant = 'temporary', open = false, onClose } = props;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const anchorPosition = isMobile ? 'bottom' : anchor;
-  const { setSidebarOpen } = useListViewContext();
   const handleClose = useCallback(() => {
-    if (isFunction(setSidebarOpen)) {
-      setSidebarOpen(false);
+    if (isFunction(onClose)) {
+      onClose();
     }
-  }, [setSidebarOpen]);
+  }, [onClose]);
   const sx = useSx(PaperProps ?? {}, {
-    backgroundColor: 'background.default',
+    backgroundImage: 'none',
     boxShadow: '-10px 4px 42px 0px rgba(0, 0, 0, 0.25)',
     width: {
       xs: window.innerWidth,

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

@@ -1,10 +1,12 @@
-import { Box, Divider, Stack, Typography } from '@mui/material';
+import { Box, Divider, Stack, SxProps, Typography } from '@mui/material';
 
 interface HeaderProps {
+  sx?: SxProps;
   children: React.ReactNode;
 }
 
 function Header(props: HeaderProps) {
+  const { sx } = props;
   return (
     <Box>
       <Stack
@@ -15,6 +17,7 @@ function Header(props: HeaderProps) {
         py={2}
         spacing={2}
         minHeight={'64px'}
+        sx={sx}
       >
         {props.children}
       </Stack>

package/src/components/Layout/index.ts

@@ -9,7 +9,7 @@ export * from './MenuProvider';
 export * from './NavMenu';
 export * from './Navigation';
 export * from './Provider';
-export * as Sidebar from './Sidebar';
+export * from './Sidebar';
 export * from './ThemeColor';
 export * from './ThemeProvider';
 export * from './ThemeToggler';

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}>
+    <Sidebar PaperProps={{ sx: { height: '100%' } }} open={sidebarOpen} onClose={closeSidebar}>
       <Sidebar.Header>
         <Sidebar.HeaderText primary={translate('ra.action.add_filter')} />
         <Sidebar.HeaderAction>