@applica-software-guru/react-admin 1.4.200 → 1.4.202

package/package.json

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

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

@@ -2,6 +2,7 @@ import {
   Button,
   CreateButtonClasses,
   CreateContextProvider,
+  CreateControllerProps,
   CreateControllerResult,
   RedirectionSideEffect,
   SaveButton,
@@ -9,16 +10,17 @@ import {
   useNotify,
   useRedirect,
   useResourceContext,
-  useTranslate
+  useTranslate,
+  UseCreateMutateParams
 } from 'react-admin';
 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';
 import { Toolbar } from '../ra-forms';
 import clsx from 'clsx';
 import { useAppConfig } from '../../hooks';
 import { useQueryClient } from 'react-query';
+import ContentAdd from '@mui/icons-material/Add';
 
 const updateColl = (old: any, data: any) => {
   const id = data.id;
@@ -38,13 +40,22 @@ const setManyQueryData = (coll: any, data: any) => (coll && coll.length > 0 ? up
 const setListQueryData = (res: any, data: any) =>
   res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
 
-export type CreateInDialogContentProps = {
+export type CreateInDialogContentProps = CreateControllerProps & {
   onClose: () => void;
   record?: any;
   redirect: RedirectionSideEffect | boolean | undefined;
   children: React.ReactElement;
+  /**
+   * @deprecated Use mutationOptions.onSubmit instead
+   */
   onSubmit?: (record: any, close: () => void) => void;
+  /**
+   * @deprecated Use mutationOptions.onSuccess instead
+   */
   onSuccess?: (data: any) => void;
+  /**
+   * @deprecated Use mutationOptions.onError instead
+   */
   onError?: (error: any) => void;
 };
 
@@ -55,14 +66,15 @@ const CreateInDialogContent = ({
   redirect: _redirect = false,
   onSubmit,
   onSuccess,
-  onError
+  onError,
+  ...props
 }: CreateInDialogContentProps) => {
   const queryClient = useQueryClient();
   const resource = useResourceContext();
   const redirect = useRedirect();
   const notify = useNotify();
   const handleSuccess = useCallback(
-    (data: any) => {
+    (data: any, variables: UseCreateMutateParams<any>, context: unknown) => {
       const now = Date.now();
       const updatedAt = now;
 
@@ -83,11 +95,17 @@ const CreateInDialogContent = ({
       if (onSuccess) {
         onSuccess(data);
       }
+      // WARN: This is a temporary solution to handle onSuccess from mutationOptions
+      if (props?.mutationOptions?.onSuccess) {
+        props.mutationOptions.onSuccess(data, variables, context);
+      }
     },
     [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect]
   );
   const { save, ...createProps } = useCreateController({
+    ...props,
     mutationOptions: {
+      ...props?.mutationOptions,
       onSuccess: handleSuccess,
       onError: onError
     }
@@ -144,7 +162,7 @@ const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.ro
   }
 }));
 
-export type CreateInDialogButtonProps = {
+export type CreateInDialogButtonProps = CreateControllerProps & {
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
   label?: string;
@@ -159,8 +177,18 @@ export type CreateInDialogButtonProps = {
    * If set to false, the button will always render as a regular button, regardless of the screen size.
    */
   fab: boolean;
+  /**
+   * @deprecated Use mutationOptions.onSubmit instead
+   */
   onSubmit?: (record: any, close: () => void) => void;
+  /**
+   * @deprecated Use mutationOptions.onSuccess instead
+   */
   onSuccess?: (data: any) => void;
+  /**
+   *
+   * @deprecated Use mutationOptions.onError instead
+   */
   onError?: (error: any) => void;
 };
 
@@ -204,11 +232,11 @@ export function CreateInDialogButton({
           aria-label={label && translate(label)}
           onClick={handleOpen}
         >
-          <PlusCircleOutlined />
+          <ContentAdd />
         </StyledFab>
       ) : (
         <Button {...props} sx={sx} label={label} onClick={handleOpen} style={style}>
-          <PlusCircleOutlined />
+          <ContentAdd />
         </Button>
       )}
       <Dialog

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

@@ -2,6 +2,7 @@
 import {
   Button,
   EditContextProvider,
+  EditControllerProps,
   SaveButton,
   useEditController,
   useGetOne,
@@ -16,31 +17,39 @@ import { Edit } from '@mui/icons-material';
 import { Toolbar } from '../ra-forms';
 import { useAppConfig } from '../../hooks';
 
-type EditInDialogContentProps = {
+type EditInDialogContentProps = EditControllerProps & {
   onClose: () => void;
   children: React.ReactElement;
 };
-const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) => {
+const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) => {
   const notify = useNotify();
   const record = useRecordContext();
   const resource = useResourceContext();
   const { id } = record;
   const { isLoading, data } = useGetOne(resource, { id });
 
-  const handleSuccess = useCallback(() => {
-    notify('ra.notification.updated', {
-      type: 'info',
-      messageArgs: {
-        smart_count: 1
+  const handleSuccess = useCallback(
+    (...args: any) => {
+      notify('ra.notification.updated', {
+        type: 'info',
+        messageArgs: {
+          smart_count: 1
+        }
+      });
+      onClose();
+      if (props.onSuccess) {
+        props.onSuccess(...args);
       }
-    });
-    onClose();
-  }, [onClose, notify]);
+    },
+    [onClose, notify]
+  );
   const { save, saving } = useEditController({
+    ...props,
     resource,
     id,
-    mutationMode: 'pessimistic',
+    mutationMode,
     mutationOptions: {
+      ...props?.mutationOptions,
       onSuccess: handleSuccess
     }
   });
@@ -67,7 +76,7 @@ const EditInDialogContent = ({ onClose, children }: EditInDialogContentProps) =>
   );
 };
 
-export type EditInDialogButtonProps = {
+export type EditInDialogButtonProps = EditControllerProps & {
   fullWidth?: boolean;
   maxWidth?: false | Breakpoint | undefined;
   label?: string;
@@ -80,6 +89,7 @@ export function EditInDialogButton({
   maxWidth = 'md',
   label = 'ra.action.edit',
   style,
+  children,
   ...props
 }: EditInDialogButtonProps): JSX.Element {
   const [open, setOpen] = useState(false);
@@ -108,7 +118,9 @@ export function EditInDialogButton({
         fullWidth={fullWidth}
         maxWidth={maxWidth}
       >
-        <EditInDialogContent onClose={handleClose}>{props?.children}</EditInDialogContent>
+        <EditInDialogContent {...props} onClose={handleClose}>
+          {children}
+        </EditInDialogContent>
       </Dialog>
     </>
   );

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

@@ -37,8 +37,7 @@ const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButto
         },
         [theme.breakpoints.down('md')]: {
           marginTop: 0,
-          display: 'none',
-          visibility: 'hidden'
+          display: 'contents'
         }
       }
     },