robobyte-front-builder 1.0.0

package/src/@menu/components/vertical-menu/SubMenu.jsx

@@ -0,0 +1,420 @@
+'use client'
+
+// React Imports
+import { Children, cloneElement, forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+
+// Third-party Imports
+import classnames from 'classnames'
+import styled from '@emotion/styled'
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useRole,
+  useInteractions,
+  useClick,
+  safePolygon,
+  useDismiss,
+  hide,
+  useFloatingTree,
+  FloatingPortal
+} from '@floating-ui/react'
+
+// Component Imports
+import SubMenuContent from './SubMenuContent'
+import MenuButton, { menuButtonStyles } from './MenuButton'
+
+// Icon Imports
+import ChevronRight from '../../svg/ChevronRight'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+import useVerticalMenu from '../../hooks/useVerticalMenu'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+import { confirmUrlInChildren, renderMenuIcon } from '../../utils/menuUtils'
+
+// Styled Component Imports
+import StyledMenuLabel from '../../styles/StyledMenuLabel'
+import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
+import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
+import StyledVerticalNavExpandIcon, {
+  StyledVerticalNavExpandIconWrapper
+} from '../../styles/vertical/StyledVerticalNavExpandIcon'
+
+const StyledSubMenu = styled.li`
+  position: relative;
+  inline-size: 100%;
+  margin-block-start: 4px;
+
+  &.${menuClasses.open} > .${menuClasses.button} {
+    background-color: #f3f3f3;
+  }
+
+  ${({ menuItemStyles }) => menuItemStyles};
+  ${({ rootStyles }) => rootStyles};
+
+  > .${menuClasses.button} {
+    ${({ level, disabled, active, children, isCollapsed, isPopoutWhenCollapsed }) =>
+      menuButtonStyles({
+        level,
+        active,
+        disabled,
+        children,
+        isCollapsed,
+        isPopoutWhenCollapsed
+      })};
+    ${({ buttonStyles }) => buttonStyles};
+  }
+`
+
+const SubMenu = (props, ref) => {
+  // Props
+  const {
+    children,
+    className,
+    contentClassName,
+    label,
+    icon,
+    title,
+    prefix,
+    suffix,
+    defaultOpen,
+    level = 0,
+    disabled = false,
+    rootStyles,
+    component,
+    onOpenChange,
+    onClick,
+    onKeyUp,
+    ...rest
+  } = props
+
+  // States
+  const [openWhenCollapsed, setOpenWhenCollapsed] = useState(false)
+  const [active, setActive] = useState(false)
+
+  // Refs
+  const contentRef = useRef(null)
+
+  // Hooks
+  const id = useId()
+  const pathname = usePathname()
+  const { isCollapsed, isPopoutWhenCollapsed, isHovered, isBreakpointReached } = useVerticalNav()
+  const tree = useFloatingTree()
+
+  const {
+    browserScroll,
+    triggerPopout,
+    renderExpandIcon,
+    renderExpandedMenuItemIcon,
+    menuItemStyles,
+    openSubmenu,
+    toggleOpenSubmenu,
+    transitionDuration,
+    openSubmenusRef,
+    popoutMenuOffset,
+    textTruncate
+  } = useVerticalMenu()
+
+  // Vars
+  // Filter out falsy values from children
+  const childNodes = Children.toArray(children).filter(Boolean)
+
+  const mainAxisOffset =
+    popoutMenuOffset &&
+    popoutMenuOffset.mainAxis &&
+    (typeof popoutMenuOffset.mainAxis === 'function' ? popoutMenuOffset.mainAxis({ level }) : popoutMenuOffset.mainAxis)
+
+  const alignmentAxisOffset =
+    popoutMenuOffset &&
+    popoutMenuOffset.alignmentAxis &&
+    (typeof popoutMenuOffset.alignmentAxis === 'function'
+      ? popoutMenuOffset.alignmentAxis({ level })
+      : popoutMenuOffset.alignmentAxis)
+
+  const { refs, floatingStyles, context } = useFloating({
+    strategy: 'fixed',
+    open: openWhenCollapsed,
+    onOpenChange: setOpenWhenCollapsed,
+    placement: 'right-start',
+    middleware: [
+      offset({
+        mainAxis: mainAxisOffset,
+        alignmentAxis: alignmentAxisOffset
+      }),
+      flip({ crossAxis: false }),
+      shift(),
+      hide()
+    ],
+    whileElementsMounted: autoUpdate
+  })
+
+  const hover = useHover(context, {
+    handleClose: safePolygon({
+      blockPointerEvents: true
+    }), // safePolygon function allows us to reach to submenu
+    restMs: 25, // Only opens submenu when cursor rests for 25ms on a menu
+    enabled: triggerPopout === 'hover', // Only enable hover effect when triggerPopout option is set to 'hover'
+    delay: { open: 75 } // Delay opening submenu by 75ms
+  })
+
+  const click = useClick(context, {
+    enabled: triggerPopout === 'click' // Only enable click effect when triggerPopout option is set to 'click'
+  })
+
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: 'menu' })
+
+  // Merge all the interactions into prop getters
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, dismiss, role])
+  const isSubMenuOpen = openSubmenu?.some(item => item.id === id) ?? false
+
+  const handleSlideToggle = () => {
+    if (level === 0 && isCollapsed && !isHovered) {
+      return
+    }
+
+    toggleOpenSubmenu?.({ level, label, active, id })
+    onOpenChange?.(!isSubMenuOpen)
+    if (openSubmenusRef?.current && openSubmenusRef?.current.length > 0) openSubmenusRef.current = []
+  }
+
+  const handleOnClick = event => {
+    onClick?.(event)
+    handleSlideToggle()
+  }
+
+  const handleOnKeyUp = event => {
+    onKeyUp?.(event)
+
+    if (event.key === 'Enter') {
+      handleSlideToggle()
+    }
+  }
+
+  const getSubMenuItemStyles = element => {
+    // If the menuItemStyles prop is provided, get the styles for the specified element.
+    if (menuItemStyles) {
+      // Define the parameters that are passed to the style functions.
+      const params = {
+        level,
+        disabled,
+        active,
+        isSubmenu: true,
+        open: isSubMenuOpen
+      }
+
+      // Get the style function for the specified element.
+      const styleFunction = menuItemStyles[element]
+
+      if (styleFunction) {
+        // If the style function is a function, call it and return the result.
+        // Otherwise, return the style function itself.
+        return typeof styleFunction === 'function' ? styleFunction(params) : styleFunction
+      }
+    }
+  }
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere in the tree.
+  useEffect(() => {
+    const handleTreeClick = () => {
+      setOpenWhenCollapsed(false)
+    }
+
+    tree?.events.on('click', handleTreeClick)
+
+    return () => {
+      tree?.events.off('click', handleTreeClick)
+    }
+  }, [tree])
+  useLayoutEffect(() => {
+    if (isCollapsed && level === 0) {
+      setOpenWhenCollapsed(false)
+    }
+  }, [isCollapsed, level, active])
+  useEffect(() => {
+    if (confirmUrlInChildren(children, pathname)) {
+      openSubmenusRef?.current.push({ level, label, active: true, id })
+    } else {
+      if (defaultOpen) {
+        openSubmenusRef?.current.push({ level, label, active: false, id })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Change active state when the url changes
+  useEffect(() => {
+    // Check if the current url matches any of the children urls
+    if (confirmUrlInChildren(children, pathname)) {
+      setActive(true)
+
+      if (openSubmenusRef?.current.findIndex(submenu => submenu.id === id) === -1) {
+        openSubmenusRef?.current.push({ level, label, active: true, id })
+      }
+    } else {
+      setActive(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  /* useEffect(() => {
+      console.log(openSubmenu)
+    }, [openSubmenu]) */
+  const submenuContent = (
+    <SubMenuContent
+      ref={isCollapsed && level === 0 && isPopoutWhenCollapsed ? refs.setFloating : contentRef}
+      {...(isCollapsed && level === 0 && isPopoutWhenCollapsed && getFloatingProps())}
+      browserScroll={browserScroll}
+      openWhenCollapsed={openWhenCollapsed}
+      isPopoutWhenCollapsed={isPopoutWhenCollapsed}
+      transitionDuration={transitionDuration}
+      open={isSubMenuOpen}
+      level={level}
+      isCollapsed={isCollapsed}
+      isHovered={isHovered}
+      className={classnames(menuClasses.subMenuContent, contentClassName)}
+      rootStyles={{
+        ...(isCollapsed && level === 0 && isPopoutWhenCollapsed && floatingStyles),
+        ...getSubMenuItemStyles('subMenuContent')
+      }}
+    >
+      {childNodes.map(node =>
+        cloneElement(node, {
+          ...getItemProps({
+            onClick(event) {
+              if (node.props.children && !Array.isArray(node.props.children)) {
+                node.props.onClick?.(event)
+                tree?.events.emit('click')
+              }
+            }
+          }),
+          level: level + 1
+        })
+      )}
+    </SubMenuContent>
+  )
+
+  return (
+    // eslint-disable-next-line lines-around-comment
+    /* Sub Menu */
+    <StyledSubMenu
+      ref={ref}
+      className={classnames(
+        menuClasses.subMenuRoot,
+        { [menuClasses.active]: active },
+        { [menuClasses.disabled]: disabled },
+        { [menuClasses.open]: isSubMenuOpen },
+        className
+      )}
+      menuItemStyles={getSubMenuItemStyles('root')}
+      level={level}
+      isPopoutWhenCollapsed={isPopoutWhenCollapsed}
+      disabled={disabled}
+      active={active}
+      isCollapsed={isCollapsed}
+      buttonStyles={getSubMenuItemStyles('button')}
+      rootStyles={rootStyles}
+    >
+      {/* Menu Item */}
+      <MenuButton
+        ref={isCollapsed && level === 0 && isPopoutWhenCollapsed && !disabled ? refs.setReference : null}
+        onClick={handleOnClick}
+        {...(isCollapsed && level === 0 && isPopoutWhenCollapsed && !disabled && getReferenceProps())}
+        onKeyUp={handleOnKeyUp}
+        title={title}
+        className={classnames(menuClasses.button, { [menuClasses.active]: active })}
+        component={component}
+        tabIndex={disabled ? -1 : 0}
+        {...rest}
+      >
+        {/* Sub Menu Icon */}
+        {renderMenuIcon({
+          icon,
+          level,
+          active,
+          disabled,
+          renderExpandedMenuItemIcon,
+          styles: getSubMenuItemStyles('icon'),
+          isBreakpointReached
+        })}
+
+        {/* Sub Menu Prefix */}
+        {prefix && (
+          <StyledMenuPrefix
+            isHovered={isHovered}
+            isCollapsed={isCollapsed}
+            firstLevel={level === 0}
+            className={menuClasses.prefix}
+            rootStyles={getSubMenuItemStyles('prefix')}
+          >
+            {prefix}
+          </StyledMenuPrefix>
+        )}
+
+        {/* Sub Menu Label */}
+        <StyledMenuLabel
+          className={menuClasses.label}
+          rootStyles={getSubMenuItemStyles('label')}
+          textTruncate={textTruncate}
+        >
+          {label}
+        </StyledMenuLabel>
+
+        {/* Sub Menu Suffix */}
+        {suffix && (
+          <StyledMenuSuffix
+            isHovered={isHovered}
+            isCollapsed={isCollapsed}
+            firstLevel={level === 0}
+            className={menuClasses.suffix}
+            rootStyles={getSubMenuItemStyles('suffix')}
+          >
+            {suffix}
+          </StyledMenuSuffix>
+        )}
+
+        {/* Sub Menu Toggle Icon Wrapper */}
+        {isCollapsed && !isHovered && level === 0 ? null : (
+          <StyledVerticalNavExpandIconWrapper
+            className={menuClasses.subMenuExpandIcon}
+            rootStyles={getSubMenuItemStyles('subMenuExpandIcon')}
+          >
+            {renderExpandIcon ? (
+              renderExpandIcon({
+                level,
+                disabled,
+                active,
+                open: isSubMenuOpen
+              })
+            ) : (
+              // eslint-disable-next-line lines-around-comment
+              /* Expanded Arrow Icon */
+              <StyledVerticalNavExpandIcon open={isSubMenuOpen} transitionDuration={transitionDuration}>
+                <ChevronRight fontSize='1rem' />
+              </StyledVerticalNavExpandIcon>
+            )}
+          </StyledVerticalNavExpandIconWrapper>
+        )}
+      </MenuButton>
+
+      {/* Sub Menu Content */}
+      {isCollapsed && level === 0 && isPopoutWhenCollapsed ? (
+        <FloatingPortal>{openWhenCollapsed && submenuContent}</FloatingPortal>
+      ) : (
+        submenuContent
+      )}
+    </StyledSubMenu>
+  )
+}
+
+export default forwardRef(SubMenu)

package/src/@menu/components/vertical-menu/SubMenuContent.jsx

@@ -0,0 +1,101 @@
+// React Imports
+import { forwardRef, useEffect, useState } from 'react'
+
+// Third-party Imports
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Styled Component Imports
+import StyledSubMenuContent from '../../styles/StyledSubMenuContent'
+
+// Style Imports
+import styles from '../../styles/styles.module.css'
+
+const SubMenuContent = (props, ref) => {
+  // Props
+  const {
+    children,
+    open,
+    level,
+    isCollapsed,
+    isHovered,
+    transitionDuration,
+    isPopoutWhenCollapsed,
+    openWhenCollapsed,
+    browserScroll,
+    ...rest
+  } = props
+
+  // States
+  const [mounted, setMounted] = useState(false)
+  // Refs
+  const SubMenuContentRef = ref
+
+  useEffect(() => {
+    if (mounted) {
+      if (open || (open && isHovered)) {
+        const target = SubMenuContentRef?.current
+
+        if (target) {
+          target.style.display = 'block'
+          target.style.overflow = 'hidden'
+          target.style.blockSize = 'auto'
+          const height = target.offsetHeight
+
+          target.style.blockSize = '0px'
+          target.offsetHeight
+          target.style.blockSize = `${height}px`
+          setTimeout(() => {
+            target.style.overflow = 'auto'
+            target.style.blockSize = 'auto'
+          }, transitionDuration)
+        }
+      } else {
+        const target = SubMenuContentRef?.current
+
+        if (target) {
+          target.style.overflow = 'hidden'
+          target.style.blockSize = `${target.offsetHeight}px`
+          target.offsetHeight
+          target.style.blockSize = '0px'
+          setTimeout(() => {
+            target.style.overflow = 'auto'
+            target.style.display = 'none'
+          }, transitionDuration)
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, mounted, SubMenuContentRef])
+  useEffect(() => {
+    setMounted(true)
+  }, [isHovered])
+
+  return (
+    <StyledSubMenuContent
+      ref={ref}
+      level={level}
+      isCollapsed={isCollapsed}
+      isHovered={isHovered}
+      open={open}
+      openWhenCollapsed={openWhenCollapsed}
+      isPopoutWhenCollapsed={isPopoutWhenCollapsed}
+      transitionDuration={transitionDuration}
+      browserScroll={browserScroll}
+      {...rest}
+    >
+      {/* If browserScroll is false render PerfectScrollbar */}
+      {!browserScroll && level === 0 && isPopoutWhenCollapsed && isCollapsed ? (
+        <PerfectScrollbar
+          options={{ wheelPropagation: false, suppressScrollX: true }}
+          style={{ maxBlockSize: `calc((var(--vh, 1vh) * 100))` }}
+        >
+          <ul className={styles.ul}>{children}</ul>
+        </PerfectScrollbar>
+      ) : (
+        <ul className={styles.ul}>{children}</ul>
+      )}
+    </StyledSubMenuContent>
+  )
+}
+
+export default forwardRef(SubMenuContent)