@applica-software-guru/react-admin 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "private": false,
   "repository": {
     "type": "git",
@@ -70,6 +70,7 @@
     "react-hook-form": "^7.43.9",
     "react-router": "^6.1.0",
     "react-router-dom": "^6.1.0",
+    "react-sticky-box": "^2.0.4",
     "simplebar": "^6.2.5",
     "simplebar-react": "^3.2.4"
   },
@@ -96,9 +97,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
+    "vite": "^4.4.2",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-linter": "^2.0.2",
-    "vite": "^4.4.2",
     "vitest": "^0.33.0"
   },
   "peerDependencies": {

package/playground/src/menu.js

@@ -66,13 +66,6 @@ const config = [
         type: 'item',
         url: '/entities/device',
         icon: TableOutlined
-      },
-      {
-        id: 'entities/work-cycle',
-        title: 'ra.menu.item.entities/work-cycle',
-        type: 'item',
-        url: '/entities/work-cycle',
-        icon: TableOutlined
       }
     ]
   }

package/playground/src/theme.js

@@ -1,11 +1,9 @@
 const theme = (theme) => ({
   components: {
     MuiPaper: {
-      styleOverrides: {
-        backgroundColor: 'yellow'
-      }
+      styleOverrides: {}
     }
   }
-})
+});
 
-export default theme
+export default theme;

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

@@ -1,13 +1,19 @@
-import { Edit as RaEdit } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import { Edit as RaEdit } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const StyledEdit = styled(RaEdit, {
   name: 'RaApplicaEdit',
-  slot: 'root',
+  slot: 'root'
 })(({ theme }) => ({
   '& .RaEdi-card, & > div > div > form': {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.default
   },
-}))
+  '& .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'
+  }
+}));
 
-export default StyledEdit
+export default StyledEdit;

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

