@applica-software-guru/react-admin 1.4.189 → 1.4.192

package/package.json

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

package/src/components/ActionsMenu.tsx

@@ -17,7 +17,7 @@ const StyledMenuPopover = styled(MenuPopover, {
   '& .MuiMenuItem-root': {
     padding: 0,
     margin: 0,
-    backgroundColor: theme.palette.background.paper,
+    // backgroundColor: theme.palette.background.paper,
     '& .MuiButton-startIcon': {
       marginRight: theme.spacing(0)
     }
@@ -74,6 +74,8 @@ export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps):
     }
   }, []);
 
+  const btnAdditionalStyles = { width: '100%', justifyContent: 'flex-start' };
+
   return (
     <StyledRoot>
       <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} color={open ? 'inherit' : 'default'}>
@@ -82,12 +84,12 @@ export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps):
       <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>

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

@@ -153,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;
@@ -171,6 +176,8 @@ export function CreateInDialogButton({
   scrollToTop = true,
   className,
   sx,
+  style,
+  fab = true,
   onSubmit,
   onSuccess,
   onError,
@@ -183,7 +190,7 @@ export function CreateInDialogButton({
 
   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 ? (
@@ -199,14 +206,21 @@ 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': {
+            position: 'initial',
+            paddingLeft: 2.5,
+            paddingRight: 2.5,
+            paddingBottom: 2.5,
+          }
+        }}
         onClose={handleClose}
         fullWidth={fullWidth}
         maxWidth={maxWidth}

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

@@ -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);
@@ -88,7 +90,7 @@ export function EditInDialogButton({
 
   return (
     <>
-      <Button label={label} onClick={handleOpen}>
+      <Button label={label} onClick={handleOpen} style={style}>
         <Edit />
       </Button>
       <Dialog
@@ -96,7 +98,10 @@ export function EditInDialogButton({
         scroll="body"
         sx={{
           '& .MuiToolbar-root': {
-            position: 'initial'
+            position: 'initial',
+            paddingLeft: 2.5,
+            paddingRight: 2.5,
+            paddingBottom: 2.5,
           }
         }}
         onClose={handleClose}