@applica-software-guru/react-admin 1.4.205 → 1.4.207

package/package.json

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

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

@@ -13,7 +13,7 @@ import {
   useTranslate,
   UseCreateMutateParams
 } from 'react-admin';
-import { Dialog, Fab, useMediaQuery, useTheme } from '@mui/material';
+import { Dialog, Fab, useMediaQuery } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { SxProps, Theme, styled } from '@mui/material/styles';
 import { Toolbar } from '../ra-forms';
@@ -133,6 +133,7 @@ const CreateInDialogContent = ({
     >
       {React.cloneElement(children, {
         ...children.props,
+        modal: true,
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} disabled={createProps?.saving} />
@@ -209,14 +210,12 @@ export function CreateInDialogButton({
   onSubmit,
   onSuccess,
   onError,
-  ...props
+  ...controllerProps
 }: CreateInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
   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 = fab && useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
@@ -224,7 +223,6 @@ export function CreateInDialogButton({
     <>
       {isSmall ? (
         <StyledFab
-          {...props}
           // @ts-ignore
           state={scrollStates[String(scrollToTop)]}
           color="primary"
@@ -235,26 +233,13 @@ export function CreateInDialogButton({
           <ContentAdd />
         </StyledFab>
       ) : (
-        <Button {...props} sx={sx} label={label} onClick={handleOpen} style={style}>
+        <Button sx={sx} label={label} onClick={handleOpen} style={style}>
           <ContentAdd />
         </Button>
       )}
-      <Dialog
-        open={open}
-        scroll="body"
-        sx={{
-          '& .MuiToolbar-root': {
-            borderTop: `1px solid ${theme.palette.divider}`,
-            position: 'initial',
-            padding: 2.5
-          }
-        }}
-        onClose={handleClose}
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-      >
+      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
         <CreateInDialogContent
-          {...props}
+          {...controllerProps}
           redirect={redirect}
           record={record}
           onClose={handleClose}

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

@@ -12,7 +12,7 @@ import {
 } from 'react-admin';
 import React, { useCallback, useState } from 'react';
 
-import { Breakpoint, Dialog, useTheme } from '@mui/material';
+import { Breakpoint, Dialog } from '@mui/material';
 import { Edit } from '@mui/icons-material';
 import { Toolbar } from '../ra-forms';
 import { useAppConfig } from '../../hooks';
@@ -65,6 +65,8 @@ const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic',
       }}
     >
       {React.cloneElement(children, {
+        ...children.props,
+        modal: true,
         toolbar: (
           <Toolbar>
             <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
@@ -97,27 +99,12 @@ 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} style={style}>
         <Edit />
       </Button>
-      <Dialog
-        open={open}
-        scroll="body"
-        sx={{
-          '& .MuiToolbar-root': {
-            borderTop: `1px solid ${theme.palette.divider}`,
-            position: 'initial',
-            padding: 2.5
-          }
-        }}
-        onClose={handleClose}
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-      >
+      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
         <EditInDialogContent {...props} onClose={handleClose}>
           {children}
         </EditInDialogContent>

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

@@ -5,7 +5,7 @@ import {
   SaveButton,
   useRecordContext
 } from 'react-admin';
-import { styled } from '@mui/system';
+import { styled, useTheme } from '@mui/system';
 import { useResourceTitle } from '../../hooks';
 import ActionsMenu from '../ActionsMenu';
 import MainCard from '../MainCard';
@@ -13,7 +13,7 @@ import Toolbar from './Toolbar';
 
 const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   [theme.breakpoints.down('sm')]: {
-    paddingBottom: '20px',
+    paddingBottom: '20px'
   }
 }));
 
@@ -46,6 +46,7 @@ export function SimpleForm({
 }: SimpleFormProps): JSX.Element {
   const cardTitle = useResourceTitle(title);
   const record = useRecordContext();
+  const theme = useTheme();
   return (
     // @ts-ignore
     <MainCard
@@ -56,10 +57,13 @@ export function SimpleForm({
       sx={{
         ...sx,
         '& .MuiToolbar-root': {
+          position: 'initial',
           paddingLeft: 2.5,
           paddingRight: 2.5,
           paddingBottom: 2.5,
-          paddingTop: 0
+
+          paddingTop: modal ? 2.5 : 0,
+          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined
         }
       }}
       border={!modal}

package/src/playground/components/ra-forms/UserForm.jsx

@@ -4,6 +4,7 @@ import {
   ImageInput,
   SelectArrayInput,
   SimpleForm,
+  TabbedForm,
   TableFormIterator,
   TextInput,
   useThemeConfig
@@ -11,6 +12,7 @@ import {
 
 import { Grid } from '@mui/material';
 import PropTypes from 'prop-types';
+import { CreateInDialogButton, EditInDialogButton } from '../../../components';
 
 const UserForm = ({ configuredRoles }) => {
   const { spacing } = useThemeConfig();
@@ -42,7 +44,18 @@ const UserForm = ({ configuredRoles }) => {
           </ArrayInput>
         </Grid>
       </Grid>
-
+      <EditInDialogButton>
+        <TabbedForm>
+          <TabbedForm.Tab label="ciaooo">
+            <TextInput source="ciao" />
+          </TabbedForm.Tab>
+        </TabbedForm>
+      </EditInDialogButton>
+      <CreateInDialogButton>
+        <SimpleForm>
+          <TextInput source="ciao" />
+        </SimpleForm>
+      </CreateInDialogButton>
       <BooleanInput source="active" />
     </SimpleForm>
   );