@@ -14,6 +14,7 @@ export type LongFormProps = {
   tabsDisposition?: Disposition;
   contentDisposition?: Disposition;
   children: React.ReactNode;
+  sticky?: boolean;
 };
 
 /**
@@ -40,11 +41,13 @@ LongForm.propTypes = {
   syncWithLocation: PropTypes.bool,
   spacing: PropTypes.number,
   tabsDisposition: DispositionProps,
-  contentDisposition: DispositionProps
+  contentDisposition: DispositionProps,
+  sticky: PropTypes.bool
 };
 
 LongForm.defaultProps = {
   syncWithLocation: false,
+  sticky: true,
   spacing: 2,
   tabsDisposition: { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 },
   contentDisposition: { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 }

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

@@ -11,7 +11,6 @@ const StyledList = styled(List, {
   slot: 'Root'
 })(({ theme }) => ({
   p: 0,
-
   '& .MuiListItemIcon-root': {
     minWidth: 32,
     color: theme.palette.grey[500]

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

@@ -1,5 +1,5 @@
 import { Disposition, DispositionProps } from './types';
-import React, { ReactElement, useMemo, useState } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import { Route, Routes, matchPath, useLocation, useResolvedPath } from 'react-router';
 import { getTabbedFormTabFullPath, useResourceContext } from 'react-admin';
 
@@ -8,18 +8,24 @@ import LongFormHeader from './LongFormSidebar';
 import LongFormTab from './LongFormTab';
 import LongFormTabs from './LongFormTabs';
 import PropTypes from 'prop-types';
+import StickyBox from 'react-sticky-box';
 import { styled } from '@mui/material/styles';
 
 const StyledGrid = styled(Grid, {
-  name: 'RaLongFormView',
+  name: 'ApplicaLongFormView',
   slot: 'Root'
 })(({ theme }) => ({
   '& .MuiToolbar-root': {
     marginTop: theme.spacing(2),
-    marginLeft: `-${theme.spacing(3)}`,
-    marginRight: `-${theme.spacing(3)}`,
+    marginLeft: `-${theme.spacing(2)}`,
+    marginRight: `-${theme.spacing(2.5)}`,
     marginBottom: `-${theme.spacing(2)}`,
     borderTop: `1px solid ${theme.palette.divider}`
+  },
+  '& form > .MuiToolbar-root': {
+    // È molto importante: questa regola serve per poter inserire form, all'interno di altri form, evitando
+    // che la toolbar del form interno recepisca gli stili della regola precedente (che genera un padding strano).
+    margin: 0
   }
 }));
 
@@ -34,6 +40,7 @@ export type LongFormViewProps = {
   tabs: React.ReactElement;
   tabsDisposition: Disposition;
   contentDisposition: Disposition;
+  sticky?: boolean;
 };
 
 const LongFormView = ({
@@ -44,6 +51,7 @@ const LongFormView = ({
   tabs,
   tabsDisposition,
   contentDisposition,
+  sticky,
   ...props
 }: LongFormViewProps) => {
   const [tabValue, setTabValue] = useState(0);
@@ -71,9 +79,9 @@ const LongFormView = ({
       },
       tabChildrens
     );
-  return (
-    <StyledGrid container spacing={spacing * 2}>
-      <Grid item {...tabsDisposition}>
+  const sidebarContent = useMemo(
+    () => (
+      <Fragment>
         {topSidebars}
         {syncWithLocation ? (
           <Routes>
@@ -83,7 +91,22 @@ const LongFormView = ({
           renderTabs()
         )}
         {bottomSidebars}
+      </Fragment>
+    ),
+    [topSidebars, syncWithLocation, renderTabs, bottomSidebars]
+  );
+  return (
+    <StyledGrid container spacing={spacing * 2}>
+      <Grid item {...tabsDisposition}>
+        {sticky ? (
+          <StickyBox offsetTop={74} offsetBottom={spacing * 2}>
+            {sidebarContent}
+          </StickyBox>
+        ) : (
+          sidebarContent
+        )}
       </Grid>
+
       <Grid item {...contentDisposition}>
         {/* All tabs are rendered (not only the one in focus), to allow validation
             on tabs not in focus. The tabs receive a `hidden` property, which they'll

package/src/components/ra-forms/{SimpleForm.jsx → SimpleForm.tsx}

@@ -1,69 +1,80 @@
 import {
   DeleteWithConfirmButton,
   SimpleForm as RaSimpleForm,
+  SimpleFormProps as RaSimpleFormProps,
   SaveButton,
-  useRecordContext,
-} from 'react-admin'
+  useRecordContext
+} from 'react-admin';
 
-import ActionsMenu from '../ActionsMenu'
-import MainCard from '../MainCard'
-import PropTypes from 'prop-types'
-import React from 'react'
-import Toolbar from './Toolbar'
-import { styled } from '@mui/system'
-import { useResourceTitle } from '../../hooks'
+import ActionsMenu from '../ActionsMenu';
+import MainCard from '../MainCard';
+import PropTypes from 'prop-types';
+import Toolbar from './Toolbar';
+import { styled } from '@mui/system';
+import { useResourceTitle } from '../../hooks';
 
 const ApplicaStyledSimpleForm = styled(RaSimpleForm, {
   name: 'RaApplicaSimpleForm',
-  slot: 'Root',
-})(({ theme, modal }) => ({
+  slot: 'Root'
+})(({ theme, modal }: { theme: any; modal: boolean }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
-    paddingBottom: theme.spacing(modal ? 2 : 1),
-  },
-}))
+    paddingBottom: theme.spacing(modal ? 2 : 1)
+  }
+}));
 
-const SimpleForm = ({ title, modal, content, subheader, secondary, ...props }) => {
-  const cardTitle = useResourceTitle(title)
-  const record = useRecordContext()
+export type SimpleFormProps = RaSimpleFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+};
+
+const SimpleForm = ({ title, modal, content, subheader, secondary, sx, ...props }: SimpleFormProps) => {
+  const cardTitle = useResourceTitle(title);
+  const record = useRecordContext();
   return (
+    // @ts-ignore
     <MainCard
       content={content}
       title={cardTitle}
       subheader={subheader}
       secondary={record?.id ? secondary : null}
+      sx={sx}
       border={!modal}
       divider
     >
+      {/* @ts-ignore */}
       <ApplicaStyledSimpleForm toolbar={<Toolbar />} {...props} />
     </MainCard>
