@applica-software-guru/react-admin 1.5.238 → 1.5.242

package/package.json

@@ -115,5 +115,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.238"
+  "version": "1.5.242"
 }

package/src/components/ActionsMenu.tsx

@@ -21,6 +21,11 @@ const StyledMenuPopover = styled(MenuPopover, {
     margin: 0,
     '& .MuiButton-startIcon': {
       marginRight: theme.spacing(0)
+    },
+    [theme.breakpoints.down('sm')]: {
+      '&>.MuiSvgIcon-root, & svg': {
+        marginRight: theme.spacing(0)
+      }
     }
   }
 }));

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

@@ -0,0 +1,84 @@
+import { Button as MuiButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { LocationDescriptor, Button as RaButton, ButtonProps as RaButtonProps, useTranslate } from 'react-admin';
+
+type ButtonProps = RaButtonProps & {
+  /**
+   * Disable icon only in small screens.
+   */
+  disableIconOnly?: boolean;
+};
+
+const PREFIX = 'RaButton';
+function getLinkParams(locationDescriptor?: LocationDescriptor | string) {
+  // eslint-disable-next-line eqeqeq
+  if (locationDescriptor == undefined) {
+    return undefined;
+  }
+
+  if (typeof locationDescriptor === 'string') {
+    return { to: locationDescriptor };
+  }
+
+  const { redirect, replace, state, ...to } = locationDescriptor;
+  return {
+    to,
+    redirect,
+    replace,
+    state
+  };
+}
+const StyledButton = styled(MuiButton, {
+  name: PREFIX,
+  overridesResolver: (_props, styles) => styles.root
+})({
+  '&.MuiButton-sizeSmall': {
+    // fix for icon misalignment on small buttons, see https://github.com/mui/material-ui/pull/30240
+    lineHeight: 1.5
+  }
+});
+
+/**
+ * A button that can be displayed as a floating button on small screens.
+ * @param props The component props.
+ * @returns The component.
+ */
+function Button(props: ButtonProps): JSX.Element {
+  const {
+    disableIconOnly = false,
+    label,
+    children,
+    className,
+    color,
+    size,
+    disabled,
+    alignIcon,
+    to: locationDescriptor,
+    ...rest
+  } = props;
+  const translate = useTranslate();
+  const linkParams = getLinkParams(locationDescriptor);
+
+  if (disableIconOnly) {
+    const translatedLabel = label ? translate(label, { _: label }) : undefined;
+    return (
+      <StyledButton
+        className={className}
+        color={color}
+        size={size}
+        aria-label={translatedLabel}
+        disabled={disabled}
+        startIcon={alignIcon === 'left' && children ? children : undefined}
+        endIcon={alignIcon === 'right' && children ? children : undefined}
+        {...linkParams}
+        {...rest}
+      >
+        {translatedLabel}
+      </StyledButton>
+    );
+  }
+  return <RaButton {...props} />;
+}
+
+export { Button };
+export type { ButtonProps };

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

@@ -1,7 +1,9 @@
+import { Button as RaButton } from './Button';
 import { Toolbar } from '@/components/ra-forms';
+import { PlusCircleOutlined } from '@ant-design/icons';
 import { Breakpoint, Button, Dialog } from '@mui/material';
 import { CreateBase, UseCreateMutateParams, useResourceContext, useTranslate } from 'ra-core';
-import { CreateButton, CreateButtonProps, CreateProps, SaveButton } from 'ra-ui-materialui';
+import { ButtonProps, CreateButton, CreateButtonProps, CreateProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import { FieldValues, useFormContext } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
@@ -27,11 +29,14 @@ function setListQueryData(res: any, data: any) {
   return res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
 }
 
-type ResponsiveButtonProps = CreateButtonProps & {
-  label?: string;
-  onClick?: () => void;
-};
+type ResponsiveButtonProps = CreateButtonProps &
+  ButtonProps & {
+    label?: string;
+    onClick?: () => void;
+    disableFloatingButton?: boolean;
+  };
 function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
+  const { disableFloatingButton, startIcon = <PlusCircleOutlined />, ...rest } = props;
   const handleClick = useCallback(
     (event: any) => {
       (event as Event).preventDefault();
@@ -40,7 +45,15 @@ function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
     },
     [props]
   );
-  return <CreateButton {...props} onClick={handleClick} />;
+  return disableFloatingButton ? (
+    <RaButton {...rest} onClick={handleClick}>
+      {startIcon as any}
+    </RaButton>
+  ) : (
+    <CreateButton {...props} onClick={handleClick}>
+      {startIcon as any}
+    </CreateButton>
+  );
 }
 type CloseDialogFunction = () => void;
 type SubmitFunction = (values: FieldValues, closeDialog: CloseDialogFunction) => void;
@@ -72,6 +85,12 @@ type CreateInDialogButtonProps = PropsWithChildren &
     maxWidth: Breakpoint;
     fullWidth?: boolean;
     fullScreen?: boolean;
+    /**
+     * Indicates whether the floating button should be disabled.
+     * Default is false, this mean that the floating button will be displayed on small screens.
+     * **If you have multiple buttons on the same page, they will be displayed over each other! **
+     */
+    disableFloatingButton?: boolean;
     scroll: 'paper' | 'body' | undefined;
     /**
      * Custom handler for the submit event, in this case you are responsible for closing the dialog.
@@ -122,7 +141,7 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
 
   return (
     <>
-      <ResponsiveButton {...rest} onClick={handleOpen} />
+      <ResponsiveButton {...(rest as any)} onClick={handleOpen} />
       <CreateBase
         {...props}
         mutationOptions={{
@@ -137,11 +156,6 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
           maxWidth={maxWidth}
           fullWidth={fullWidth}
           fullScreen={fullScreen}
-          sx={{
-            '& .MuiToolbar-root': {
-              position: 'relative !important'
-            }
-          }}
         >
           {React.isValidElement(Child)
             ? React.cloneElement(Child, {

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

@@ -1,8 +1,10 @@
+import { Button } from './Button';
 import { Toolbar } from '@/components/ra-forms';
-import { Breakpoint, Button, Dialog } from '@mui/material';
-import { EditBase, UseUpdateMutateParams, useRecordContext, useTranslate } from 'ra-core';
+import { Breakpoint, Dialog } from '@mui/material';
+import { EditBase, UseUpdateMutateParams, useRecordContext } from 'ra-core';
 import { EditButton, EditProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
+import { FieldValues, useFormContext } from 'react-hook-form';
 
 type ResponsiveButtonProps = {
   label?: string;
@@ -21,6 +23,34 @@ function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
   return <EditButton {...props} onClick={handleClick} />;
 }
 
+type CloseDialogFunction = () => void;
+type SubmitFunction = (values: FieldValues, closeDialog: CloseDialogFunction) => void;
+type SubmitButtonProps = {
+  onSubmit: SubmitFunction;
+  closeDialog: CloseDialogFunction;
+};
+function SubmitButton(props: SubmitButtonProps) {
+  const { onSubmit, closeDialog } = props;
+  const { handleSubmit } = useFormContext();
+  const handleClick = useCallback(
+    (event: any) => {
+      (event as Event).preventDefault();
+      (event as Event).stopPropagation();
+      handleSubmit((fieldValues) => onSubmit(fieldValues, closeDialog))();
+    },
+    [handleSubmit, onSubmit, closeDialog]
+  );
+  return (
+    <Button
+      disableIconOnly
+      onClick={handleClick}
+      color="primary"
+      variant="contained"
+      size="medium"
+      label="ra.action.save"
+    />
+  );
+}
 type EditInDialogButtonProps = PropsWithChildren &
   EditProps &
   ResponsiveButtonProps & {
@@ -28,9 +58,25 @@ type EditInDialogButtonProps = PropsWithChildren &
     fullWidth?: boolean;
     fullScreen?: boolean;
     scroll: 'paper' | 'body' | undefined;
+    /**
+     * Custom handler for the submit event, in this case you are responsible for closing the dialog.
+     * @example
+     *
+     * const handleSubmit = (values, closeDialog) => {
+     *  console.log(values); // { title: 'Hello World' }
+     *  closeDialog();
+     * }
+     * <CreateInDialogButton onSubmit={handleSubmit}>
+     *  <SimpleForm>
+     *    <TextInput source="title" />
+     *  </SimpleForm>
+     * </CreateInDialogButton>
+     *
+     */
+    onSubmit?: SubmitFunction;
   };
 function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
