@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/src/components/Layout/Navigation/NavCollapse.tsx

@@ -1,3 +1,7 @@
+import { NavItem } from './NavItem';
+import { Dot, Transitions } from '@/components/@extended';
+import { useMenuConfig } from '@/components/Layout/MenuProvider';
+import { useLayoutMediaState } from '@/components/Layout/Provider';
 import { BorderOutlined, DownOutlined, RightOutlined, UpOutlined } from '@ant-design/icons';
 import {
   Box,
@@ -9,18 +13,13 @@ import {
   ListItemText,
   Paper,
   Popper,
-  Typography,
-  Theme
+  Theme,
+  Typography
 } from '@mui/material';
-import { Dot, Transitions } from '../../@extended';
 import { styled, useTheme } from '@mui/material/styles';
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import NavItem from './NavItem';
-import { useLayoutMediaState } from '../Provider';
-import { useMenuConfig } from '../../../hooks';
-
 const PopperStyled = styled(Popper)(({ theme }: { theme: Theme }) => ({
   overflow: 'visible',
   zIndex: 1202,
@@ -36,14 +35,14 @@ const PopperStyled = styled(Popper)(({ theme }: { theme: Theme }) => ({
     backgroundColor: theme.palette.background.paper,
     transform: 'translateY(-50%) rotate(45deg)',
     zIndex: 120,
-    // @ts-ignore
+    // @ts-expect-error TypeScript doesn't know about this property
     borderLeft: `1px solid ${theme.palette.grey.A800}`,
-    // @ts-ignore
+    // @ts-expect-error TypeScript doesn't know about this property
     borderBottom: `1px solid ${theme.palette.grey.A800}`
   }
 }));
 
-export type NavCollapseProps = {
+type NavCollapseProps = {
   menu: any;
   level: number;
   parentId: string;
@@ -53,7 +52,15 @@ export type NavCollapseProps = {
   selectedLevel: number;
 };
 
-const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }: NavCollapseProps) => {
+function NavCollapse({
+  menu,
+  level,
+  parentId,
+  setSelectedItems,
+  selectedItems,
+  setSelectedLevel,
+  selectedLevel
+}: NavCollapseProps) {
   const theme = useTheme();
   const { activeItem } = useMenuConfig();
   const { horizontal } = useLayoutMediaState();
@@ -65,7 +72,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
 
   const [anchorEl, setAnchorEl] = useState(null);
 
-  const handleClick = (event: any) => {
+  function handleClick(event: any) {
     setAnchorEl(null);
     setSelectedLevel(level);
     if (drawerOpen) {
@@ -76,23 +83,23 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
     } else {
       setAnchorEl(event?.currentTarget);
     }
-  };
+  }
 
-  const handlerIconLink = () => {
+  function handlerIconLink() {
     if (!drawerOpen) {
       if (menu.url) Navigation(`${menu.url}`);
     }
-  };
+  }
 
-  const handleHover = (event: any) => {
+  function handleHover(event: any) {
     setAnchorEl(event?.currentTarget);
-  };
+  }
 
-  const handleClose = () => {
+  function handleClose() {
     setOpen(false);
     setSelected(null);
     setAnchorEl(null);
-  };
+  }
 
   useMemo(() => {
     if (selected === selectedItems) {
@@ -110,14 +117,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   const { pathname } = useLocation();
   const openMini = Boolean(anchorEl);
 
-  const checkOpenForParent = (child: any, id: any) => {
+  function checkOpenForParent(child: any, id: any) {
     child.forEach((item: any) => {
       if (item.url === pathname) {
         setOpen(true);
         setSelected(id);
       }
     });
-  };
+  }
 
   useEffect(() => {
     setOpen(false);
@@ -182,7 +189,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
   const Icon = menu.icon;
   const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
   const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary';
-  const iconSelectedColor = theme.palette.mode === 'dark' && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
+  const iconSelectedColor =
+    theme.palette.mode === 'dark' && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
   const popperId = openMini ? `collapse-pop-${menu.id}` : undefined;
   const FlexBox = {
     display: 'flex',
@@ -229,7 +237,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               })
             }}
           >
-            {menuIcon && (
+            {menuIcon ? (
               <ListItemIcon
                 onClick={handlerIconLink}
                 sx={{
@@ -256,8 +264,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               >
                 {menuIcon}
               </ListItemIcon>
-            )}
-            {(drawerOpen || (!drawerOpen && level !== 1)) && (
+            ) : null}
+            {drawerOpen || (!drawerOpen && level !== 1) ? (
               <ListItemText
                 primary={
                   <Typography variant="h6" color={selected === menu.id ? 'primary' : textColor}>
@@ -265,20 +273,21 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                   </Typography>
                 }
                 secondary={
-                  menu.caption && (
+                  menu.caption ? (
                     <Typography variant="caption" color="secondary">
                       {menu.caption}
                     </Typography>
-                  )
+                  ) : null
                 }
               />
-            )}
-            {(drawerOpen || (!drawerOpen && level !== 1)) &&
-              (openMini || open ? (
+            ) : null}
+            {drawerOpen || (!drawerOpen && level !== 1) ? (
+              openMini || open ? (
                 <UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
               ) : (
                 <DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1 }} />
-              ))}
+              )
+            ) : null}
 
             {!drawerOpen && (
               <PopperStyled
@@ -321,11 +330,11 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               </PopperStyled>
             )}
           </ListItemButton>
-          {drawerOpen && (
+          {drawerOpen ? (
             <Collapse in={open} timeout="auto" unmountOnExit>
               <List sx={{ p: 0 }}>{navCollapse}</List>
             </Collapse>
-          )}
+          ) : null}
         </>
       ) : (
         <>
@@ -344,7 +353,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
             }}
           >
             <Box onClick={handlerIconLink} sx={FlexBox}>
-              {menuIcon && (
+              {menuIcon ? (
                 <ListItemIcon
                   sx={{
                     my: 'auto',
@@ -354,7 +363,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                 >
                   {menuIcon}
                 </ListItemIcon>
-              )}
+              ) : null}
               {!menuIcon && level !== 1 && (
                 <ListItemIcon
                   sx={{
@@ -377,7 +386,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
               {openMini ? <RightOutlined /> : <DownOutlined />}
             </Box>
 
-            {anchorEl && (
+            {anchorEl ? (
               <PopperStyled
                 id={popperId}
                 open={openMini}
@@ -414,12 +423,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
                   </Transitions>
                 )}
               </PopperStyled>
-            )}
+            ) : null}
           </ListItemButton>
         </>
       )}
     </>
   );
-};
+}
 
-export default NavCollapse;
+export { NavCollapse };

package/src/components/Layout/Navigation/NavGroup.tsx

@@ -1,14 +1,24 @@
-import { Box, ClickAwayListener, List, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Typography, Theme } from '@mui/material';
+import { Transitions } from '@/components/@extended';
+import { useMenuConfig } from '@/components/Layout/MenuProvider';
+import { NavCollapse } from '@/components/Layout/Navigation/NavCollapse';
+import { NavItem } from '@/components/Layout/Navigation/NavItem';
+import { useLayoutMediaState } from '@/components/Layout/Provider';
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
-import React, { Fragment, useEffect, useState } from 'react';
+import {
+  Box,
+  ClickAwayListener,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  Popper,
+  Theme,
+  Typography
+} from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
-import { useMenuConfig } from '../../../hooks';
-
-import NavCollapse from './NavCollapse';
-import NavItem from './NavItem';
-import { Transitions } from '../../@extended';
+import { Fragment, useEffect, useState } from 'react';
 import { useTranslate } from 'react-admin';
-import { useLayoutMediaState } from '../Provider';
 
 type PopperStyledProps = {
   theme: Theme;
@@ -33,18 +43,7 @@ const PopperStyled = styled(Popper)(({ theme }: PopperStyledProps) => ({
   }
 }));
 
-export type NavGroupProps = {
-  item: any;
-  lastItem?: number | undefined;
-  remItems: any[];
-  lastItemId: string;
-  setSelectedItems: (value: string) => void;
-  selectedItems: string;
-  setSelectedLevel: (value: number) => void;
-  selectedLevel: number;
-};
-
-const NavGroup = ({
+function NavGroup({
   item,
   lastItem,
   remItems,
@@ -53,7 +52,7 @@ const NavGroup = ({
   selectedItems,
   setSelectedLevel,
   selectedLevel
-}: NavGroupProps) => {
+}: NavGroupProps) {
   const theme = useTheme();
   const translate = useTranslate();
   const { pathname } = { pathname: '' }; // useLocation()
@@ -80,7 +79,7 @@ const NavGroup = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, lastItem, downLg]);
 
-  const checkOpenForParent = (child: any, id: any) => {
+  function checkOpenForParent(child: any, id: any) {
     child.forEach((ele: any) => {
       if (ele.children?.length) {
         checkOpenForParent(ele.children, currentItem.id);
@@ -89,8 +88,8 @@ const NavGroup = ({
         activeID(id);
       }
     });
-  };
-  const checkSelectedOnload = (data: any) => {
+  }
+  function checkSelectedOnload(data: any) {
     const childrens = data.children ? data.children : [];
     childrens.forEach((itemCheck: any) => {
       if (itemCheck.children?.length) {
@@ -100,7 +99,7 @@ const NavGroup = ({
         activeID(currentItem.id);
       }
     });
-  };
+  }
 
   useEffect(() => {
     checkSelectedOnload(currentItem);
@@ -108,15 +107,15 @@ const NavGroup = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname, currentItem]);
 
-  const handleClick = (event: any) => {
+  function handleClick(event: any) {
     if (!openMini) {
       setAnchorEl(event?.currentTarget);
     }
-  };
+  }
 
-  const handleClose = () => {
+  function handleClose() {
     setAnchorEl(null);
-  };
+  }
 
   const Icon = currentItem?.icon;
   const itemIcon = currentItem?.icon ? (
@@ -147,16 +146,21 @@ const NavGroup = ({
       case 'item':
         return <NavItem key={menuItem.id} item={menuItem} level={1} />;
       default:
+        return (
+          <Typography key={menuItem.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
     }
   });
 
   const moreItems = remItems.map((itemRem, i) => (
     <Fragment key={i}>
-      {itemRem.title && (
+      {itemRem.title ? (
         <Typography variant="caption" sx={{ pl: 2 }}>
           {itemRem.title}
         </Typography>
-      )}
+      ) : null}
       {itemRem?.elements?.map((menu: any) => {
         switch (menu.type) {
           case 'collapse':
@@ -219,19 +223,21 @@ const NavGroup = ({
       {!horizontal ? (
         <List
           subheader={
-            item.title &&
-            drawerOpen && (
+            item.title && drawerOpen ? (
               <Box sx={{ pl: 3, mb: 1.5 }}>
-                <Typography variant="subtitle2" color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}>
+                <Typography
+                  variant="subtitle2"
+                  color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}
+                >
                   {item.title}
                 </Typography>
-                {item.caption && (
+                {item.caption ? (
                   <Typography variant="caption" color="secondary">
                     {item.caption}
                   </Typography>
-                )}
+                ) : null}
               </Box>
-            )
+            ) : null
           }
           sx={{ mt: drawerOpen && item.title ? 1.5 : 0, py: 0, zIndex: 0 }}
         >
@@ -257,11 +263,11 @@ const NavGroup = ({
             onMouseLeave={handleClose}
             aria-describedby={popperId}
           >
-            {itemIcon && (
+            {itemIcon ? (
               <ListItemIcon sx={{ minWidth: 28 }}>
                 {currentItem.id === lastItemId ? <DownOutlined style={{ fontSize: 20, stroke: '1.5' }} /> : itemIcon}
               </ListItemIcon>
-            )}
+            ) : null}
             <ListItemText
               sx={{ mr: 1 }}
               primary={
@@ -278,7 +284,7 @@ const NavGroup = ({
             ) : (
               <RightOutlined style={{ fontSize: 16, stroke: '1.5' }} />
             )}
-            {anchorEl && (
+            {anchorEl ? (
               <PopperStyled
                 id={popperId}
                 open={openMini}
@@ -327,12 +333,24 @@ const NavGroup = ({
                   </Transitions>
                 )}
               </PopperStyled>
-            )}
+            ) : null}
           </ListItemButton>
         </List>
       )}
     </>
   );
+}
+
+type NavGroupProps = {
+  item: any;
+  lastItem?: number | undefined;
+  remItems: any[];
+  lastItemId: string;
+  setSelectedItems: (value: string) => void;
+  selectedItems: string;
+  setSelectedLevel: (value: number) => void;
+  selectedLevel: number;
 };
 
 export { NavGroup };
+export type { NavGroupProps };

package/src/components/Layout/Navigation/NavItem.tsx

@@ -1,16 +1,23 @@
+import { Dot } from '@/components/@extended';
+import { useMenuConfig } from '@/components/Layout/MenuProvider';
+import { useLayoutMediaState } from '@/components/Layout/Provider';
 import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
 import { forwardRef, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 
-import { Dot } from '../../@extended';
-import { useLayoutMediaState } from '../Provider';
-import { useMenuConfig } from '../../../hooks';
-import { useTheme } from '@mui/material/styles';
-export type NavItemProps = {
+type NavItemProps = {
   item: any;
   level: number;
 };
-const NavItem = ({ item, level }: NavItemProps) => {
+
+type NavListItemProps = {
+  component: string | React.ElementType;
+  href?: string;
+  target?: string;
+};
+
+function NavItem({ item, level }: NavItemProps) {
   const theme = useTheme();
 
   const { horizontal, downLg } = useLayoutMediaState();
@@ -21,18 +28,10 @@ const NavItem = ({ item, level }: NavItemProps) => {
     itemTarget = '_blank';
   }
 
-  let listItemProps = {
-    // @ts-ignore
-    component: forwardRef((props, ref) => <Link {...props} to={item.url} target={itemTarget} ref={ref} />)
-  };
-  if (item?.external) {
-    listItemProps = {
-      // @ts-ignore
-      component: 'a',
-      href: item.url,
-      target: itemTarget
-    };
-  }
+  const listItemProps: NavListItemProps =
+    item?.external !== false
+      ? { component: forwardRef((props, ref) => <Link {...props} to={item.url} target={itemTarget} ref={ref} />) }
+      : { component: 'a', href: item.url, target: itemTarget };
 
   const Icon = item.icon;
   const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
@@ -90,7 +89,7 @@ const NavItem = ({ item, level }: NavItemProps) => {
             onClick: () => openDrawer(false)
           })}
         >
-          {itemIcon && (
+          {itemIcon ? (
             <ListItemIcon
               sx={{
                 minWidth: 28,
@@ -116,8 +115,8 @@ const NavItem = ({ item, level }: NavItemProps) => {
             >
               {itemIcon}
             </ListItemIcon>
-          )}
-          {(drawerOpen || (!drawerOpen && level !== 1)) && (
+          ) : null}
+          {drawerOpen || (!drawerOpen && level !== 1) ? (
             <ListItemText
               primary={
                 <Typography variant="h6" sx={{ color: isSelected ? iconSelectedColor : textColor }}>
@@ -125,16 +124,16 @@ const NavItem = ({ item, level }: NavItemProps) => {
                 </Typography>
               }
             />
-          )}
-          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && (
+          ) : null}
+          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip ? (
             <Chip
               color={item.chip.color}
               variant={item.chip.variant}
               size={item.chip.size}
               label={item.chip.label}
-              avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+              avatar={(item.chip.avatar ? <Avatar>{item.chip.avatar}</Avatar> : null) as any}
             />
-          )}
+          ) : null}
         </ListItemButton>
       ) : (
         <ListItemButton
@@ -169,7 +168,7 @@ const NavItem = ({ item, level }: NavItemProps) => {
             })
           }}
         >
-          {itemIcon && (
+          {itemIcon ? (
             <ListItemIcon
               sx={{
                 minWidth: 36,
@@ -194,7 +193,7 @@ const NavItem = ({ item, level }: NavItemProps) => {
             >
               {itemIcon}
             </ListItemIcon>
-          )}
+          ) : null}
 
           {!itemIcon && (
             <ListItemIcon
@@ -227,19 +226,19 @@ const NavItem = ({ item, level }: NavItemProps) => {
               </Typography>
             }
           />
-          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip && (
+          {(drawerOpen || (!drawerOpen && level !== 1)) && item.chip ? (
             <Chip
               color={item.chip.color}
               variant={item.chip.variant}
               size={item.chip.size}
               label={item.chip.label}
-              avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+              avatar={(item.chip.avatar ? <Avatar>{item.chip.avatar}</Avatar> : null) as any}
             />
-          )}
+          ) : null}
         </ListItemButton>
       )}
     </>
   );
-};
+}
 
-export default NavItem;
+export { NavItem };

package/src/components/Layout/Navigation/NavList.tsx

@@ -1,13 +1,11 @@
+import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
+import { useSx } from '@/hooks';
 import { Box, SxProps } from '@mui/material';
-import { useSx } from '../../../hooks';
-import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
+import { PropsWithChildren } from 'react';
 
-export type NavListProps = {
-  sx?: SxProps;
-  children: React.ReactNode;
-};
+type NavListProps = PropsWithChildren<{ sx?: SxProps }>;
 
-const NavList = (props: NavListProps) => {
+function NavList(props: NavListProps): JSX.Element {
   const { horizontal } = useLayoutMediaState();
   const { open } = useLayoutDrawerState();
 
@@ -18,6 +16,6 @@ const NavList = (props: NavListProps) => {
   });
 
   return <Box sx={sx}>{props.children}</Box>;
-};
+}
 
-export default NavList;
+export { NavList };

package/src/components/Layout/Navigation/Navigation.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react';
-import _ from 'lodash';
-import { SxProps, Typography } from '@mui/material';
-import { useMenu, useThemeConfig } from '../../../hooks';
-import { useLayoutMediaState } from '../Provider';
 import { NavGroup } from './NavGroup';
-import NavList from './NavList';
+import { NavList } from './NavList';
+import { useMenu } from '@/components/Layout/MenuProvider';
+import { useLayoutMediaState } from '@/components/Layout/Provider';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { SxProps, Typography } from '@mui/material';
+import _ from 'lodash';
+import { useState } from 'react';
 
 type INavigationProps = {
   sx?: SxProps;
@@ -13,16 +14,16 @@ type INavigationProps = {
 type IItem = { title: any; elements: any; icon: any };
 
 function Navigation(props: INavigationProps) {
-  const { horizontal } = useLayoutMediaState(),
-    { menu, isLoading } = useMenu(),
-    [selectedItems, setSelectedItems] = useState<string>(''),
-    [selectedLevel, setSelectedLevel] = useState<number>(0),
-    { horizontalMaxItems } = useThemeConfig(),
-    lastItem = horizontal ? horizontalMaxItems : undefined;
+  const { horizontal } = useLayoutMediaState();
+  const { menu, isLoading } = useMenu();
+  const [selectedItems, setSelectedItems] = useState<string>('');
+  const [selectedLevel, setSelectedLevel] = useState<number>(0);
+  const { horizontalMaxItems } = useThemeConfig();
+  const lastItem = horizontal ? horizontalMaxItems : undefined;
 
-  let lastItemIndex = isLoading ? 0 : (menu ?? []).length - 1,
-    remItems: Array<IItem> = [],
-    lastItemId: string;
+  let lastItemIndex = isLoading ? 0 : (menu ?? []).length - 1;
+  let remItems: Array<IItem> = [];
+  let lastItemId: string;
 
   if (!isLoading && lastItem && lastItem < (menu ?? []).length) {
     lastItemId = (menu ?? [])[lastItem - 1].id;

package/src/components/Layout/Navigation/index.ts

@@ -1,5 +1,5 @@
-export * from './Navigation';
 export * from './NavCollapse';
 export * from './NavGroup';
+export * from './NavItem';
 export * from './NavList';
-export * from './NavItem';
+export * from './Navigation';