@applica-software-guru/react-admin 1.3.167 → 1.3.169

package/package.json

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

package/src/components/Layout/Content.tsx

@@ -5,6 +5,7 @@ import { Loading } from 'ra-ui-materialui';
 import { ErrorInfo, Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import Error, { ErrorProps } from './Error';
+import { useTheme } from '@mui/material/styles';
 
 type ILayoutContentProps = React.PropsWithChildren & {
   error?: React.ComponentType<ErrorProps>;
@@ -19,6 +20,7 @@ function LayoutContent(props: ILayoutContentProps) {
   const handleError = (error: Error, info: ErrorInfo) => {
     setErrorInfo(info);
   };
+  const theme = useTheme();
 
   return (
     <ErrorBoundary
@@ -37,7 +39,10 @@ function LayoutContent(props: ILayoutContentProps) {
               position: 'relative',
               minHeight: 'calc(100vh - 110px)',
               display: 'flex',
-              flexDirection: 'column'
+              flexDirection: 'column',
+              [theme.breakpoints.down('sm')]: {
+                px: '12px',
+              }
             }}
           >
             {props.children}

package/src/components/Layout/Header/ResponsiveSection.tsx

@@ -19,6 +19,7 @@ const ResponsiveSection = (props: IResponsiveSectionProps) => {
     <>
       {/*@ts-ignore*/}
       <HeaderToggleButton
+        value="drawer"
         aria-label="open more menu"
         aria-controls={open ? 'menu-list-grow' : undefined}
         aria-haspopup="true"

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

@@ -79,9 +79,17 @@ const StyledCreate = styled(Create, {
     backgroundColor: theme.palette.background.default
   },
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
-    overflow: 'visible',
     backgroundColor: theme.palette.background.default
-  }
+  },
+  // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
+  // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
+  // di tutti gli elementi presenti all'interno della pagina.
+  '& .RaCreate-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+    overflow: 'visible'
+  },
+  '& .RaCreate-main:has(.tabbed-form) .MuiTableContainer-root': {
+    width: 'inherit',
+  },
 }));
 
 export default StyledCreate;

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

@@ -21,11 +21,16 @@ const StyledEdit = styled(RaEdit, {
     borderTop: `1px solid ${theme.palette.divider}`
   },
   '& .RaEdit-main>.MuiPaper-root:first-of-type': {
-    // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
-    // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
-    // di tutti gli elementi presenti all'interno della pagina.
-    overflow: 'visible',
     backgroundColor: theme.palette.background.default
+  },
+  // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
+  // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
+  // di tutti gli elementi presenti all'interno della pagina.
+  '& .RaEdit-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+    overflow: 'visible'
+  },
+  '& .RaEdit-main:has(.tabbed-form) .MuiTableContainer-root': {
+    width: 'inherit'
   }
 }));
 

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

@@ -42,7 +42,7 @@ function BaseForm(props: IBaseFormProps) {
     formProps = _.omit(props, ['spacing']);
 
   return (
-    <Form {...formProps}>
+    <Form {...formProps} className='ApplicaLongFormView'>
       <StyledGrid container spacing={spacing * 2}>
         {props.children}
       </StyledGrid>

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
 import { styled, useTheme } from '@mui/material/styles';
-
+import ActionsMenu from '../../ActionsMenu';
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from '../../../contexts';
@@ -52,6 +52,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     disableActions = false,
     disableAdd = false,
     disableRemove = false,
+    enableClearAll = false,
     className,
     empty,
     template = {}
@@ -143,6 +144,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 
   // @ts-ignore
   const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
+  const showClearAllButton = fields.length > 0 && enableClearAll;
 
   return fields ? (
     // @ts-ignore
@@ -175,9 +177,17 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
                 })}
 
                 {!disableActions && (
-                  <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', verticalAlign: 'top' }} key={'actions'}>
-                    <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none" />
-                  </TableCell>
+                  showClearAllButton ? (
+                    <TableCell key='actions' sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                      <ActionsMenu horizontal>
+                        <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
+                          {translate('ra.action.delete')}
+                        </Typography>
+                      </ActionsMenu>
+                    </TableCell>
+                  ) : (
+                    <TableCell key='empty_actions' />
+                  )
                 )}
               </TableRow>
             </TableHead>
@@ -290,6 +300,7 @@ TableFormIterator.propTypes = {
   resource: PropTypes.string,
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
+  enableClearAll: PropTypes.bool,
   disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   TransitionProps: PropTypes.shape({}),
   empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
@@ -303,6 +314,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   disableAdd?: boolean;
   disableActions?: boolean;
   disableRemove?: boolean;
+  enableClearAll?: boolean;
   template?: object;
   meta?: {
     // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.

package/src/components/ra-inputs/BooleanInput.jsx

@@ -7,7 +7,9 @@ import { BooleanInput as RaBooleanInput } from 'react-admin';
 const ApplicaStyledBooleanInput = styled(RaBooleanInput, {
   name: 'RaApplicaBooleanInput',
   slot: 'Root'
-})(() => ({}));
+})(() => ({
+  marginTop: '0 !important'
+}));
 
 const BooleanInput = ({ horizontal, ...props }) => {
   // eslint-disable-next-line no-unused-vars