npm - @applica-software-guru/react-admin - Versions diffs - 1.3.184 → 1.4.0-beta.0 - Mend

@applica-software-guru/react-admin 1.3.184 → 1.4.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/index.html CHANGED Viewed

@@ -7,6 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
     <title>React-Admin Demo Application</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap&family=Public+Sans:wght@400;500;600;700"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.184",
+  "version": "1.4.0-beta.0",
   "private": false,
   "repository": {
     "type": "git",
@@ -58,10 +58,10 @@
     "dayjs": "^1.11.8",
     "framer-motion": "^10.12.17",
     "history": "^5.1.0",
-    "ra-core": "^4.14.5",
-    "ra-i18n-polyglot": "^4.14.1",
-    "ra-ui-materialui": "4.14.5",
-    "react-admin": "4.14.5",
+    "ra-core": "4.16.16",
+    "ra-i18n-polyglot": "4.16.16",
+    "ra-ui-materialui": "4.16.16",
+    "react-admin": "4.16.16",
     "react-device-detect": "^2.2.3",
     "react-hook-form": "^7.43.9",
     "react-router": "^6.1.0",

package/src/components/ActionsMenu.tsx CHANGED Viewed

@@ -1,9 +1,7 @@
 import { IconButton, MenuItem, styled } from '@mui/material';
-import React, { Children, useCallback, useState } from 'react';
-import MenuPopover from './MenuPopover/MenuPopover';
 import { MoreHoriz, MoreVert } from '@mui/icons-material';
-import PropTypes from 'prop-types';
+import MenuPopover from './MenuPopover/MenuPopover';
+import React, { Children, useCallback, useState } from 'react';
 const StyledRoot = styled('div', {
   shouldForwardProp: (prop) => prop !== 'color' && prop !== 'variant' && prop !== 'sx',
@@ -14,42 +12,42 @@ const StyledRoot = styled('div', {
 }));
 const StyledMenuPopover = styled(MenuPopover, {
-  name: 'ApplicaActionsMenu',
   slot: 'root'
 })(({ theme }) => ({
   '& .MuiMenuItem-root': {
     padding: 0,
     margin: 0,
-    backgroundColor: theme.palette.background.paper,
+    // backgroundColor: theme.palette.background.paper,
     '& .MuiButton-startIcon': {
       marginRight: theme.spacing(0)
     }
   }
 }));
 export type ActionsMenuProps = {
   children: React.ReactNode;
   horizontal?: boolean;
 };
 /**
- * Consente di disegnare un menu di azioni raggruppate all'interno di un popover.
- * All'interno del menu è possibile inserire uno o più componenti che, è suggeribile, siano bottoni.
+ * Allows you to draw a menu of actions grouped within a popover.
+ * Inside the menu you can insert one or more components that, it is advisable, are buttons.
  *
  * @example
  * <ActionsMenu>
  *  <DeleteButton />
  *  <EditButton />
  * </ActionsMenu>
- *
- * @param {ActionsMenuProps}
- * @returns {React.ReactElement}
  */
-const ActionsMenu = ({ horizontal = false, children }: ActionsMenuProps): React.ReactElement | null => {
+export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps): React.ReactElement | null {
   const [open, setOpen] = useState(null);
+  const actionRef = React.useRef(null);
   const handleClick = (e: any) => {
     e.stopPropagation();
     e.preventDefault();
     setOpen(e.currentTarget);
+    actionRef.current = e.currentTarget;
   };
   const handleClose = useCallback((e: any) => {
     e.stopPropagation();
@@ -72,10 +70,12 @@ const ActionsMenu = ({ horizontal = false, children }: ActionsMenuProps): React.
     setOpen(null);
     if (typeof e.currentTarget?.onClick === 'function') {
-      e.currentTarget.onClick();
+      e.currentTarget.onClick(e);
     }
   }, []);
+  const btnAdditionalStyles = { width: '100%', justifyContent: 'flex-start' };
   return (
     <StyledRoot>
       <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} color={open ? 'inherit' : 'default'}>
@@ -84,16 +84,16 @@ const ActionsMenu = ({ horizontal = false, children }: ActionsMenuProps): React.
       <StyledMenuPopover open={open} onClose={handleClose} arrow="right-top">
         {Children.map(
           children,
-          (action, index) => React.isValidElement(action) && <MenuItem onClick={handleOnClick} key={index}>{React.cloneElement(action)}</MenuItem>
+          (action, index) => React.isValidElement(action) && <MenuItem onClick={handleOnClick} key={index}>
+            {React.cloneElement(action,
+              { // @ts-ignore
+                style: { ...btnAdditionalStyles }
+              })}
+          </MenuItem>
         )}
       </StyledMenuPopover>
     </StyledRoot>
   );
-};
-ActionsMenu.propTypes = {
-  ...MenuPopover.propTypes,
-  children: PropTypes.node.isRequired
-};
+}
 export default ActionsMenu;

