@applica-software-guru/react-admin 1.4.225 → 1.5.228

package/src/components/@extended/{Breadcrumbs.jsx → Breadcrumbs.tsx}

@@ -1,14 +1,15 @@
+import { MenuBreadcrumb, MenuItem } from '@/components/Layout';
+import { MainCard } from '@/components/MainCard';
 import { ApartmentOutlined, HomeFilled, HomeOutlined } from '@ant-design/icons';
 import { Divider, Grid, Typography } from '@mui/material';
-import { Link, useLocation } from 'react-router-dom';
-import { useEffect, useState } from 'react';
-
-import MainCard from '../MainCard';
-import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import { default as MuiBreadcrumbs } from '@mui/material/Breadcrumbs';
 import { useTheme } from '@mui/material/styles';
+import { useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 
-const renderBreadcrumb = ({ id, title, icon, url, last }) => {
+function renderBreadcrumb({ id, title, icon, url, last }: MenuBreadcrumb) {
   const Icon = icon ? icon : ApartmentOutlined;
+  return null;
   return (
     <Typography
       key={id}
@@ -22,13 +23,30 @@ const renderBreadcrumb = ({ id, title, icon, url, last }) => {
       }}
       color="textSecondary"
     >
-      {icon && <Icon style={{ marginRight: 8, fontSize: '0.875rem' }} />}
+      {/* @ts-ignore */}
+      {icon ? <Icon style={{ marginRight: 8, fontSize: '0.875rem' }} /> : null}
       {title}
     </Typography>
   );
+}
+type BreadcrumbsProps = {
+  home?: boolean | string;
+  card?: boolean;
+  divider?: boolean;
+  icon?: boolean;
+  icons?: boolean;
+  maxItems?: number;
+  navigation?: any;
+  rightAlign?: boolean;
+  separator?: any;
+  title?: boolean;
+  titleBottom?: boolean;
+  sx?: any;
+  breadcrumbs: MenuBreadcrumb[];
+  mode?: 'navigation' | 'breadcrumbs';
 };
 
-const Breadcrumbs = ({
+function Breadcrumbs({
   home = 'Home',
   card,
   divider = true,
@@ -44,13 +62,13 @@ const Breadcrumbs = ({
   breadcrumbs,
   mode = 'navigation',
   ...others
-}) => {
+}: BreadcrumbsProps) {
   const theme = useTheme();
   const location = useLocation();
-  const [main, setMain] = useState();
-  const [item, setItem] = useState();
+  const [main, setMain] = useState<MenuItem>();
+  const [item, setItem] = useState<MenuItem>();
 
-  let currentPath = location.pathname;
+  const currentPath = location.pathname;
 
   const iconSX = {
     marginRight: theme.spacing(0.75),
@@ -61,7 +79,7 @@ const Breadcrumbs = ({
   };
 
   // set active item state
-  const getCollapse = (menu) => {
+  function getCollapse(menu: MenuItem) {
     if (menu.children) {
       menu.children.filter((collapse) => {
         if (collapse.type && collapse.type === 'collapse') {
@@ -79,10 +97,10 @@ const Breadcrumbs = ({
         return false;
       });
     }
-  };
+  }
 
   useEffect(() => {
-    navigation?.items?.map((menu) => {
+    navigation?.items?.map((menu: MenuItem) => {
       if (menu.type && menu.type === 'group') {
         getCollapse(menu);
       }
@@ -118,11 +136,11 @@ const Breadcrumbs = ({
           alignItems={rightAlign ? 'center' : 'flex-start'}
           spacing={1}
         >
-          {title && !titleBottom && (
+          {title && !titleBottom ? (
             <Grid item>
-              <Typography variant="h2">{item.title}</Typography>
+              <Typography variant="h2">{item!.title}</Typography>
             </Grid>
-          )}
+          ) : null}
           <Grid item>
             <MuiBreadcrumbs
               aria-label="breadcrumb"
@@ -136,19 +154,19 @@ const Breadcrumbs = ({
             >
               {home !== false && (
                 <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
-                  {icons && <HomeOutlined style={iconSX} />}
-                  {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
-                  {(!icon || icons) && home}
+                  {icons ? <HomeOutlined style={iconSX} /> : null}
+                  {icon && !icons ? <HomeFilled style={{ ...iconSX, marginRight: 0 }} /> : null}
+                  {!icon || icons ? home : null}
                 </Typography>
               )}
               {breadcrumbs.map(renderBreadcrumb)}
             </MuiBreadcrumbs>
           </Grid>
-          {title && titleBottom && (
+          {title && titleBottom ? (
             <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
-              <Typography variant="h2">{item.title}</Typography>
+              <Typography variant="h2">{item!.title}</Typography>
             </Grid>
-          )}
+          ) : null}
         </Grid>
         {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
       </MainCard>
@@ -165,7 +183,8 @@ const Breadcrumbs = ({
         sx={{ textDecoration: 'none' }}
         color="textSecondary"
       >
-        {icons && <CollapseIcon style={iconSX} />}
+        {/* @ts-ignore */}
+        {icons ? <CollapseIcon style={iconSX} /> : null}
         {main.title}
       </Typography>
     );
@@ -182,19 +201,19 @@ const Breadcrumbs = ({
             <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
               {home !== false && (
                 <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
-                  {icons && <HomeOutlined style={iconSX} />}
-                  {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
-                  {(!icon || icons) && home}
+                  {icons ? <HomeOutlined style={iconSX} /> : null}
+                  {icon && !icons ? <HomeFilled style={{ ...iconSX, marginRight: 0 }} /> : null}
+                  {!icon || icons ? home : null}
                 </Typography>
               )}
               {mainContent}
             </MuiBreadcrumbs>
           </Grid>
-          {title && titleBottom && (
+          {title && titleBottom ? (
             <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
               <Typography variant="h2">{main.title}</Typography>
             </Grid>
-          )}
+          ) : null}
         </Grid>
         {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
       </MainCard>
@@ -216,7 +235,8 @@ const Breadcrumbs = ({
           textDecoration: 'none'
         }}
       >
-        {icons && <ItemIcon style={iconSX} />}
+        {/* @ts-ignore */}
+        {icons ? <ItemIcon style={iconSX} /> : null}
         {itemTitle}
       </Typography>
     );
@@ -245,29 +265,35 @@ const Breadcrumbs = ({
             alignItems={rightAlign ? 'center' : 'flex-start'}
             spacing={1}
           >
-            {title && !titleBottom && (
+            {title && !titleBottom ? (
               <Grid item>
                 <Typography variant="h2">{item.title}</Typography>
               </Grid>
-            )}
+            ) : null}
             <Grid item>
               <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
                 {home !== false && (
-                  <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
-                    {icons && <HomeOutlined style={iconSX} />}
-                    {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
-                    {(!icon || icons) && home}
+                  <Typography
+                    component={Link}
+                    to="/"
+                    color="textSecondary"
+                    variant="h6"
+                    sx={{ textDecoration: 'none' }}
+                  >
+                    {icons ? <HomeOutlined style={iconSX} /> : null}
+                    {icon && !icons ? <HomeFilled style={{ ...iconSX, marginRight: 0 }} /> : null}
+                    {!icon || icons ? home : null}
                   </Typography>
                 )}
                 {mainContent}
                 {itemContent}
               </MuiBreadcrumbs>
             </Grid>
-            {title && titleBottom && (
+            {title && titleBottom ? (
               <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
                 <Typography variant="h2">{item.title}</Typography>
               </Grid>
-            )}
+            ) : null}
           </Grid>
           {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
         </MainCard>
@@ -276,5 +302,6 @@ const Breadcrumbs = ({
   }
 
   return breadcrumbContent;
-};
-export default Breadcrumbs;
+}
+export { Breadcrumbs };
+export type { BreadcrumbsProps };

package/src/components/@extended/Dot.tsx

@@ -0,0 +1,34 @@
+import { getColors } from '@/themes/getColors';
+import { Box } from '@mui/material';
+import { SxProps, useTheme } from '@mui/material/styles';
+
+type DotProps = {
+  color?: string;
+  size?: number;
+  variant?: string;
+  sx?: SxProps;
+};
+
+function Dot({ color, size, variant, sx }: DotProps) {
+  const theme = useTheme();
+  const colors = getColors(theme as any, color as any);
+  const { main } = colors;
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: size || 8,
+        height: size || 8,
+        borderRadius: '50%',
+        bgcolor: variant === 'outlined' ? '' : main,
+        ...(variant === 'outlined' && {
+          border: `1px solid ${main}`
+        }),
+        ...sx
+      }}
+    />
+  );
+}
+export { Dot };
+export type { DotProps };

package/src/components/@extended/{IconButton.jsx → IconButton.tsx}

@@ -1,17 +1,22 @@
-import { alpha, styled, useTheme } from '@mui/material/styles';
-
-import MuiIconButton from '@mui/material/IconButton';
-import PropTypes from 'prop-types';
+import { getColors } from '@/themes/getColors';
+import { getShadow } from '@/themes/getShadow';
+import { default as MuiIconButton } from '@mui/material/IconButton';
+import { Theme, alpha, styled, useTheme } from '@mui/material/styles';
 import { forwardRef } from 'react';
-import getColors from '../../themes/getColors';
-import getShadow from '../../themes/getShadow';
 
-function getColorStyle({ variant, theme, color }) {
-  const colors = getColors(theme, color);
+type GetColorStyleProps = {
+  variant: string;
+  theme: any;
+  color: string;
+};
+
+function getColorStyle({ variant, theme, color }: GetColorStyleProps) {
+  const colors = getColors(theme, color as any);
+  // @ts-ignore
   const { lighter, light, dark, main, contrastText } = colors;
 
   const buttonShadow = `${color}Button`;
-  const shadows = getShadow(theme, buttonShadow);
+  const shadows = getShadow(theme, buttonShadow as any);
 
   const commonShadow = {
     '&::after': {
@@ -86,11 +91,17 @@ function getColorStyle({ variant, theme, color }) {
   }
 }
 
-// ==============================|| STYLED - ICON BUTTON ||============================== //
+type IconButtonStyleProps = {
+  variant: string;
+  shape: string;
+  children: React.ReactNode;
+  color: string;
+  theme: Theme;
+};
 
 const IconButtonStyle = styled(MuiIconButton, {
   shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape'
-})(({ theme, variant, shape, color }) => ({
+})(({ theme, variant, shape, color }: IconButtonStyleProps) => ({
   position: 'relative',
   '::after': {
     content: '""',
@@ -132,25 +143,25 @@ const IconButtonStyle = styled(MuiIconButton, {
   ...getColorStyle({ variant, theme, color })
 }));
 
-// ==============================|| EXTENDED - ICON BUTTON ||============================== //
-
-const IconButton = forwardRef(({ variant = 'text', shape = 'square', children, color = 'primary', ...others }, ref) => {
-  const theme = useTheme();
-
-  return (
-    <IconButtonStyle ref={ref} disableRipple variant={variant} shape={shape} theme={theme} color={color} {...others}>
-      {children}
-    </IconButtonStyle>
-  );
-});
-
-IconButton.propTypes = {
-  variant: PropTypes.string,
-  shape: PropTypes.string,
-  children: PropTypes.node,
-  color: PropTypes.string
+type IconButtonProps = {
+  variant?: string;
+  shape?: string;
+  children: React.ReactNode;
+  color?: string;
 };
 
-IconButton.displayName = 'IconButton';
+const IconButton = forwardRef(
+  ({ variant = 'text', shape = 'square', children, color = 'primary', ...others }: IconButtonProps, ref) => {
+    const theme = useTheme();
+
+    return (
+      // @ts-ignore
+      <IconButtonStyle ref={ref} disableRipple variant={variant} shape={shape} theme={theme} color={color} {...others}>
+        {children}
+      </IconButtonStyle>
+    );
+  }
+);
 
-export default IconButton;
+export { IconButton };
+export type { IconButtonProps };

package/src/components/@extended/{LoadingButton.jsx → LoadingButton.tsx}

@@ -1,17 +1,23 @@
-import { alpha, styled, useTheme } from '@mui/material/styles';
-
-import MuiLoadingButton from '@mui/lab/LoadingButton';
-import PropTypes from 'prop-types';
+import { getColors } from '@/themes/getColors';
+import { getShadow } from '@/themes/getShadow';
+import { default as MuiLoadingButton } from '@mui/lab/LoadingButton';
+import { Theme, alpha, styled, useTheme } from '@mui/material/styles';
 import { forwardRef } from 'react';
-import getColors from '../../themes/getColors';
-import getShadow from '../../themes/getShadow';
 
-function getColorStyle({ variant, theme, color, loadingPosition }) {
-  const colors = getColors(theme, color);
+type GetColorStyleProps = {
+  variant: string;
+  theme: any;
+  color: string;
+  loadingPosition: string;
+};
+
+function getColorStyle({ variant, theme, color, loadingPosition }: GetColorStyleProps) {
+  const colors = getColors(theme, color as any);
+  // @ts-ignore
   const { lighter, main, dark, contrastText } = colors;
 
   const buttonShadow = `${color}Button`;
-  const shadows = getShadow(theme, buttonShadow);
+  const shadows = getShadow(theme, buttonShadow as any);
 
   const loadingIndicator = {
     '& .MuiLoadingButton-loadingIndicator': {
@@ -115,11 +121,19 @@ function getColorStyle({ variant, theme, color, loadingPosition }) {
   }
 }
 
-// ==============================|| STYLED - LOADING BUTTON ||============================== //
+type LoadingButtonStyleProps = {
+  variant: string;
+  shape: string;
+  children: React.ReactNode;
+  color: string;
+  loading: boolean;
+  loadingPosition: string;
+  theme: Theme;
+};
 
 const LoadingButtonStyle = styled(MuiLoadingButton, {
   shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant'
-})(({ theme, variant, shape, color, loading, loadingPosition }) => ({
+})(({ theme, variant, shape, color, loading, loadingPosition }: LoadingButtonStyleProps) => ({
   '::after': {
     content: '""',
     display: 'block',
@@ -193,34 +207,39 @@ const LoadingButtonStyle = styled(MuiLoadingButton, {
   }
 }));
 
-// ==============================|| EXTENDED - LOADING BUTTON ||============================== //
-
-const LoadingButton = forwardRef(({ variant = 'text', shape, children, color = 'primary', ...others }, ref) => {
-  const theme = useTheme();
-
-  return (
-    <LoadingButtonStyle
-      ref={ref}
-      variant={variant}
-      shape={shape}
-      theme={theme}
-      loadingPosition={others.loadingPosition}
-      loading={others.loading}
-      color={color}
-      {...others}
-    >
-      {children}
-    </LoadingButtonStyle>
-  );
-});
-
-LoadingButton.propTypes = {
-  variant: PropTypes.string,
-  shape: PropTypes.string,
-  children: PropTypes.node,
-  color: PropTypes.string
+type LoadingButtonProps = {
+  variant?: 'text' | 'outlined' | 'contained';
+  shape: string;
+  children: React.ReactNode;
+  loading: boolean;
+  loadingPosition: 'center' | 'start' | 'end';
+  color: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | undefined;
 };
 
-LoadingButton.displayName = 'LoadingButton';
+const LoadingButton = forwardRef(
+  (
+    { variant = 'text', shape, children, color = 'primary', loadingPosition, loading, ...others }: LoadingButtonProps,
+    ref
+  ) => {
+    const theme = useTheme();
+
+    return (
+      <LoadingButtonStyle
+        // @ts-ignore
+        ref={ref}
+        variant={variant}
+        shape={shape}
+        theme={theme}
+        loadingPosition={loadingPosition}
+        loading={loading}
+        color={color}
+        {...others}
+      >
+        {children}
+      </LoadingButtonStyle>
+    );
+  }
+);
 
-export default LoadingButton;
+export { LoadingButton };
+export type { LoadingButtonProps };

package/src/components/@extended/{Tooltip.jsx → Tooltip.tsx}

@@ -1,15 +1,17 @@
+import { getColors } from '@/themes/getColors';
 import { Box, Tooltip as MuiTooltip, tooltipClasses } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 
-import PropTypes from 'prop-types';
-import getColors from '../../themes/getColors';
-
-// ==============================|| TOOLTIP - VARIANT ||============================== //
+type GetVariantStyleProps = {
+  color: string;
+  theme: any;
+  labelColor: string;
+};
 
-function getVariantStyle({ color, theme, labelColor }) {
-  const colors = getColors(theme, color);
+function getVariantStyle({ color, theme, labelColor }: GetVariantStyleProps) {
+  const colors = getColors(theme, color as any);
   const { main, contrastText } = colors;
-  let colorValue = color ? color : '';
+  const colorValue = color ? color : '';
 
   if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(colorValue)) {
     return {
@@ -35,20 +37,35 @@ function getVariantStyle({ color, theme, labelColor }) {
   }
 }
 
-// ==============================|| STYLED - TOOLTIP COLOR ||============================== //
+type TooltipStyleProps = {
+  color: string;
+  labelColor: string;
+  children: React.ReactNode;
+  title: string;
+};
 
-const TooltipStyle = styled(({ className, ...props }) => <MuiTooltip {...props} classes={{ popper: className }} />, {
-  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'labelColor'
-})(({ theme, color, labelColor }) => ({
+const TooltipStyle = styled(
+  // @ts-ignore
+  ({ className, ...props }: TooltipStyleProps) => <MuiTooltip {...props} classes={{ popper: className }} />,
+  {
+    shouldForwardProp: (prop) => prop !== 'color' && prop !== 'labelColor'
+  }
+)(({ theme, color, labelColor }) => ({
   ...(color && getVariantStyle({ color, theme, labelColor }))
 }));
 
-// ==============================|| EXTENDED - TOOLTIP ||============================== //
+type TooltipProps = {
+  children: React.ReactNode;
+  arrow: boolean;
+  labelColor?: string;
+  rest: any;
+};
 
-export default function CustomTooltip({ children, arrow, labelColor = '', ...rest }) {
+function Tooltip({ children, arrow, labelColor = '', ...rest }: TooltipProps) {
   const theme = useTheme();
   return (
     <Box display="flex">
+      {/* @ts-ignore */}
       <TooltipStyle arrow={arrow} {...rest} theme={theme} labelColor={labelColor}>
         {children}
       </TooltipStyle>
@@ -56,9 +73,5 @@ export default function CustomTooltip({ children, arrow, labelColor = '', ...res
   );
 }
 
-CustomTooltip.propTypes = {
-  children: PropTypes.element,
-  arrow: PropTypes.bool,
-  labelColor: PropTypes.string,
-  rest: PropTypes.array
-};
+export { Tooltip };
+export type { TooltipProps };

package/src/components/@extended/Transitions.tsx

@@ -0,0 +1,114 @@
+import { Box, Collapse, Fade, Grow, Slide, Zoom } from '@mui/material';
+import { forwardRef } from 'react';
+
+type TransitionsProps = {
+  children: React.ReactNode;
+  type?: 'grow' | 'fade' | 'collapse' | 'slide' | 'zoom';
+  position?: 'top-left' | 'top-right' | 'top' | 'bottom-left' | 'bottom-right' | 'bottom';
+  direction?: 'up' | 'down' | 'left' | 'right';
+};
+
+const Transitions = forwardRef(
+  ({ children, position = 'top-left', type = 'grow', direction = 'up', ...others }: TransitionsProps, ref) => {
+    let positionSX = {
+      transformOrigin: '0 0 0'
+    };
+
+    switch (position) {
+      case 'top-right':
+        positionSX = {
+          transformOrigin: 'top right'
+        };
+        break;
+      case 'top':
+        positionSX = {
+          transformOrigin: 'top'
+        };
+        break;
+      case 'bottom-left':
+        positionSX = {
+          transformOrigin: 'bottom left'
+        };
+        break;
+      case 'bottom-right':
+        positionSX = {
+          transformOrigin: 'bottom right'
+        };
+        break;
+      case 'bottom':
+        positionSX = {
+          transformOrigin: 'bottom'
+        };
+        break;
+      case 'top-left':
+      default:
+        positionSX = {
+          transformOrigin: '0 0 0'
+        };
+        break;
+    }
+
+    return (
+      <Box ref={ref}>
+        {type === 'grow' && (
+          <Grow
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 150,
+              exit: 150
+            }}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Grow>
+        )}
+
+        {type === 'collapse' && (
+          <Collapse {...others} sx={positionSX}>
+            {children}
+          </Collapse>
+        )}
+
+        {type === 'fade' && (
+          <Fade
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 300,
+              exit: 150
+            }}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Fade>
+        )}
+
+        {type === 'slide' && (
+          <Slide
+            {...others}
+            timeout={{
+              appear: 0,
+              enter: 150,
+              exit: 150
+            }}
+            direction={direction}
+          >
+            <Box sx={positionSX}>{children}</Box>
+          </Slide>
+        )}
+
+        {type === 'zoom' && (
+          <Zoom {...others}>
+            <Box sx={positionSX}>{children}</Box>
+          </Zoom>
+        )}
+      </Box>
+    );
+  }
+);
+
+const PopupTransition = forwardRef(function Transition(props, ref) {
+  // @ts-ignore
+  return <Zoom ref={ref} timeout={200} {...props} />;
+});
+
+export { PopupTransition, Transitions };