-  )
-}
+  );
+};
 
 SimpleForm.defaultProps = {
-  ...RaSimpleForm.defaultProps,
   modal: false,
   content: false,
   subheader: null,
   title: null,
   toolbar: (
     <Toolbar>
-      <SaveButton />
+      <SaveButton type="button" />
     </Toolbar>
   ),
   secondary: (
     <ActionsMenu>
       <DeleteWithConfirmButton />
     </ActionsMenu>
-  ),
-}
+  )
+};
 
 SimpleForm.propTypes = {
   ...RaSimpleForm.propTypes,
-  contained: PropTypes.bool,
+  modal: PropTypes.bool,
   content: PropTypes.bool,
+  contained: PropTypes.bool,
   subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-}
+  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
+};
 
-export default SimpleForm
+export default SimpleForm;

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

@@ -0,0 +1,30 @@
+import { SimpleFormIterator as RaSimpleFormIterator } from 'ra-ui-materialui';
+import { styled } from '@mui/material/styles';
+
+// @ts-ignore
+export const SimpleFormIterator = styled(RaSimpleFormIterator, {
+  name: 'ApplicaSimpleFormIterator',
+  root: 'root'
+})(({ theme }) => ({
+  '& .RaSimpleFormIterator-line': {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(0.5)
+  },
+  '& .RaSimpleFormIterator-action': {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    mb: 1.5
+  },
+  '& section': {
+    width: '100%',
+    '& label': {
+      position: 'relative',
+      overflow: 'visible',
+      transform: 'none',
+      ml: 0
+    }
+  }
+}));
+
+export default SimpleFormIterator;

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

@@ -1,29 +1,29 @@
-import LabeledInput from './LabeledInput'
-import { ArrayInput as RaArrayInput } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import LabeledInput from './LabeledInput';
+import { ArrayInput as RaArrayInput } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const StyledArrayInput = styled(RaArrayInput, {
   name: 'RaApplicaArrayInput',
-  slot: 'root',
+  slot: 'root'
 })(({ theme }) => ({
   marginTop: '0 !important',
   '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
     paddingBottom: theme.spacing(0.5),
     '& > div': {
-      width: '100%',
-    },
-  },
-}))
+      width: '100%'
+    }
+  }
+}));
 
 const ArrayInput = (props) => (
-  <LabeledInput {...props}>
+  <LabeledInput {...props} divider>
     <StyledArrayInput {...props} />
   </LabeledInput>
-)
+);
 
 ArrayInput.propTypes = {
   ...RaArrayInput.propTypes,
-  ...LabeledInput.propTypes,
-}
+  ...LabeledInput.propTypes
+};
 
-export default ArrayInput
+export default ArrayInput;

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { useAppConfig } from '../../hooks';
 import { useTheme } from '@emotion/react';
 
-const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...props }) => {
+const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }) => {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -31,7 +31,14 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...p
       }}
     >
       {display === 'label' && label !== false && addLabel !== false && (
-        <InputLabel error={invalid === true}>
+        <InputLabel
+          error={invalid === true}
+          sx={{
+            borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
+            pb: divider ? 1 : 0,
+            mt: divider ? 1 : 0
+          }}
+        >
           <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
         </InputLabel>
       )}
@@ -43,7 +50,7 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...p
       {display === 'label' && helperText && (
         <FormHelperText
           sx={{
-            pl: 2,
+            pl: 1.8,
             pb: 2,
             marginTop: '0 !important'
           }}
@@ -65,11 +72,13 @@ LabeledInput.propTypes = {
   isRequired: PropTypes.bool,
   source: PropTypes.string,
   display: PropTypes.oneOf(['legend', 'label']),
-  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  divider: PropTypes.bool
 };
 
 LabeledInput.defaultProps = {
-  display: 'label'
+  display: 'label',
+  divider: false
 };
 
 export default LabeledInput;

package/src/components/ra-lists/Datagrid.jsx

@@ -1,5 +1,5 @@
-import { Datagrid as RaDatagrid } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import { Datagrid as RaDatagrid } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const ApplicaStyledDatagrid = styled(RaDatagrid, {
   name: 'RaApplicaDatagrid',
@@ -23,20 +23,19 @@ const ApplicaStyledDatagrid = styled(RaDatagrid, {
     left: -1
   },
   '& th': {
-    backgroundColor: 'yellow',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap'
   }
-}))
+}));
 
