@applica-software-guru/react-admin 1.0.76 → 1.0.78

package/package.json

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

package/src/components/@extended/Breadcrumbs.jsx

@@ -18,11 +18,13 @@ const renderBreadcrumb = ({ id, title, icon, url, last }) => {
       to={url}
       variant={last ? 'subtitle1' : 'h6'}
       sx={{
-        textDecoration: 'none'
+        textDecoration: 'none',
+        display: 'inline-flex',
+        alignItems: 'center'
       }}
       color="textSecondary"
     >
-      {icon && <Icon style={{ marginRight: 8 }} />}
+      {icon && <Icon style={{ marginRight: 8, fontSize: '0.875rem' }} />}
       {title}
     </Typography>
   );

package/src/components/ra-inputs/{LabeledInput.jsx → LabeledInput.tsx}

@@ -1,4 +1,4 @@
-import { FieldTitle, useInput } from 'react-admin';
+import { FieldTitle, InputProps, useInput } from 'react-admin';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
 
 import PropTypes from 'prop-types';
@@ -6,7 +6,25 @@ import React from 'react';
 import { useAppConfig } from '../../hooks';
 import { useTheme } from '@emotion/react';
 
-const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }) => {
+export type LabeledInputProps = InputProps & {
+  sx?: any;
+  children?: React.ReactElement;
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source?: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+};
+
+/**
+ * Consente di disegnare un input con una label e un eventuale messaggio di aiuto.
+ *
+ * @returns {JSX.Element}
+ */
+const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }: LabeledInputProps): JSX.Element => {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -18,10 +36,13 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
     <Stack
       spacing={1}
       sx={{
+        // @ts-ignore
+        width: props?.fullWidth ? '100%' : 'auto',
         '& .MuiFormHelperText-root': {
           // @see: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx#L340
           // the 'invalid' prop is not used inside the react-admin component. This is necessary if we want to support
           // remove error message colorization when the field is in error state.
+          /** @ts-ignore */
           color: invalid ? theme.palette.error.main : theme.palette.text.secondary,
           '& span': {
             display: 'none'
@@ -34,6 +55,7 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
         <InputLabel
           error={invalid === true}
           sx={{
+            // @ts-ignore
             borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
             pb: divider ? 1 : 0,
             mt: divider ? 1 : 0
@@ -44,6 +66,7 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
       )}
       {React.isValidElement(children)
         ? React.cloneElement(children, {
+            // @ts-ignore
             ...children.props,
             ...props,
             label: display === 'legend' ? label : false

package/src/components/ra-lists/List.tsx

@@ -32,37 +32,52 @@ const ApplicaStyledList = styled(RaList, {
       },
       '& .MuiButton-root': {
         margin: theme.spacing(2)
-      },
-      '& .RaFilterForm-filterFormInput > .ra-input': {
-        alignSelf: 'center'
+      }
+    },
+
+    '& .RaList-actions': {
+      padding: theme.spacing(2),
+      paddingTop: 0,
+      '& .RaFilterForm-filterFormInput': {
+        '& .ra-input': {
+          alignSelf: 'center'
+        },
+        [theme.breakpoints.down('sm')]: {
+          // Quando lo schermo è piccolo, il filtro viene visualizzato in una colonna.
+          // Diamo un margine maggiore in basso per evitare che siano troppo vicini.
+          marginTop: theme.spacing(1),
+          marginBottom: theme.spacing(1)
+        }
       },
       '& .RaFilterFormInput-hideButton': {
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(0.5),
         marginRight: theme.spacing(1)
+      },
+      '& > .MuiToolbar-root': {
+        flex: 'unset',
+        padding: 0
       }
-    }
-  },
-  '& .RaList-actions': {
-    padding: theme.spacing(2),
-    paddingTop: 0
-  },
-  '& .RaList-content': {
-    // Resolve an issue related to the visualization of the bulk actions toolbar.
-    // Padding and margin create a non empty space that allows the toolbar to be displayed when
-    // the selection is empty.
-    '& .RaBulkActionsToolbar-collapsed': {
-      height: 0,
-      paddingTop: 0,
-      paddingBottom: 0
     },
-    // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
-    // These two lines are not needed if you are not using AntDesign icons.
-    '& .icon span': {
-      top: -1,
-      left: -1
+
+    '& .RaList-content': {
+      // Resolve an issue related to the visualization of the bulk actions toolbar.
+      // Padding and margin create a non empty space that allows the toolbar to be displayed when
+      // the selection is empty.
+      '& .RaBulkActionsToolbar-collapsed': {
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0
+      },
+      // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
+      // These two lines are not needed if you are not using AntDesign icons.
+      '& .icon span': {
+        top: -1,
+        left: -1
+      }
     }
   },
+
   '& .RaEmpty-toolbar': {
     margin: theme.spacing(2)
   }