@applica-software-guru/react-admin 1.3.175 → 1.3.177

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.175",
+  "version": "1.3.177",
   "private": false,
   "repository": {
     "type": "git",

package/src/ApplicaAdmin.tsx

@@ -1,12 +1,11 @@
 import { AdminProps, AuthProvider, DataProvider } from 'react-admin';
-import { AppConfigProvider, MenuConfigProvider, MenuPropTypes, ThemeConfig, ThemeConfigProvider } from './contexts';
+import { AppConfigProvider, MenuConfigProvider, ThemeConfig, ThemeConfigProvider } from './contexts';
 import { CatchResult, useErrorEventCatcher } from './dev';
 import { GenericErrorPage, Layout, LoginPage, MainIcon, Notification, SmallIcon } from './components';
 import React, { useMemo } from 'react';
 import { useI18nProvider } from './i18n';
 import Admin from './Admin';
 import { MenuProps } from './types';
-import PropTypes from 'prop-types';
 import { QueryClient } from 'react-query';
 import { ThemeCustomization } from './themes';
 import { IErrorEventHandler } from './dev/ErrorEventHandler';
@@ -293,26 +292,4 @@ ApplicaAdmin.defaultProps = {
   queryClient: defaultQueryClient,
   enableThemeToggler: false
 };
-
-ApplicaAdmin.propTypes = {
-  ...Admin.propTypes,
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  apiUrl: PropTypes.string.isRequired,
-  defaultLocale: PropTypes.string,
-  development: PropTypes.bool,
-  logoMain: PropTypes.node,
-  logoIcon: PropTypes.node,
-  menu: PropTypes.arrayOf(MenuPropTypes),
-  name: PropTypes.string,
-  version: PropTypes.string,
-  authProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  dataProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  notification: PropTypes.string,
-  enableNotification: PropTypes.bool,
-  enableRegistration: PropTypes.bool,
-  enableForgotPassword: PropTypes.bool,
-  queryClient: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  enableThemeToggler: PropTypes.bool
-};
-
 export default ApplicaAdmin;

package/src/components/@extended/Breadcrumbs.jsx

@@ -4,9 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 
 import MainCard from '../MainCard';
-import { MenuPropTypes } from '../../contexts';
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
-import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 
 const renderBreadcrumb = ({ id, title, icon, url, last }) => {
@@ -283,22 +281,4 @@ Breadcrumbs.defaultProps = {
   home: 'Home',
   mode: 'navigation'
 };
-
-Breadcrumbs.propTypes = {
-  home: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  card: PropTypes.bool,
-  divider: PropTypes.bool,
-  icon: PropTypes.bool,
-  icons: PropTypes.bool,
-  maxItems: PropTypes.number,
-  navigation: PropTypes.object,
-  rightAlign: PropTypes.bool,
-  separator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  title: PropTypes.bool,
-  titleBottom: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  breadcrumbs: PropTypes.arrayOf(MenuPropTypes),
-  mode: PropTypes.oneOf(['navigation', 'breadcrumbs'])
-};
-
 export default Breadcrumbs;

package/src/components/Layout/Navigation/{NavCollapse.jsx → NavCollapse.tsx}

@@ -9,7 +9,8 @@ import {
   ListItemText,
   Paper,
   Popper,
-  Typography
+  Typography,
+  Theme
 } from '@mui/material';
 import { Dot, Transitions } from '../../@extended';
 import { styled, useTheme } from '@mui/material/styles';
@@ -17,11 +18,10 @@ import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import NavItem from './NavItem';
-import PropTypes from 'prop-types';
 import { useLayoutMediaState } from '../Provider';
 import { useMenuConfig } from '../../../hooks';
 
-const PopperStyled = styled(Popper)(({ theme }) => ({
+const PopperStyled = styled(Popper)(({ theme }: { theme: Theme }) => ({
   overflow: 'visible',
   zIndex: 1202,
   minWidth: 180,
@@ -36,12 +36,24 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     transform: 'translateY(-50%) rotate(45deg)',
     zIndex: 120,
+    // @ts-ignore
     borderLeft: `1px solid ${theme.palette.grey.A800}`,
+    // @ts-ignore
     borderBottom: `1px solid ${theme.palette.grey.A800}`
   }
 }));
 
-const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }) => {
+export type NavCollapseProps = {
+  menu: any;
+  level: number;
+  parentId: string;
+  setSelectedItems: (value: string) => void;
+  selectedItems: string;
+  setSelectedLevel: (value: number) => void;
+  selectedLevel: number;
+};
+
+const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }: NavCollapseProps) => {
   const theme = useTheme();
   const { activeItem } = useMenuConfig();
   const { horizontal } = useLayoutMediaState();
@@ -53,7 +65,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
 
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const handleClick = (event) => {
+  const handleClick = (event: any) => {
     setAnchorEl(null);
     setSelectedLevel(level);
     if (drawerOpen) {
@@ -72,7 +84,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
     }
   };
 
-  const handleHover = (event) => {
+  const handleHover = (event: any) => {
     setAnchorEl(event?.currentTarget);
   };
 
@@ -98,8 +110,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   const { pathname } = useLocation();
   const openMini = Boolean(anchorEl);
 
-  const checkOpenForParent = (child, id) => {
-    child.forEach((item) => {
+  const checkOpenForParent = (child: any, id: any) => {
+    child.forEach((item: any) => {
       if (item.url === pathname) {
         setOpen(true);
         setSelected(id);
@@ -112,7 +124,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
     setSelected(null);
     if (openMini) setAnchorEl(null);
     if (menu.children) {
-      menu.children.forEach((item) => {
+      menu.children.forEach((item: any) => {
         if (item.children?.length) {
           checkOpenForParent(item.children, menu.id);
         }
@@ -139,7 +151,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
     }
   }, [pathname, menu, selected, activeItem]);
 
-  const navCollapse = menu.children?.map((item) => {
+  const navCollapse = menu.children?.map((item: any) => {
     switch (item.type) {
       case 'collapse':
         return (
@@ -288,11 +300,13 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 }}
               >
                 {({ TransitionProps }) => (
+                  // @ts-ignore
                   <Transitions in={openMini} {...TransitionProps}>
                     <Paper
                       sx={{
                         overflow: 'hidden',
                         mt: 1.5,
+                        // @ts-ignore
                         boxShadow: theme.customShadows.z1,
                         backgroundImage: 'none',
                         border: `1px solid ${theme.palette.divider}`
@@ -382,6 +396,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 ]}
               >
                 {({ TransitionProps }) => (
+                  // @ts-ignore
                   <Transitions in={openMini} {...TransitionProps}>
                     <Paper
                       sx={{
@@ -407,14 +422,4 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   );
 };
 
-NavCollapse.propTypes = {
-  menu: PropTypes.object,
-  level: PropTypes.number,
-  parentId: PropTypes.string,
-  setSelectedItems: PropTypes.func,
-  selectedItems: PropTypes.string,
-  setSelectedLevel: PropTypes.func,
-  selectedLevel: PropTypes.number
-};
-
 export default NavCollapse;

package/src/components/Layout/Navigation/{NavGroup.jsx → NavGroup.tsx}

@@ -1,4 +1,4 @@
-import { Box, ClickAwayListener, List, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Typography } from '@mui/material';
+import { Box, ClickAwayListener, List, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Typography, Theme } from '@mui/material';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
@@ -11,7 +11,10 @@ import { Transitions } from '../../@extended';
 import { useTranslate } from 'react-admin';
 import { useLayoutMediaState } from '../Provider';
 
-const PopperStyled = styled(Popper)(({ theme }) => ({
+type PopperStyledProps = {
+  theme: Theme;
+};
+const PopperStyled = styled(Popper)(({ theme }: PopperStyledProps) => ({
   overflow: 'visible',
   zIndex: 1202,
   minWidth: 180,
@@ -31,7 +34,27 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
   }
 }));
 
-const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }) => {
+export type NavGroupProps = {
+  item: any;
+  lastItem?: number | undefined;
+  remItems: any[];
+  lastItemId: string;
+  setSelectedItems: (value: string) => void;
+  selectedItems: string;
+  setSelectedLevel: (value: number) => void;
+  selectedLevel: number;
+};
+
+const NavGroup = ({
+  item,
+  lastItem,
+  remItems,
+  lastItemId,
+  setSelectedItems,
+  selectedItems,
+  setSelectedLevel,
+  selectedLevel
+}: NavGroupProps) => {
   const theme = useTheme();
   const translate = useTranslate();
   const { pathname } = { pathname: '' }; // useLocation()
@@ -58,8 +81,8 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, lastItem, downLg]);
 
-  const checkOpenForParent = (child, id) => {
-    child.forEach((ele) => {
+  const checkOpenForParent = (child: any, id: any) => {
+    child.forEach((ele: any) => {
       if (ele.children?.length) {
         checkOpenForParent(ele.children, currentItem.id);
       }
@@ -68,9 +91,9 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
       }
     });
   };
-  const checkSelectedOnload = (data) => {
+  const checkSelectedOnload = (data: any) => {
     const childrens = data.children ? data.children : [];
-    childrens.forEach((itemCheck) => {
+    childrens.forEach((itemCheck: any) => {
       if (itemCheck.children?.length) {
         checkOpenForParent(itemCheck.children, currentItem.id);
       }
@@ -86,7 +109,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname, currentItem]);
 
-  const handleClick = (event) => {
+  const handleClick = (event: any) => {
     if (!openMini) {
       setAnchorEl(event?.currentTarget);
     }
@@ -107,7 +130,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
     />
   ) : null;
 
-  const navCollapse = item.children?.map((menuItem) => {
+  const navCollapse = item.children?.map((menuItem: any) => {
     switch (menuItem.type) {
       case 'collapse':
         return (
@@ -135,7 +158,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
           {itemRem.title}
         </Typography>
       )}
-      {itemRem?.elements?.map((menu) => {
+      {itemRem?.elements?.map((menu: any) => {
         switch (menu.type) {
           case 'collapse':
             return (
@@ -164,7 +187,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
   ));
 
   // menu list collapse & items
-  const items = currentItem.children?.map((menu) => {
+  const items = currentItem.children?.map((menu: any) => {
     switch (menu.type) {
       case 'collapse':
         return (
@@ -267,6 +290,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
                 }}
               >
                 {({ TransitionProps }) => (
+                  // @ts-ignore
                   <Transitions in={openMini} {...TransitionProps}>
                     <Paper
                       sx={{

package/src/components/Layout/Navigation/{NavItem.jsx → NavItem.tsx}

@@ -3,12 +3,14 @@ import { Link, useLocation } from 'react-router-dom';
 import { forwardRef, useEffect } from 'react';
 
 import { Dot } from '../../@extended';
-import PropTypes from 'prop-types';
 import { useLayoutMediaState } from '../Provider';
 import { useMenuConfig } from '../../../hooks';
 import { useTheme } from '@mui/material/styles';
-
-const NavItem = ({ item, level }) => {
+export type NavItemProps = {
+  item: any;
+  level: number;
+};
+const NavItem = ({ item, level }: NavItemProps) => {
   const theme = useTheme();
 
   const { horizontal, downLg } = useLayoutMediaState();
@@ -20,10 +22,16 @@ const NavItem = ({ item, level }) => {
   }
 
   let listItemProps = {
+    // @ts-ignore
     component: forwardRef((props, ref) => <Link {...props} to={item.url} target={itemTarget} ref={ref} />)
   };
   if (item?.external) {
-    listItemProps = { component: 'a', href: item.url, target: itemTarget };
+    listItemProps = {
+      // @ts-ignore
+      component: 'a',
+      href: item.url,
+      target: itemTarget
+    };
   }
 
   const Icon = item.icon;
@@ -234,9 +242,4 @@ const NavItem = ({ item, level }) => {
   );
 };
 
-NavItem.propTypes = {
-  item: PropTypes.object,
-  level: PropTypes.number
-};
-
 export default NavItem;

package/src/components/Layout/Navigation/NavList.tsx

@@ -0,0 +1,23 @@
+import { Box, SxProps } from '@mui/material';
+import { useSx } from '../../../hooks';
+import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
+
+export type NavListProps = {
+  sx?: SxProps;
+  children: React.ReactNode;
+};
+
+const NavList = (props: NavListProps) => {
+  const { horizontal } = useLayoutMediaState();
+  const { open } = useLayoutDrawerState();
+
+  const sx = useSx(props, {
+    pt: open ? (horizontal ? 0 : 2) : 0,
+    '& > ul:first-of-type': { mt: 0 },
+    display: horizontal ? { xs: 'block', lg: 'flex' } : 'block'
+  });
+
+  return <Box sx={sx}>{props.children}</Box>;
+};
+
+export default NavList;

package/src/components/Layout/Navigation/Navigation.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import _ from 'lodash';
-import { Box, SxProps, Typography } from '@mui/material';
-import { useMenu, useSx, useThemeConfig } from '../../../hooks';
-import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
+import { SxProps, Typography } from '@mui/material';
+import { useMenu, useThemeConfig } from '../../../hooks';
+import { useLayoutMediaState } from '../Provider';
 import { NavGroup } from './NavGroup';
+import NavList from './NavList';
 
 type INavigationProps = {
   sx?: SxProps;
@@ -13,12 +14,11 @@ type IItem = { title: any; elements: any; icon: any };
 
 function Navigation(props: INavigationProps) {
   const { horizontal } = useLayoutMediaState(),
-    { open } = useLayoutDrawerState(),
     { menu, isLoading } = useMenu(),
     [selectedItems, setSelectedItems] = useState<string>(''),
     [selectedLevel, setSelectedLevel] = useState<number>(0),
     { horizontalMaxItems } = useThemeConfig(),
-    lastItem = horizontal ? horizontalMaxItems : null;
+    lastItem = horizontal ? horizontalMaxItems : undefined;
 
   let lastItemIndex = isLoading ? 0 : (menu ?? []).length - 1,
     remItems: Array<IItem> = [],
@@ -34,14 +34,8 @@ function Navigation(props: INavigationProps) {
     }));
   }
 
-  const sx = useSx(props, {
-    pt: open ? (horizontal ? 0 : 2) : 0,
-    '& > ul:first-of-type': { mt: 0 },
-    display: horizontal ? { xs: 'block', lg: 'flex' } : 'block'
-  });
-
   return (
-    <Box sx={sx}>
+    <NavList {...props}>
       {!isLoading &&
         _.map((menu ?? []).slice(0, lastItemIndex + 1), (item) => {
           const { type } = item;
@@ -69,7 +63,7 @@ function Navigation(props: INavigationProps) {
               );
           }
         })}
-    </Box>
+    </NavList>
   );
 }
 

package/src/components/Layout/Navigation/index.ts

@@ -1 +1,5 @@
 export * from './Navigation';
+export * from './NavCollapse';
+export * from './NavGroup';
+export * from './NavList';
+export * from './NavItem';

package/src/components/MainCard.tsx

@@ -141,13 +141,7 @@ const MainCard = forwardRef(
       >
         {!darkTitle && title && (
           /** @ts-ignore */
-          <CardHeader
-            sx={headerSX}
-            titleTypographyProps={{ variant: 'subtitle1' }}
-            title={title}
-            action={secondary}
-            subheader={subheader}
-          />
+          <CardHeader sx={headerSX} title={title} action={secondary} subheader={subheader} />
         )}
         {/** @ts-ignore */}
         {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}

package/src/components/ra-fields/ReadonlyField.tsx

@@ -6,7 +6,12 @@ import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
 import { useAppConfig, useSx } from '../../hooks';
 
-const StyledField = styled('div')(({ theme, fullWidth }: { theme: any; fullWidth: boolean }) => ({
+type StyledFieldProps = {
+  theme?: any;
+  fullWidth?: boolean;
+};
+
+const StyledField = styled('div')(({ theme, fullWidth }: StyledFieldProps) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   paddingTop: theme.spacing(1),
   paddingBottom: theme.spacing(1),

package/src/components/ra-fields/ReferenceManyField.tsx

@@ -9,14 +9,6 @@ export type StyledDivProps = {
 };
 
 export type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
-  /**
-   * Default false, serve ad aggiungere un margine attorno al componente.
-   */
-  margin?: boolean;
-  /**
-   * Default false, serve ad aggiungere un bordo inferiore al componente.
-   */
-  border?: boolean;
   /**
    * Default undefined, serve ad aggiungere un padding superiore al componente per consentire
    * la visualizzazione della toolbar delle bulk action buttons.
@@ -45,59 +37,60 @@ StyledDiv.propTypes = {
 const StyledRoot = styled(StyledDiv, {
   name: 'RaApplicaReferenceManyField',
   slot: 'root'
-})(({ theme, margin, border, bulkActionButtons }: StyledRootProps) => {
+})(({ theme, bulkActionButtons }: StyledRootProps) => {
   return {
-    marginLeft: !margin ? `-${theme.spacing(2.5)}` : 0,
-    marginRight: !margin ? `-${theme.spacing(2.5)}` : 0,
-    borderBottom: border ? `1px solid ${theme.palette.divider}` : 'none',
-    '& form': {
-      padding: theme.spacing(2)
-    },
-    '& .MuiCardContent-root': {
-      borderTop: border ? `1px solid ${theme.palette.divider}` : 'none'
-    },
-    '& .MuiToolbar-root': {
-      [theme.breakpoints.up('sm')]: {
-        marginTop: `-${theme.spacing(2)}`,
-        marginBottom: theme.spacing(margin ? 0 : 1),
-        marginLeft: theme.spacing(margin ? 1 : 2),
-        marginRight: theme.spacing(margin ? 1 : 2),
-        width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`
+    marginLeft: `-${theme.spacing(2.5)}`,
+    marginRight: `-${theme.spacing(2.5)}`,
+    // Access first child of the root div and align it to center
+    // This "should" be the toolbar before the datagrid (remember: should be...).
+    '&>div:first-of-type': {
+      alignItems: 'center',
+      '& form': {
+        padding: theme.spacing(2.5)
       },
-      [theme.breakpoints.down('md')]: {
-        marginTop: 0
+      '& .MuiToolbar-root': {
+        alignItems: 'center',
+        padding: '0 !important',
+        marginTop: theme.spacing(1),
+
+        [theme.breakpoints.up('sm')]: {
+          marginLeft: theme.spacing(2),
+          marginRight: theme.spacing(2),
+          width: `calc(100% - ${theme.spacing(4)})`
+        },
+        [theme.breakpoints.down('md')]: {
+          marginTop: 0,
+          display: 'none',
+          visibility: 'hidden'
+        }
       }
     },
     '& .RaDatagrid-root': {
       overflowX: 'auto',
       paddingTop: bulkActionButtons === false ? 0 : 48,
       [theme.breakpoints.down('sm')]: {
-        width: 'calc(100vw - 34px)'
+        width: 'calc(100vw - 26px)'
+      },
+      '& .RaBulkActionsToolbar-toolbar': {
+        borderRadius: 0,
+        '& > .RaBulkActionsToolbar-title': {
+          alignItems: 'center'
+        },
+        [theme.breakpoints.down('sm')]: {
+          paddingLeft: theme.spacing(3)
+        }
+      },
+      '& .RaDatagrid-table': {
+        borderBottom: `1px solid ${theme.palette.divider}`
       }
     },
-    '& .RaDatagrid-table': {
-      borderBottom: `1px solid ${theme.palette.divider}`
-    },
+
     '& .MuiTablePagination-toolbar': {
-      marginTop: theme.spacing(1),
-      marginBottom: 0
+      marginTop: '0 !important',
+      marginBottom: '0 !important'
     },
     '& .RaBulkActionsToolbar-collapsed.RaBulkActionsToolbar-toolbar': {
       minHeight: 0
-    },
-    '& .RaBulkActionsToolbar-toolbar': {
-      minHeight: 48,
-      bottom: -56,
-      '& h6': {
-        marginTop: theme.spacing(0.5)
-      },
-      '& .RaBulkActionsToolbar-topToolbar': {
-        marginTop: theme.spacing(1)
-      },
-      [theme.breakpoints.down('sm')]: {
-        bottom: -48,
-        borderRadius: 0
-      }
     }
   };
 });
@@ -131,15 +124,4 @@ const ReferenceManyField = (props: ReferenceManyFieldProps) => (
   </StyledRoot>
 );
 
-ReferenceManyField.defaultProps = {
-  margin: false,
-  border: false
-};
-
-ReferenceManyField.propTypes = {
-  ...RaReferenceManyField.propTypes,
-  margin: PropTypes.bool,
-  border: PropTypes.bool
-};
-
 export default ReferenceManyField;

package/src/components/ra-forms/Create.tsx

@@ -78,6 +78,9 @@ const StyledCreate = styled(Create, {
   '& .RaCreate-card, & > div > div > form': {
     backgroundColor: theme.palette.background.default
   },
+  '& .RaCreate-main': {
+    marginTop: 0
+  },
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
     backgroundColor: theme.palette.background.default
   },
@@ -88,8 +91,8 @@ const StyledCreate = styled(Create, {
     overflow: 'visible'
   },
   '& .RaCreate-main:has(.tabbed-form) .MuiTableContainer-root': {
-    width: 'inherit',
-  },
+    width: 'inherit'
+  }
 }));
 
 export default StyledCreate;

package/src/components/ra-forms/Edit.jsx

@@ -20,6 +20,9 @@ const StyledEdit = styled(RaEdit, {
   '& .RaToolbar-mobileToolbar': {
     borderTop: `1px solid ${theme.palette.divider}`
   },
+  '& .RaEdit-main': {
+    marginTop: 0
+  },
   '& .RaEdit-main>.MuiPaper-root:first-of-type': {
     backgroundColor: theme.palette.background.default
   },

package/src/components/ra-forms/FormHeader.tsx

@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles';
 import { useTranslate } from 'react-admin';
 
 const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
-  marginTop: theme.spacing(4),
+  marginTop: theme.spacing(2.5),
   marginLeft: 0,
   marginRight: 0,
   paddingLeft: 0,
@@ -57,7 +57,7 @@ FormHeader.propTypes = {
 
 FormHeader.defaultProps = {
   divider: true,
-  variant: 'h4'
+  variant: 'h5'
 };
 
 export default FormHeader;