-const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />
+const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />;
 
 Datagrid.propTypes = {
   ...RaDatagrid.propTypes
-}
+};
 Datagrid.defaultProps = {
   ...RaDatagrid.defaultProps
-}
+};
 
-export default Datagrid
+export default Datagrid;

package/src/index.jsx

@@ -7,7 +7,6 @@ export * from './contexts';
 export * from './utils';
 
 export {
-  ArrayInput,
   ArrayInputContext,
   BooleanField,
   BulkDeleteWithConfirmButton,
@@ -22,6 +21,7 @@ export {
   DeleteWithConfirmButton,
   DeleteWithUndoButton,
   EditButton,
+  EditContextProvider,
   FieldTitle,
   email,
   Form,
@@ -48,7 +48,9 @@ export {
   UrlField,
   useArrayInput,
   useAuthProvider,
+  useCreateController,
   useDataProvider,
+  useEditContext,
   useGetIdentity,
   useGetList,
   useGetMany,

package/dist/components/ra-forms/SimpleForm.d.ts

@@ -1,26 +0,0 @@
-export default SimpleForm;
-declare function SimpleForm({ title, modal, content, subheader, secondary, ...props }: {
-    [x: string]: any;
-    title: any;
-    modal: any;
-    content: any;
-    subheader: any;
-    secondary: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleForm {
-    const defaultProps: any;
-    const propTypes: {
-        contained: PropTypes.Requireable<boolean>;
-        content: PropTypes.Requireable<boolean>;
-        subheader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        secondary: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultValues: PropTypes.Requireable<object>;
-        record: PropTypes.Requireable<object>;
-        toolbar: PropTypes.Requireable<NonNullable<boolean | PropTypes.ReactElementLike>>;
-        validate: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}
-import PropTypes from 'prop-types';
-//# sourceMappingURL=SimpleForm.d.ts.map

package/dist/components/ra-forms/SimpleForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleForm.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-forms/SimpleForm.jsx"],"names":[],"mappings":";AAwBA;;;;;;;4CAeC;;;;;;;;;;;;;;;;sBA9BqB,YAAY"}

package/dist/components/ra-forms/SimpleFormIterator.d.ts

@@ -1,5 +0,0 @@
-export const SimpleFormIterator: import("@emotion/styled").StyledComponent<Pick<import("ra-ui-materialui").SimpleFormIteratorProps, keyof import("ra-ui-materialui").SimpleFormIteratorProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
-    ref?: import("react").Ref<import("react").Component<import("ra-ui-materialui").SimpleFormIteratorProps, any, any>> | undefined;
-}>;
-export default SimpleFormIterator;
-//# sourceMappingURL=SimpleFormIterator.d.ts.map

package/dist/components/ra-forms/SimpleFormIterator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleFormIterator.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-forms/SimpleFormIterator.jsx"],"names":[],"mappings":"AAGA;;GAQG"}

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

@@ -1,14 +0,0 @@
-import { SimpleFormIterator as RaSimpleFormIterator } from 'ra-ui-materialui'
-import { styled } from '@mui/material/styles'
-
-export const SimpleFormIterator = styled(RaSimpleFormIterator, {
-  name: 'ApplicaSimpleFormIterator',
-  root: 'root'
-})(({ theme }) => ({
-  '& .RaSimpleFormIterator-line': {
-    paddingTop: theme.spacing(1),
-		paddingBottom: theme.spacing(0.5),
-  }
-}))
-
-export default SimpleFormIterator