@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/default-theme/menu/AppMenuComponents/collapsed/CollapsedSidebarItem.tsx

@@ -1,264 +0,0 @@
-import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
-import { IMenuItem } from '../interfaces';
-import {
-    ListItemButton,
-    ListItemButtonProps,
-    ListItemIcon,
-    ListItemText,
-} from '@mui/material';
-import { useLocation, useNavigate } from 'react-router';
-import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
-import { useDispatch } from 'react-redux';
-import isCurrentPath from '../../../../hooks/isCurrentPath';
-import { NavEventManager } from '../../../../utils/navEvents';
-import useClickOutside from '../../../../hooks/useClickOutside';
-import { SidebarPosition } from '../../AppSidebarMaterial';
-import { FORCE_CLICK_OPEN, SUBMENU_SCROLL_THRESHOLD } from '../submenuConstants';
-import SubmenuPortal from '../SubmenuPortal';
-
-export interface ICollapsedSidebarItem {
-    item: IMenuItem;
-    navSize: 'large' | 'small';
-    navExpanded: boolean;
-    level: number;
-    sidebarPosition?: SidebarPosition;
-}
-
-export interface ISidebarItem extends ListItemButtonProps, PropsWithChildren {
-    item: IMenuItem;
-    showIcon?: boolean;
-    showText?: boolean;
-    navExpanded?: boolean;
-    navSize: 'large' | 'small';
-    level: number,
-    hasChildren?: boolean;
-}
-
-const SidebarItem: FC<ISidebarItem> = (props) => {
-    const {
-        item,
-        showIcon = true,
-        showText = true,
-        children,
-        navExpanded,
-        navSize,
-        level,
-        hasChildren = false,
-        onClick,
-        ...rest
-    } = props;
-
-    const loc = useLocation();
-
-    const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
-
-    useEffect(() => {
-        setCurrent(isCurrentPath(loc.pathname, item));
-    }, [loc]);
-
-    const navigate = useNavigate();
-
-    const dispatch = useDispatch();
-
-    const updatePageState = () => {
-        const newPageState: IPageState = {
-            title: item?.label,
-            icon: item?.icon,
-            subTitle: item?.group,
-        };
-        dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
-    };
-
-    return (
-        <ListItemButton
-            {...rest}
-            selected={isCurrent}
-            onClick={(e) => {
-               
-                if(onClick) {
-                   
-                    onClick(e);
-                }
-
-                //e.preventDefault();
-                e.stopPropagation();
-                //if ((e.target as any)?.localName === 'svg') return;
-
-                if (!hasChildren) {
-                    if (!isCurrentPath(loc.pathname, item)) {
-                        updatePageState();
-                        navigate(item.to);
-                        return;
-                    }
-                }
-
-              
-            }}
-        >
-            {showIcon && <ListItemIcon>{item.icon && item.icon}</ListItemIcon>}
-            {(showText && level > 0) && (
-                <ListItemText>{item.label}</ListItemText>
-            )}
-            {children}
-        </ListItemButton>
-    );
-};
-
-const CollapsedSidebarItem = ({
-    item,
-    navSize,
-    navExpanded,
-    level,
-    sidebarPosition = "left"
-}: ICollapsedSidebarItem) => {
-    const hovering = useRef<boolean>(false);
-    const timeoutDuration = 20;
-    let timeout;
-    const [webView, setWebView] = useState<boolean>(false);
-    const [open, setOpen] = useState(false);
-    const itemRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-
-    // Unique key for this submenu to identify it in accordion behavior
-    const submenuKey = `collapsed-${item.key || item.label}`;
-
-    // Close on click/tap outside the trigger AND the portal-rendered flyout
-    // (the flyout isn't a DOM descendant of itemRef since it's portaled to
-    // document.body — see SubmenuPortal). Hover mode already self-closes via
-    // onMouseLeave, but that never fires in webview/FORCE_CLICK_OPEN click
-    // mode, which previously had no way to dismiss an open flyout other than
-    // clicking the trigger again or opening a different submenu.
-    useClickOutside([itemRef, menuRef], () => setOpen(false), open);
-
-    const openMenuOnHover = (event) => {
-        // Notify other submenus to close (accordion behavior)
-        NavEventManager.notifySubmenuOpened(submenuKey);
-        setOpen(true);
-    };
-
-    const openMenuOnClick = (event) => {
-        if (!open) {
-            // Notify other submenus to close (accordion behavior)
-            NavEventManager.notifySubmenuOpened(submenuKey);
-        }
-        setOpen(prevOpen => !prevOpen);
-    };
-
-    const closeMenu = (event) => {
-        if (!webView) {
-            setOpen(false);
-        }
-    };
-
-    useEffect(() => {
-        if (document.body.classList.contains('webview')) {
-            setWebView(true)
-        } else {
-            setWebView(false)
-        }
-    }, []);
-    
-    // Listen for other submenus opening and close this one (accordion behavior)
-    useEffect(() => {
-        const unsubscribeSubmenuOpened = NavEventManager.onSubmenuOpened((openedKey) => {
-            // Close this submenu if a different one was opened
-            if (openedKey !== submenuKey && open) {
-                setOpen(false);
-            }
-        });
-        
-        const unsubscribeCloseAll = NavEventManager.onCloseAllSubmenus(() => {
-            setOpen(false);
-        });
-        
-        return () => {
-            unsubscribeSubmenuOpened();
-            unsubscribeCloseAll();
-        };
-    }, [submenuKey, open]);
-
-    const hasChildren = item.children && item.children.length > 0;
-
-    // Helper to close submenu after item click - navigation is handled by SidebarItem
-    const handleSubmenuItemClick = (e, childItem) => {
-        // Close the dropdown menu after a short delay to allow navigation to complete
-        setTimeout(() => {
-            setOpen(false);
-            // Close the drawer on mobile
-            NavEventManager.closeDrawer();
-        }, 100);
-    };
-
-    return hasChildren ? (
-        <>
-            <div ref={itemRef}>
-                <SidebarItem
-                    aria-owns={open ? 'menu-' + item.key : undefined}
-                    aria-haspopup='true'
-                    onMouseEnter={!webView && !FORCE_CLICK_OPEN ? openMenuOnHover : null}
-                    onMouseLeave={!FORCE_CLICK_OPEN ? closeMenu : null}
-                    onClick={webView || FORCE_CLICK_OPEN ? openMenuOnClick : null}
-                    item={item}
-                    showText={false}
-                    navSize={navSize}
-                    navExpanded={navExpanded}
-                    level={level}
-                    hasChildren={hasChildren}
-                >
-                    <SubmenuPortal
-                        open={open}
-                        itemRef={itemRef}
-                        contentRef={menuRef}
-                        sidebarPosition={sidebarPosition}
-                        childrenCount={item.children?.length || 0}
-                        className="sidebar-collapsed-menu"
-                    >
-                        <ul
-                            id={'menu-' + item.key}
-                            key={'menu-' + item.key}
-                            className={`dropdown ${open ? 'show' : ''}`}
-                            style={{
-                                margin: 0,
-                                padding: 0,
-                                listStyle: 'none',
-                            }}
-                        >
-                            {item.children?.map((item, index) => {
-                                return (
-                                    <SidebarItem
-                                        navSize={navSize}
-                                        navExpanded={navExpanded}
-                                        level={level + 1}
-                                        item={item}
-                                        key={index}
-                                        hasChildren={item.children && item.children.length > 0}
-                                        onClick={(e) => handleSubmenuItemClick(e, item)}
-                                        onTouchStart={(e) => e.stopPropagation()}
-                                    />
-                                );
-                            })}
-                        </ul>
-                    </SubmenuPortal>
-                </SidebarItem>
-            </div>
-        </>
-    ) : (
-        <SidebarItem
-            item={item}
-            navSize={navSize}
-            navExpanded={navExpanded}
-            level={level}
-            hasChildren={false}
-            onClick={() => {
-                // Close all other submenus first
-                NavEventManager.closeAllSubmenus();
-                // Close drawer when clicking primary level item without children
-                setTimeout(() => {
-                    NavEventManager.closeDrawer();
-                }, 100);
-            }}
-        />
-    );
-};
-
-export default CollapsedSidebarItem;

