@applica-software-guru/react-admin 1.2.119 → 1.2.121

package/package.json

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

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

@@ -220,7 +220,18 @@ const CreateInDialogButton = ({
           <Add />
         </Button>
       )}
-      <Dialog open={open} onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+      <Dialog
+        open={open}
+        scroll="body"
+        sx={{
+          '& .MuiToolbar-root': {
+            position: 'initial'
+          }
+        }}
+        onClose={handleClose}
+        fullWidth={fullWidth}
+        maxWidth={maxWidth}
+      >
         <CreateInDialogContent
           {...props}
           redirect={redirect}

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

@@ -80,7 +80,18 @@ const EditInDialogButton = ({ fullWidth, maxWidth, label, ...props }) => {
       <Button label={label} onClick={handleOpen}>
         <Edit />
       </Button>
-      <Dialog open={open} onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+      <Dialog
+        open={open}
+        scroll="body"
+        sx={{
+          '& .MuiToolbar-root': {
+            position: 'initial'
+          }
+        }}
+        onClose={handleClose}
+        fullWidth={fullWidth}
+        maxWidth={maxWidth}
+      >
         <EditInDialogContent {...props} onClose={handleClose} />
       </Dialog>
     </>

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

@@ -1,7 +1,8 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
-import _ from 'lodash';
-import { IItem } from './types';
 import { matchPath, useLocation } from 'react-router';
+
+import { IItem } from './types';
+import _ from 'lodash';
 import { getItemsIds } from './utils';
 
 enum ActionType {
@@ -61,8 +62,12 @@ function reducer(state: IState, action: IAction): IState {
       return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
     case ActionType.ADD_ITEM: {
       const id = payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
-      items.push(payload);
+        items = _.chain(newState.items)
+          .clone()
+          .reject((item: IItem) => item.id === id)
+          .concat([payload])
+          .orderBy((item) => item.index)
+          .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === undefined) {
         _.extend(newState, { activeItem: payload.id });
@@ -71,7 +76,10 @@ function reducer(state: IState, action: IAction): IState {
     }
     case ActionType.REMOVE_ITEM: {
       const id = _.isString(payload) ? payload : payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
+        items = _.chain(newState.items)
+          .clone()
+          .reject((item: IItem) => item.id === id)
+          .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === id) {
         _.extend(newState, { activeItem: _.first(items)?.id ?? undefined });
@@ -105,8 +113,8 @@ function Provider(props: IProviderProps) {
     const matchStrings = [
       'entities/:resource/create/*',
       ':resource/create/*',
-      'entities/:resource/:id/show',
-      ':resource/:id/show',
+      'entities/:resource/:id/show/*',
+      ':resource/:id/show/*',
       'entities/:resource/:id/*',
       ':resource/:id/*'
     ];

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

@@ -7,12 +7,12 @@ import { IItem } from './types';
 import { useIsActive } from './hooks';
 import { getId } from './utils';
 
-type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id'>>;
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'>>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
 function BaseItem(props: IBaseItemProps) {
-  const { label, icon, badge } = props,
+  const { label, icon, badge, index = 0 } = props,
     id = getId(props),
     addItem = useAddItem(),
     removeItem = useRemoveItem(),
@@ -21,6 +21,7 @@ function BaseItem(props: IBaseItemProps) {
   useEffect(() => {
     addItem({
       id: id,
+      index: index,
       label: label,
       icon: icon,
       badge: badge
@@ -28,7 +29,7 @@ function BaseItem(props: IBaseItemProps) {
     return () => {
       removeItem(id);
     };
-  }, [addItem, removeItem, label, icon, id, badge]);
+  }, [addItem, removeItem, label, icon, id, badge, index]);
 
   /* 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
@@ -57,8 +58,12 @@ function Tab(props: ITabProps) {
 function useBaseItemChildren(props: React.PropsWithChildren): Array<React.FunctionComponentElement<IBaseItemProps>> {
   const { children } = props,
     result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
-      //@ts-ignore
-      () => _.filter(Children.toArray(children), (Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group)),
+      () =>
+        //@ts-ignore
+        _.chain(Children.toArray(children))
+          .filter((Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group))
+          .map((Child: React.FunctionComponentElement<IBaseItemProps>, index) => cloneElement(Child, { index: index }))
+          .value(),
       [children]
     );
   return result;

package/src/components/ra-forms/LongForm/types.ts

@@ -8,6 +8,7 @@ type Disposition = {
 
 type IItem = {
   id: string;
+  index: number;
   label: string;
   icon?: React.ReactNode;
   badge?: {

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

@@ -18,8 +18,11 @@ const ApplicaStyledSimpleForm = styled(RaSimpleForm, {
   slot: 'Root'
 })(({ theme, modal }: { theme: any; modal: boolean }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
-    paddingBottom: theme.spacing(modal ? 2 : 1)
-  } as any
+    paddingBottom: theme.spacing(modal ? 0 : 1)
+  } as any,
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: 0
+  }
 }));
 
 export type SimpleFormProps = RaSimpleFormProps & {