@applica-software-guru/react-admin 1.4.191 → 1.4.196

package/package.json

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

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -11,7 +11,7 @@ import {
   useResourceContext,
   useTranslate
 } from 'react-admin';
-import { Dialog, Fab, useMediaQuery } from '@mui/material';
+import { Dialog, Fab, useMediaQuery, useTheme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { SxProps, Theme, styled } from '@mui/material/styles';
 import { PlusCircleOutlined } from '@ant-design/icons';
@@ -153,6 +153,7 @@ export type CreateInDialogButtonProps = {
   scrollToTop?: boolean;
   className?: string;
   sx?: SxProps;
+  style?: React.CSSProperties;
   children: React.ReactElement;
   /**
    * If set to false, the button will always render as a regular button, regardless of the screen size.
@@ -175,6 +176,7 @@ export function CreateInDialogButton({
   scrollToTop = true,
   className,
   sx,
+  style,
   fab = true,
   onSubmit,
   onSuccess,
@@ -185,6 +187,7 @@ export function CreateInDialogButton({
   const translate = useTranslate();
   const resource = useResourceContext();
   const { openDialog, closeDialog } = useAppConfig();
+  const theme = useTheme();
 
   const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
   const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
@@ -204,14 +207,20 @@ export function CreateInDialogButton({
           <PlusCircleOutlined />
         </StyledFab>
       ) : (
-        <Button {...props} sx={sx} label={label} onClick={handleOpen}>
+        <Button {...props} sx={sx} label={label} onClick={handleOpen} style={style}>
           <PlusCircleOutlined />
         </Button>
       )}
       <Dialog
         open={open}
         scroll="body"
-        sx={{ '& .MuiToolbar-root': { position: 'initial' } }}
+        sx={{
+          '& .MuiToolbar-root': {
+            borderTop: `1px solid ${theme.palette.divider}`,
+            position: 'initial',
+            padding: 2.5
+          }
+        }}
         onClose={handleClose}
         fullWidth={fullWidth}
         maxWidth={maxWidth}

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-admin';
 import React, { useCallback, useState } from 'react';
 
-import { Breakpoint, Dialog } from '@mui/material';
+import { Breakpoint, Dialog, useTheme } from '@mui/material';
 import { Edit } from '@mui/icons-material';
 import { Toolbar } from '../ra-forms';
 import { useAppConfig } from '../../hooks';
@@ -72,12 +72,14 @@ export type EditInDialogButtonProps = {
   maxWidth?: false | Breakpoint | undefined;
   label?: string;
   children: React.ReactElement;
+  style?: React.CSSProperties;
 };
 
 export function EditInDialogButton({
   fullWidth = true,
   maxWidth = 'md',
   label = 'ra.action.edit',
+  style,
   ...props
 }: EditInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -85,10 +87,11 @@ export function EditInDialogButton({
   const resource = useResourceContext();
   const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
   const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
+  const theme = useTheme();
 
   return (
     <>
-      <Button label={label} onClick={handleOpen}>
+      <Button label={label} onClick={handleOpen} style={style}>
         <Edit />
       </Button>
       <Dialog
@@ -96,7 +99,9 @@ export function EditInDialogButton({
         scroll="body"
         sx={{
           '& .MuiToolbar-root': {
-            position: 'initial'
+            borderTop: `1px solid ${theme.palette.divider}`,
+            position: 'initial',
+            padding: 2.5
           }
         }}
         onClose={handleClose}

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

@@ -66,8 +66,15 @@ type StyledFormProps = {
 const StyledForm = styled(Form, { slot: 'root' })(({ theme, spacing }: StyledFormProps) => ({
   backgroundColor: 'transparent',
   '& .RaToolbar-desktopToolbar': {
-    marginTop: theme.spacing((spacing as number) * 2),
-    padding: 0
+    marginTop: theme.spacing((spacing as number) * 1.25),
+    padding: 0,
+    minHeight: 'unset'
+  },
+  '& .RaToolbar-mobileToolbar': {
+    paddingTop: '20px !important',
+    paddingRight: '0 !important',
+    paddingLeft: '0 !important',
+    paddingBottom: 0,
   }
 }));
 

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

@@ -81,6 +81,12 @@ export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) =
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
     backgroundColor: theme.palette.background.default
   },
+  '& .RaToolbar-mobileToolbar': {
+    position: 'initial !important',
+    paddingLeft: '20px !important',
+    paddingRight: '20px !important',
+    paddingTop: '0 !important',
+  },
   // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
   // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
   // di tutti gli elementi presenti all'interno della pagina.

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

@@ -15,7 +15,10 @@ const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
   },
 
   '& .RaToolbar-mobileToolbar': {
-    borderTop: `1px solid ${theme.palette.divider}`
+    position: 'initial !important',
+    paddingLeft: '20px !important',
+    paddingRight: '20px !important',
+    paddingTop: '0 !important'
   },
   '& .RaEdit-main': {
     marginTop: 0

package/src/components/ra-forms/LongForm/BaseForm.tsx

@@ -16,11 +16,11 @@ const StyledGrid = styled(Grid, {
   // Other toolbars must be handled outside this rule.
   '& .MuiToolbar-root.RaToolbar-desktopToolbar': {
     position: 'initial',
-    marginTop: theme.spacing(2.5),
+    // marginTop: theme.spacing(2.5),
     marginLeft: `-${theme.spacing(3)}`,
     marginRight: `-${theme.spacing(3)}`,
     marginBottom: `-${theme.spacing(2)}`,
-    borderTop: `1px solid ${theme.palette.divider}`,
+    // borderTop: `1px solid ${theme.palette.divider}`,
     paddingTop: theme.spacing(2.5),
     paddingBottom: theme.spacing(2.5),
     [theme.breakpoints.down('sm')]: {
@@ -29,6 +29,13 @@ const StyledGrid = styled(Grid, {
       marginRight: 0
     }
   },
+  '& .RaToolbar-mobileToolbar': {
+    position: 'initial !important',
+    paddingTop: '20px !important',
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important',
+    paddingBottom: '0 !important',
+  },
   '& form > .MuiToolbar-root': {
     // This is really important: this rule is used to insert forms inside other forms, avoiding
     // the toolbar of the inner form to receive the styles of the previous rule (which generates a strange padding).

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

@@ -15,9 +15,9 @@ const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme, modal
   '& .MuiGrid-root.MuiGrid-container': {
     paddingBottom: theme.spacing(modal ? 0 : 2.5)
   } as any,
-  [theme.breakpoints.down('sm')]: {
-    paddingBottom: 0
-  }
+  // [theme.breakpoints.down('sm')]: {
+  paddingBottom: '0 !important',
+  // }
 }));
 
 export type SimpleFormProps = RaSimpleFormProps & {

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

@@ -80,7 +80,10 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
           ml: 2.5,
           mr: 2.5
         },
-
+        '& .MuiToolbar-root.RaToolbar-desktopToolbar': {
+          position: 'initial',
+          paddingTop: 0
+        },
         '& .MuiToolbar-root': {
           padding: 2.5
         }

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -161,8 +161,8 @@ export function RawTableFormIterator(props: TableFormIteratorProps): ReactElemen
           sx={
             inset === true
               ? {
-                  borderRadius: 0
-                }
+                borderRadius: 0
+              }
               : { mt: 2, border: `1px solid ${tableBorderColor}` }
           }
         >
@@ -277,8 +277,9 @@ function AddTableRow(props: any): JSX.Element {
 export const TableFormIterator = styled(RawTableFormIterator, { slot: 'Root' })(({ theme }) => ({
   '& > div.MuiPaper-root': {
     overflowX: 'auto',
+    // this decision has been made with Roberto in order to avoid Marco gets angry
     [theme.breakpoints.down('sm')]: {
-      width: `calc(100vw - ${theme.spacing(8)})`
+      width: `calc(100vw - ${theme.spacing(8.25)})`
     }
   },
   [theme.breakpoints.down('sm')]: {