@applica-software-guru/react-admin 1.4.206 → 1.4.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.4.206",
+  "version": "1.4.208",
   "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';
@@ -46,13 +46,14 @@ export type CreateInDialogContentProps = CreateControllerProps & {
   redirect: RedirectionSideEffect | boolean | undefined;
   children: React.ReactElement;
   /**
-   * @deprecated Use mutationOptions.onSubmit instead
+   * You can use it to handle the form submission yourself.
+   * Good luck with that.
    */
   onSubmit?: (record: any, close: () => void) => void;
   /**
    * @deprecated Use mutationOptions.onSuccess instead
    */
-  onSuccess?: (data: any) => void;
+  onSuccess?: (data: any, close: () => void) => void;
   /**
    * @deprecated Use mutationOptions.onError instead
    */
@@ -93,11 +94,10 @@ const CreateInDialogContent = ({
         redirect(_redirect as RedirectionSideEffect, resource, data.id, data);
       }
       if (onSuccess) {
-        onSuccess(data);
+        onSuccess(data, onClose);
       }
-      // WARN: This is a temporary solution to handle onSuccess from mutationOptions
       if (props?.mutationOptions?.onSuccess) {
-        props.mutationOptions.onSuccess(data, variables, context);
+        props.mutationOptions.onSuccess(data, variables, { ...(context as any), onClose });
       }
     },
     [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect]
@@ -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} />
@@ -215,8 +216,6 @@ 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 = fab && useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
@@ -238,20 +237,7 @@ export function CreateInDialogButton({
           <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
           {...controllerProps}
           redirect={redirect}

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/components/ra-forms/TabbedForm.tsx

@@ -76,7 +76,7 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
           m: 2.5,
           mb: 0
         },
-        '& .tabbed-form .MuiDivider-root': {
+        '& .tabbed-form > .MuiDivider-root': {
           ml: 2.5,
           mr: 2.5
         },

package/src/index.jsx

@@ -57,9 +57,11 @@ export {
   useAuthProvider,
   useChoices,
   useChoicesContext,
+  useCreateContext,
   useCreateController,
   useDataProvider,
   useEditContext,
+  useEditController,
   useGetIdentity,
   useGetList,
   useGetMany,
@@ -67,6 +69,7 @@ export {
   useGetOne,
   useInput,
   useListContext,
+  useListController,
   useLocaleState,
   useNotify,
   usePermissions,

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>
   );