package/src/components/Layout/Provider.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Dialog, useMediaQuery, useTheme } from '@mui/material';
-import { UseGetIdentityResult, useGetIdentity, useAuthProvider } from 'ra-core';
+import { UseGetIdentityResult, useGetIdentity } from 'ra-core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
-import { useMenuConfig, useThemeConfig } from '../../hooks';
+import { useApplicaAuthProvider, useMenuConfig, useThemeConfig } from '../../hooks';
 import { ChangePasswordForm } from '../ra-forms';
 import _ from 'lodash';
@@ -130,7 +130,7 @@ const DefaultState: ILayoutState = {
   LayoutContext = createContext<ILayoutContext | undefined>(undefined);
 function LayoutProvider(props: ILayoutProviderProps) {
-  const authProvider = useAuthProvider();
+  const authProvider = useApplicaAuthProvider();
   const identity = useGetIdentity() as UseGetIdentityResult,
     theme = useTheme(),
     downMd = useMediaQuery(theme.breakpoints.down('md')),

package/src/components/MenuPopover/MenuPopover.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ const MenuPopover = ({ open, children, arrow = 'top-right', disabledArrow, sx, .
       anchorEl={open}
       anchorOrigin={anchorOrigin}
       transformOrigin={transformOrigin}
+      keepMounted
       PaperProps={{
         sx: {
           p: 1,

package/src/components/MenuPopover/styles.jsx CHANGED Viewed

@@ -5,7 +5,8 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
   const POSITION = -(SIZE / 2);
-  const borderStyle = `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`;
+  const borderStyle =
+    theme.palette.mode === 'dark' ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`;
   const topStyle = {
     borderRadius: '0 0 3px 0',
@@ -30,7 +31,7 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
   const rightStyle = {
     borderRadius: '0 0 0 3px',
-    right: POSITION,
+    right: POSITION - 1,
     borderBottom: borderStyle,
     borderLeft: borderStyle
   };
@@ -45,7 +46,10 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
       display: 'block',
       position: 'absolute',
       transform: 'rotate(-135deg)',
-      background: theme.palette.background.paper
+      background: theme.palette.background.paper,
+      backgroundImage: 'inherit',
+      borderLeft: borderStyle,
+      borderBottom: borderStyle
     },
     // Top
     ...(arrow === 'top-left' && { ...topStyle, left: 20 }),

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

@@ -11,11 +11,10 @@ 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 { Add } from '@mui/icons-material';
+import { PlusCircleOutlined } from '@ant-design/icons';
 import { Toolbar } from '../ra-forms';
 import clsx from 'clsx';
 import { useAppConfig } from '../../hooks';
@@ -119,7 +118,7 @@ const CreateInDialogContent = ({
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} disabled={createProps?.saving} />
-            <SaveButton disabled={createProps?.saving} />
+            <SaveButton type="button" disabled={createProps?.saving} />
           </Toolbar>
         )
       })}
@@ -132,10 +131,7 @@ const scrollStates = {
   false: {}
 } as any;
-const StyledFab = styled(Fab, {
-  name: 'RaApplicaCreateInDialogButton',
-  overridesResolver: (_props, styles) => styles.root
-})(({ theme }) => ({
+const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.root })(({ theme }) => ({
   [`&.${CreateButtonClasses.floating}`]: {
     color: theme.palette.getContrastText(theme.palette.primary.main),
     margin: 0,
@@ -157,7 +153,12 @@ 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.
+   */
+  fab: boolean;
   onSubmit?: (record: any, close: () => void) => void;
   onSuccess?: (data: any) => void;
   onError?: (error: any) => void;
@@ -175,6 +176,8 @@ export function CreateInDialogButton({
   scrollToTop = true,
   className,
   sx,
+  style,
+  fab = true,
   onSubmit,
   onSuccess,
   onError,
@@ -184,10 +187,11 @@ 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]);
-  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const isSmall = fab && useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   return (
     <>
       {isSmall ? (
@@ -200,11 +204,11 @@ export function CreateInDialogButton({
           aria-label={label && translate(label)}
           onClick={handleOpen}
         >
-          <Add />
+          <PlusCircleOutlined />
         </StyledFab>
       ) : (
-        <Button {...props} sx={sx} label={label} onClick={handleOpen}>
-          <Add />
+        <Button {...props} sx={sx} label={label} onClick={handleOpen} style={style}>
+          <PlusCircleOutlined />
         </Button>
       )}
       <Dialog
@@ -212,7 +216,9 @@ export function CreateInDialogButton({
         scroll="body"
         sx={{
           '& .MuiToolbar-root': {
-            position: 'initial'
+            borderTop: `1px solid ${theme.palette.divider}`,
+            position: 'initial',
+            padding: 2.5
           }
         }}
         onClose={handleClose}

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

@@ -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';
@@ -59,7 +59,7 @@ const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) =>
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
-            <SaveButton />
+            <SaveButton type="button" />
           </Toolbar>
         )
       })}
@@ -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-custom/ListItem.tsx CHANGED Viewed

@@ -38,12 +38,9 @@ const defaultIconStyle = {
 };
 /**
- * Implementa il componente ListItem progettato e disegnato da Applica.
- * Questo componente può essere utilizzato in diverse combinazioni di proprietà e consente di visualizzare e/o modificare dati
- * aggiungendo elementi decorativi di dettagli e personalizzazioni nella formattazione dei dati.
- *
- * @param {ListItemProps} props
- * @returns {JSX.Element}
+ * Implements the ListItem component designed and drawn by Applica.
+ * This component can be used in different combinations of properties and allows you to view and/or modify data
+ * by adding decorative elements of details and customizations in data formatting.
  */
 export function ListItem({
   source,

package/src/components/ra-fields/BaseAttachmentField.tsx CHANGED Viewed

@@ -3,12 +3,7 @@ import { Typography } from '@mui/material';
 import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
-const Root = styled('div', {
-  name: 'ApplicaBaseAttachmentField',
-  overridesResolver: (props, styles) => styles.root
-})({
-  display: 'inline-block'
-});
+const Root = styled('div', { overridesResolver: (props, styles) => styles.root })({ display: 'inline-block' });
 const StyledList = styled('ul')({
   display: 'inline-block'

package/src/components/ra-fields/DateField.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import { DateFieldProps, DateField as RaDateField } from 'react-admin';
 import { styled } from '@mui/material/styles';
-const StyledDateField = styled(RaDateField, {
-  name: 'RaApplicaDateField',
-  slot: 'Root'
-})(() => ({}));
+const StyledDateField = styled(RaDateField, { slot: 'Root' })(() => ({}));
 export function DateField({ variant = 'body1', ...props }: DateFieldProps): JSX.Element {
   // @ts-ignore

package/src/components/ra-fields/EmailField.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import { EmailFieldProps, EmailField as RaEmailField } from 'react-admin';
 import { styled } from '@mui/material/styles';
-const StyledEmailField = styled(RaEmailField, {
-  name: 'RaApplicaEmailField',
-  slot: 'Root'
-})(() => ({}));
+const StyledEmailField = styled(RaEmailField, { slot: 'Root' })(() => ({}));
 export function EmailField({ variant = 'body1', ...props }: EmailFieldProps): JSX.Element {
   return <StyledEmailField {...props} variant={variant} />;

package/src/components/ra-fields/FileField.tsx CHANGED Viewed

@@ -3,10 +3,7 @@ import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
 import { useCallback } from 'react';
-const StyledFileField = styled(RaFileField, {
-  name: 'RaApplicaFileField',
-  slot: 'root'
-})(() => ({}));
+const StyledFileField = styled(RaFileField, { slot: 'root' })(() => ({}));
 export type FileFieldProps = {
   source: string;

package/src/components/ra-fields/ImageField.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import { ImageFieldProps, ImageField as RaImageField } from 'react-admin';
 import { styled } from '@mui/material/styles';
-const StyledImageField = styled(RaImageField, {
-  name: 'RaApplicaImageField',
-  slot: 'root'
-})(() => ({}));
+const StyledImageField = styled(RaImageField, { slot: 'root' })(() => ({}));
 export function ImageField(props: ImageFieldProps): JSX.Element {
   const source = `_${props?.source}`;

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

@@ -14,10 +14,7 @@ const StyledDiv = function ({ children = null, className = '' }: StyledDivProps)
   return <div className={className}>{children}</div>;
 };
-const StyledRoot = styled(StyledDiv, {
-  name: 'RaApplicaReferenceManyField',
-  slot: 'root'
-})(({ theme, bulkActionButtons }: StyledRootProps) => {
+const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButtons }: StyledRootProps) => {
   return {
     marginLeft: `-${theme.spacing(2.5)}`,
     marginRight: `-${theme.spacing(2.5)}`,
@@ -100,9 +97,6 @@ export type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
  *     ...
  *   </Datagrid>
  * </ReferenceManyField>
- *
- * @param props {ReferenceManyFieldProps}
- * @returns {JSX.Element}
  */
 export function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element {
   return (

package/src/components/ra-fields/TextField.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import { TextField as RaTextField, TextFieldProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
-const StyledTextField = styled(RaTextField, {
-  name: 'RaApplicaTextField',
-  slot: 'Root'
-})(() => ({}));
+const StyledTextField = styled(RaTextField, { slot: 'Root' })(() => ({}));
 export function TextField({ variant = 'body1', ...props }: TextFieldProps): JSX.Element {
   // @ts-ignore

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

@@ -63,14 +63,18 @@ type StyledFormProps = {
   theme: any;
 };
-const StyledForm = styled(Form, {
-  name: 'RaApplicaCardForm',
-  slot: 'root'
-})(({ theme, spacing }: 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 CHANGED Viewed

@@ -71,10 +71,7 @@ export function useResourceDefaultValues(): IResourceDefaultValue {
   return useContext(ResourceDefaultValueContext);
 }
-export const Create = styled(CreateWithDefaults, {
-  name: 'RaApplicaEdit',
-  slot: 'root'
-})(({ theme }) => ({
+export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) => ({
   '& .RaCreate-card, & > div > div > form': {
     backgroundColor: theme.palette.background.default
   },
@@ -84,10 +81,16 @@ export const Create = styled(CreateWithDefaults, {
   '& .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.
-  '& .RaCreate-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+  '& .RaCreate-main:has(.LongFormView)>.MuiPaper-root:first-of-type': {
     overflow: 'visible'
   },
   '& .RaCreate-main:has(.tabbed-form) .MuiTableContainer-root': {

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

@@ -1,10 +1,7 @@
-import { Edit as RaEdit } from 'react-admin';
+import { EditProps, Edit as RaEdit } from 'react-admin';
 import { styled } from '@mui/material/styles';
-export const Edit = styled(RaEdit, {
-  name: 'RaApplicaEdit',
-  slot: 'root'
-})(({ theme }) => ({
+const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
   '&>.MuiToolbar-root:first-of-type': {
     backgroundColor: theme.palette.background.default
   },
@@ -18,7 +15,10 @@ export const Edit = styled(RaEdit, {
   },
   '& .RaToolbar-mobileToolbar': {
-    borderTop: `1px solid ${theme.palette.divider}`
+    position: 'initial !important',
+    paddingLeft: '20px !important',
+    paddingRight: '20px !important',
+    paddingTop: '0 !important'
   },
   '& .RaEdit-main': {
     marginTop: 0
@@ -29,7 +29,7 @@ export const Edit = styled(RaEdit, {
   // This line of code took me 4 hours to write and solve a problem with react-sticky-box and Long Forms.
   // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
   // of all the elements inside the page.
-  '& .RaEdit-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+  '& .RaEdit-main:has(.LongFormView)>.MuiPaper-root:first-of-type': {
     overflow: 'visible'
   },
   '& .RaEdit-main:has(.tabbed-form) .MuiTableContainer-root': {
@@ -37,4 +37,9 @@ export const Edit = styled(RaEdit, {
   }
 }));
+export function Edit(props: EditProps): JSX.Element {
+  // @ts-ignore
+  return <StyledEdit {...props} />;
+}
 export default Edit;

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

@@ -9,18 +9,18 @@ type IBaseFormProps = FormProps & {
 };
 const StyledGrid = styled(Grid, {
-  name: 'ApplicaLongFormView',
+  name: 'LongFormView',
   slot: 'Root'
 })(({ theme }) => ({
   // This style must be applied only to root toolbars used to save data in the form.
   // 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).
@@ -46,7 +53,7 @@ function BaseForm(props: IBaseFormProps) {
     formProps = _.omit(props, ['spacing']);
   return (
-    <Form {...formProps} className="ApplicaLongFormView">
+    <Form {...formProps} className="LongFormView">
       <StyledGrid container spacing={spacing * 2}>
         {props.children}
       </StyledGrid>

package/src/components/ra-forms/Show.tsx CHANGED Viewed

@@ -1,24 +1,23 @@
-import { Show as RaShow } from 'react-admin';
+import { Show as RaShow, ShowProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
-export function Show(): JSX.Element {
+const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
+  '&>.MuiToolbar-root:first-of-type': {
+    backgroundColor: theme.palette.background.default
+  },
+  '& .RaShow-card, & > div > div > form': {
+    backgroundColor: theme.palette.background.default
+  },
+  '& .RaShow-main>.MuiPaper-root:first-of-type': {
+    // It took me 4 hours to write this line of code and solve a problem with react-sticky-box and Long Forms.
+    // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
+    // of all the elements inside the page.
+    overflow: 'visible'
+  }
+}));
+export function Show(props: ShowProps): JSX.Element {
   // @ts-ignore
-  return styled(RaShow, {
-    name: 'RaApplicaShow',
-    slot: 'root'
-  })(({ theme }) => ({
-    '&>.MuiToolbar-root:first-of-type': {
-      backgroundColor: theme.palette.background.default
-    },
-    '& .RaShow-card, & > div > div > form': {
-      backgroundColor: theme.palette.background.default
-    },
-    '& .RaShow-main>.MuiPaper-root:first-of-type': {
-      // It took me 4 hours to write this line of code and solve a problem with react-sticky-box and Long Forms.
-      // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
-      // of all the elements inside the page.
-      overflow: 'visible'
-    }
-  }));
+  return <StyledShow {...props} />;
 }
 export default Show;