-  const { children, maxWidth = 'md', fullWidth = true, fullScreen, mutationOptions, scroll, ...rest } = props;
+  const { children, maxWidth = 'md', fullWidth = true, fullScreen, mutationOptions, onSubmit, scroll, ...rest } = props;
   const [open, setOpen] = useState(false);
   const Child = Children.only(children);
   const handleOpen = useCallback(() => setOpen(true), []);
@@ -43,7 +89,6 @@ function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
     [handleClose, props.mutationOptions]
   );
   const record = useRecordContext();
-  const translate = useTranslate();
   return (
     <>
       <ResponsiveButton {...rest} onClick={handleOpen} />
@@ -64,11 +109,6 @@ function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
           maxWidth={maxWidth}
           fullScreen={fullScreen}
           keepMounted={false}
-          sx={{
-            '& .MuiToolbar-root': {
-              position: 'relative !important'
-            }
-          }}
         >
           {React.isValidElement(Child)
             ? React.cloneElement(Child, {
@@ -76,10 +116,18 @@ function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
                 modal: true,
                 toolbar: (
                   <Toolbar>
-                    <Button variant="text" size="medium" onClick={handleClose}>
-                      {translate('ra.action.cancel')}
-                    </Button>
-                    <SaveButton type="button" />
+                    <Button
+                      disableIconOnly
+                      variant="text"
+                      size="medium"
+                      onClick={handleClose}
+                      label="ra.action.cancel"
+                    />
+                    {onSubmit ? (
+                      <SubmitButton onSubmit={onSubmit!} closeDialog={handleClose} />
+                    ) : (
+                      <SaveButton type="button" />
+                    )}
                   </Toolbar>
                 )
               })

package/src/components/ra-buttons/index.ts

@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CreateInDialogButton';
 export * from './EditInDialogButton';
 export * from './ImpersonateUserButton';

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

@@ -85,7 +85,6 @@ const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }: { theme:
     backgroundColor: theme.palette.background.default
   },
   '& .RaToolbar-mobileToolbar': {
-    position: 'initial !important',
     paddingLeft: `${theme.spacing(2.5)} !important`,
     paddingRight: `${theme.spacing(2.5)} !important`,
     paddingTop: '0 !important'

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

@@ -16,7 +16,6 @@ const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
   },
 
   '& .RaToolbar-mobileToolbar': {
-    position: 'initial !important',
     paddingLeft: `${theme.spacing(2.5)} !important`,
     paddingRight: `${theme.spacing(2.5)} !important`,
     paddingTop: '0 !important'

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

@@ -15,22 +15,17 @@ const StyledGrid = styled(Grid, {
   // 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),
     marginLeft: `-${theme.spacing(3)}`,
     marginRight: `-${theme.spacing(3)}`,
     marginBottom: `-${theme.spacing(2)}`,
-    // borderTop: `1px solid ${theme.palette.divider}`,
     paddingTop: theme.spacing(2.5),
     paddingBottom: theme.spacing(2.5),
     [theme.breakpoints.down('sm')]: {
-      position: 'initial !important',
       width: 'auto !important',
       marginRight: 0
     }
   },
   '& .RaToolbar-mobileToolbar': {
-    position: 'initial !important',
     paddingTop: `${theme.spacing(2.5)} !important`,
     paddingLeft: '0 !important',
     paddingRight: '0 !important',

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

@@ -49,7 +49,6 @@ function SimpleForm({
       sx={{
         ...sx,
         '& .MuiToolbar-root': {
-          position: 'initial',
           paddingLeft: theme.spacing(2.5),
           paddingRight: theme.spacing(2.5),
           paddingBottom: theme.spacing(2.5),

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

@@ -73,7 +73,6 @@ function TabbedForm(props: TabbedFormProps): JSX.Element {
           mr: 2.5
         },
         '& .MuiToolbar-root.RaToolbar-desktopToolbar': {
-          position: 'initial',
           paddingTop: modal ? theme.spacing(2.5) : 0
         },
         '& .MuiToolbar-root': {

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

@@ -6,6 +6,7 @@ const StyledToolbar = styled(RaToolbar, { slot: 'Root' })(({ theme }: { theme: a
   ...theme.mixins.toolbar,
   backgroundColor: theme.palette.background.paper,
   justifyContent: 'flex-end',
+  position: 'initial !important',
 
   '& .RaToolbar-defaultToolbar': {
     justifyContent: 'right',
@@ -20,8 +21,7 @@ const StyledToolbar = styled(RaToolbar, { slot: 'Root' })(({ theme }: { theme: a
 }));
 
 function Toolbar(props: ToolbarProps): JSX.Element {
-  // @ts-ignore
-  return <StyledToolbar {...props} />;
+  return <StyledToolbar {...(props as any)} />;
 }
 
 export { Toolbar };

package/src/index.ts

@@ -13,7 +13,6 @@ export {
   ArrayInputContext,
   BooleanField,
   BulkDeleteWithConfirmButton,
-  Button,
   ChipField,
   Confirm,
   CreateButton,

package/src/playground/components/ra-lists/CategoryList.jsx

@@ -27,7 +27,7 @@ function CategorySubmitButton() {
     console.log(values);
   }
   return (
-    <CreateInDialogButton onSubmit={handleSubmit} redirect="list" label="Submit">
+    <CreateInDialogButton onSubmit={handleSubmit} redirect="list" label="Submit" size="medium">
       <SimpleForm>
         <TextInput source="description" validate={required()} fullWidth />
       </SimpleForm>
@@ -55,6 +55,9 @@ function CategoryList() {
         <EditInDialogButton>
           <CategoryForm />
         </EditInDialogButton>
+        <EditInDialogButton label="Edit with Submit" onSubmit={console.log}>
+          <CategoryForm />
+        </EditInDialogButton>
       </Datagrid>
     </List>
   );