package/src/default-theme/menu/AppMenuComponents/collapsed/CollapsedSidebarItems.tsx

@@ -1,31 +0,0 @@
-import { List } from '@mui/material';
-import { IMenuItem } from '../interfaces';
-import CollapsedSidebarItem from './CollapsedSidebarItem';
-import { SidebarPosition } from '../../AppSidebarMaterial';
-
-export interface ICollapsedSidebarItems {
-	items: IMenuItem[];
-	navSize: 'large' | 'small';
-	navExpanded: boolean;
-	level: number;
-	sidebarPosition?: SidebarPosition;
-}
-
-const CollapsedSidebarItems: React.FC<ICollapsedSidebarItems> = ({ items, navSize, navExpanded, level, sidebarPosition = "left" }) => {
-	return (
-		<List className={'sidebar-list sidebar-collapsed-menu'} component='nav'>
-			{items.map((item, index) => {
-				return <CollapsedSidebarItem 
-									level={level} 
-									item={item} 
-									key={index} 	
-									navSize={navSize}
-									navExpanded={navExpanded}
-									sidebarPosition={sidebarPosition}
-				/>
-			})}
-		</List>
-	);
-};
-
-export default CollapsedSidebarItems;

package/src/default-theme/menu/AppMenuComponents/expanded/CollapsableSidebarMenu.tsx

@@ -1,293 +0,0 @@
-import { ICollapsableSidebarMenu } from '../interfaces';
-import { useDispatch } from 'react-redux';
-import { memo, useEffect, useState, useRef } from 'react';
-import isCurrentPath from '../../../../hooks/isCurrentPath';
-import { useLocation, useNavigate } from 'react-router';
-import {
-  Collapse,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-} from '@mui/material';
-import ExpandLessOutlinedIcon from '@mui/icons-material/ExpandLessOutlined';
-import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
-import SidebarItem from './SidebarItem';
-
-/** @ts-ignore */
-//import clickSound from '@app/assets/sounds/click2.mp3?string';
-import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
-import {DASHAppConstants} from 'dash-constants';
-import { NavEventManager } from '../../../../utils/navEvents';
-import { FORCE_CLICK_OPEN } from '../submenuConstants';
-import SubmenuPortal from '../SubmenuPortal';
-import useClickOutside from '../../../../hooks/useClickOutside';
-
-const CollapsableSidebarMenu = ({
-  item,
-  navExpanded,
-  navSize,
-  level,
-  sidebarPosition = "left"
-}: ICollapsableSidebarMenu) => {
-  const loc = useLocation();
-  const dispatch = useDispatch();
-  const itemRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const isHorizontal = sidebarPosition === "top" || sidebarPosition === "bottom";
-  
-  // Detect if running in mobile webview or android
-  const [webView, setWebView] = useState<boolean>(false);
-  
-  useEffect(() => {
-    if (document.body.classList.contains('webview') || document.body.classList.contains('android')) {
-      setWebView(true);
-    } else {
-      setWebView(false);
-    }
-  }, []);
-
-  const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
-
-  const [localOpen, setLocalOpen] = useState<boolean>(
-    isCurrentPath(loc.pathname, item),
-  );
-
-  // Generate a unique key for this submenu
-  const submenuKey = `${item.group}-${item.key}`;
-
-  /* This hook is to open the menu on load only, memo state will not rerender this twice */
-  useEffect(() => {
-    setLocalOpen(isCurrentPath(loc.pathname, item));
-  }, []);
-
-  // Listen for other submenus opening (accordion behavior)
-  useEffect(() => {
-    const unsubscribe = NavEventManager.onSubmenuOpened((openedKey: string) => {
-      // If another submenu opened (not this one), close this one
-      if (openedKey !== submenuKey) {
-        setLocalOpen(false);
-      }
-    });
-
-    // Also listen for close all submenus event
-    const unsubscribeCloseAll = NavEventManager.onCloseAllSubmenus(() => {
-      setLocalOpen(false);
-    });
-
-    return () => {
-      unsubscribe();
-      unsubscribeCloseAll();
-    };
-  }, [submenuKey, navSize]);
-
-  // Close on click/tap outside the trigger AND the portal-rendered dropdown
-  // (only relevant to the horizontal top/bottom layout, which portals its
-  // dropdown to document.body via SubmenuPortal — see contentRef below; the
-  // dropdown is not a DOM descendant of itemRef). The vertical Collapse
-  // variant is rendered inline in the sidebar tree, so it doesn't need this.
-  // Desktop hover already self-closes via handleMouseLeave, but that's
-  // disabled in webview/FORCE_CLICK_OPEN click mode, which previously had
-  // no way to dismiss an open dropdown other than the accordion behavior.
-  useClickOutside([itemRef, menuRef], () => setLocalOpen(false), isHorizontal && localOpen);
-
-  const navigate = useNavigate();
-
-  const playClick = () => {
-    if (!!DASHAppConstants.system.UI_SOUNDS) {
-      // const audio = new Audio(clickSound);
-      // audio.load();
-      // audio.play();
-    }
-  };
-
-  const updatePageState = () => {
-    const newPageState: IPageState = {
-      title: item?.label,
-      icon: item?.icon,
-      subTitle: item?.group,
-    };
-    dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
-  };
-
-  // Handle expand/collapse icon click
-  const handleExpandClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    playClick();
-    const newState = !localOpen;
-    setLocalOpen(newState);
-    
-    // Notify other submenus to close (accordion behavior)
-    if (newState) {
-      NavEventManager.notifySubmenuOpened(submenuKey);
-    }
-  };
-
-  // Handle opening submenu - notify others to close (for click mode)
-  const handleOpenSubmenu = () => {
-    const newState = !localOpen;
-    setLocalOpen(newState);
-    
-    // Notify other submenus to close (accordion behavior)
-    if (newState) {
-      NavEventManager.notifySubmenuOpened(submenuKey);
-    }
-  };
-
-  // Hover handlers for horizontal mode (desktop only)
-  const handleMouseEnter = () => {
-    if (isHorizontal && !webView && !FORCE_CLICK_OPEN) {
-      NavEventManager.notifySubmenuOpened(submenuKey);
-      setLocalOpen(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (isHorizontal && !webView && !FORCE_CLICK_OPEN) {
-      setLocalOpen(false);
-    }
-  };
-
-  // Calculate dropdown position based on sidebar position
-  const getDropdownPosition = () => {
-    if (!itemRef.current) return {};
-    const rect = itemRef.current.getBoundingClientRect();
-    
-    switch (sidebarPosition) {
-      case "top":
-        return { top: rect.bottom + 10, left: rect.left };
-      case "bottom":
-        return { bottom: window.innerHeight - rect.top + 4, left: rect.left };
-      case "right":
-        // For right sidebar, submenu opens to the left of the menu item
-        return { top: rect.top, right: window.innerWidth - rect.left + 4 };
-      case "left":
-      default:
-        // For left sidebar, submenu opens to the right of the menu item
-        return { top: rect.top, left: rect.right + 4 };
-    }
-  };
-
-  // Submenu content - shared between portal and inline rendering
-  const submenuContent = (
-    <List className={'sidebar-list-sub'} disablePadding>
-      {item.children?.map((childItem, index) =>
-        childItem ? (
-          childItem.children ? (
-            <CollapsableSidebarMenu
-              navExpanded={navExpanded}
-              navSize={navSize}
-              item={childItem}
-              key={index}
-              level={level + 1}
-              sidebarPosition={sidebarPosition}
-            />
-          ) : (
-            <SidebarItem
-              level={level}
-              navExpanded={navExpanded}
-              navSize={navSize}
-              showIcon={false}
-              item={childItem}
-              key={index}
-            />
-          )
-        ) : null,
-      )}
-    </List>
-  );
-
-  return (
-    <>
-      <div 
-        ref={itemRef} 
-        style={{ display: isHorizontal ? 'inline-flex' : 'block' }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <ListItemButton
-          selected={localOpen}
-          className={'sidebar-list-menu-item'}
-          sx={isHorizontal ? { 
-            flexShrink: 0, 
-            whiteSpace: 'nowrap',
-            paddingX: 2,
-          } : undefined}
-          onClick={(e) => {
-            // Only handle click if it's not on the expand icon
-            if (!(e.target as HTMLElement).closest('.expand-icon')) {
-              playClick();
-              // For horizontal mode, only handle click on mobile/webview/FORCE_CLICK_OPEN (desktop uses hover)
-              if (!isHorizontal || webView || FORCE_CLICK_OPEN) {
-                handleOpenSubmenu();
-              }
-              
-              if (!isCurrentPath(loc.pathname, item)) {
-                updatePageState();
-                navigate(item.to || item.model);
-              }
-            }
-          }}
-        >
-          <ListItemIcon>{item.icon && item.icon}</ListItemIcon>
-          {/* Este es el submenu con la barra lateral expandida */}
-          {navExpanded && (
-            <ListItemText
-              disableTypography
-              primary={<Typography>{item.label}</Typography>}
-            />
-          )}
-          {navExpanded && (
-            // "expand-icon" is ALSO on the wrapper (not just the inner svg): the row's
-            // onClick above does closest('.expand-icon') to tell "clicked the arrow"
-            // from "clicked the row" — if only the svg had it, clicking the circle's
-            // padding (outside the svg's own box) would miss the check and navigate.
-            (<div className="expand-icon expand-icon-wrapper" onClick={handleExpandClick}>
-              {/* For bottom position, invert icons since submenu opens upward */}
-              {sidebarPosition === "bottom" ? (
-                localOpen ? 
-                  <ExpandMoreOutlinedIcon className='expand-icon more' /> : 
-                  <ExpandLessOutlinedIcon className='expand-icon less' />
-              ) : (
-                localOpen ? 
-                  <ExpandLessOutlinedIcon className='expand-icon less' /> : 
-                  <ExpandMoreOutlinedIcon className='expand-icon more' />
-              )}
-            </div>)
-          )}
-        </ListItemButton>
-      </div>
-
-      {/* Portal submenu for all positions */}
-      {/* Vertical mode (Left/Right) - Inline Expansion using Collapse */}
-      {!isHorizontal && (
-        <Collapse in={localOpen} timeout="auto" unmountOnExit>
-          {submenuContent}
-        </Collapse>
-      )}
-
-      {/* Horizontal mode (Top/Bottom) - Portal Dropdown */}
-      {isHorizontal && (
-        <SubmenuPortal
-          open={navExpanded && localOpen}
-          itemRef={itemRef}
-          contentRef={menuRef}
-          sidebarPosition={sidebarPosition}
-          childrenCount={item.children?.length || 0}
-          className="sidebar-submenu-portal"
-          onMouseEnter={() => !webView && !FORCE_CLICK_OPEN && setLocalOpen(true)}
-          onMouseLeave={() => !webView && !FORCE_CLICK_OPEN && setLocalOpen(false)}
-        >
-          {submenuContent}
-        </SubmenuPortal>
-      )}
-    </>
-  );
-};
-
-const MemoizedCollapsableSidebarMenu = memo(CollapsableSidebarMenu, (prev, next) => {
-  return prev === next;
-});
-
-export default MemoizedCollapsableSidebarMenu as typeof CollapsableSidebarMenu;

package/src/default-theme/menu/AppMenuComponents/expanded/SidebarItem.tsx

@@ -1,92 +0,0 @@
-import { ICollapsableSidebarMenu } from '../interfaces';
-import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import Circle from '@mui/icons-material/Circle';
-import { useLocation, useNavigate } from 'react-router';
-
-import { useDispatch } from 'react-redux';
-
-import { useEffect, useState } from 'react';
-
-/** @ts-ignore */
-//import clickSound from '@app/assets/sounds/click2.mp3?string';
-/** @ts-ignore */
-//import bubbleSound from '@app/assets/sounds/bubble.mp3?string';
-import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
-import {DASHAppConstants} from 'dash-constants';
-import isCurrentPath from '../../../../hooks/isCurrentPath';
-import { NavEventManager } from '../../../../utils/navEvents';
-
-const SidebarItem = ({
-  item,
-  navExpanded,
-  navSize,
-  level,
-  className,
-  showIcon = true,
-}: ICollapsableSidebarMenu) => {
-  const navigate = useNavigate();
-  const DefaultIcon = <Circle />;
-
-  const loc = useLocation();
-
-  const [isCurrent, setCurrent] = useState(isCurrentPath(loc.pathname, item));
-
-  useEffect(() => {
-    setCurrent(isCurrentPath(loc.pathname, item));
-  }, [loc]);
-
-  const playClick = () => {
-
-    if (!!DASHAppConstants.system.UI_SOUNDS) {
-      const audio = new Audio(clickSound);
-      audio.load();
-      audio.play();
-    }
-  };
-
-
-  const dispatch = useDispatch();
-  const updatePageState = () => {
-    const newPageState: IPageState = {
-      title: item?.label,
-      icon: item?.icon,
-      subTitle: item?.group,
-    };
-    dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
-  };
-
-  useEffect(() => {
-    if (isCurrent === true) {
-      updatePageState();
-    }
-  }, [isCurrent]);
-
-  return (
-    <ListItemButton
-      className={className}
-      selected={isCurrent}
-      onClick={(e) => {
-      
-        playClick();
-        updatePageState();
-
-        //if ((e.target as any)?.localName === "svg") return;
-
-        if (item?.to) {
-           
-          navigate(item.to.replace(/\/+/g, '/'));
-          
-          // Close drawer on mobile after navigation (for second-level items)
-          if (navSize === 'small') {
-            NavEventManager.closeDrawer();
-          }
-        }
-      }}
-    >
-      <ListItemIcon>{item?.icon || DefaultIcon}</ListItemIcon>
-      {navSize !== "small" && <ListItemText>{item.label}</ListItemText>}
-    </ListItemButton>
-  );
-};
-
-export default SidebarItem;

package/src/default-theme/menu/AppMenuComponents/getItem.tsx

@@ -1,17 +0,0 @@
-import { IMenuItem } from './interfaces';
-
-const getItem = (item: IMenuItem): IMenuItem => {
-	/*return {
-      key: item.key,
-      icon: item.icon,
-      children: item.children,
-      label: item.label,
-      type: item.type,
-      group: item.group,
-      model: item.model,
-      txtLabel: item.txtLabel
-    };*/
-	return item;
-};
-
-export default getItem;