@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Navigation/Nav/NavDropdown.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { NavDropdownProps } from '../../../lib/types/components';
+import { useNavDropdown } from '../../../lib/composables/useNavbar';
+import { NavItem } from './NavItem';
+import { Icon } from '../../Icon/Icon';
+
+export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement, NavDropdownProps>(
+  (
+    { title, children, alignment = 'start', megaMenu = false, className = '', disabled = false },
+    ref
+  ) => {
+    const { generateDropdownMenuClass, getIconName } = useNavDropdown({
+      alignment,
+      megaMenu,
+    });
+
+    const [isActive, setIsActive] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const dropdownMenuClass = generateDropdownMenuClass({
+      alignment,
+      megaMenu,
+      className,
+    });
+
+    // Get the appropriate icon name
+    const iconName = getIconName(megaMenu);
+
+    // Handle dropdown toggle
+    const handleToggle = () => {
+      if (disabled) return;
+      setIsActive(!isActive);
+    };
+
+    // Handle click outside to close dropdown (desktop only)
+    useEffect(() => {
+      if (!isActive) return undefined;
+
+      const handleClickOutside = (e: MouseEvent) => {
+        const isMobile = window.innerWidth < 768; // MD breakpoint
+
+        if (!isMobile && dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+          setIsActive(false);
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [isActive]);
+
+    // Handle Escape key to close dropdown
+    useEffect(() => {
+      if (!isActive) return undefined;
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          setIsActive(false);
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }, [isActive]);
+
+    // Create the title element with the icon
+    const titleWithIcon = (
+      <>
+        {title}
+        <Icon name={iconName as any} size="sm" className="c-nav__icon" />
+      </>
+    );
+
+    // Create the dropdown/mega menu content
+    const menuContent = (
+      <div className={dropdownMenuClass} ref={dropdownRef} aria-hidden={!isActive}>
+        {children}
+      </div>
+    );
+
+    return (
+      <NavItem
+        dropdown={!megaMenu}
+        megaMenu={megaMenu}
+        disabled={disabled}
+        className={isActive ? 'is-active' : ''}
+        href="#"
+        onClick={handleToggle}
+        aria-expanded={isActive}
+      >
+        {titleWithIcon}
+        {menuContent}
+      </NavItem>
+    );
+  }
+);
+
+export type { NavDropdownProps };
+
+NavDropdown.displayName = 'NavDropdown';
+
+export default NavDropdown;

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

@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useRef, ReactNode, forwardRef } from 'react';
+import { NavItemProps } from '../../../lib/types/components';
+import { useNavItem } from '../../../lib/composables/useNavbar';
+
+/**
+ * NavItem component represents a single navigation item that can be a link, dropdown trigger, or mega menu trigger.
+ *
+ * @example
+ * ```tsx
+ * // Simple nav item
+ * <NavItem href="/about" active>About</NavItem>
+ *
+ * // Dropdown nav item
+ * <NavItem dropdown>
+ *   Services
+ *   <Menu>
+ *     <MenuItem href="/web">Web Design</MenuItem>
+ *     <MenuItem href="/mobile">Mobile Apps</MenuItem>
+ *   </Menu>
+ * </NavItem>
+ *
+ * // Mega menu nav item
+ * <NavItem megaMenu>
+ *   Products
+ *   <MegaMenu>
+ *     <MegaMenuColumn title="Web">
+ *       <MegaMenuLink href="/websites">Websites</MegaMenuLink>
+ *     </MegaMenuColumn>
+ *   </MegaMenu>
+ * </NavItem>
+ * ```
+ */
+export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
+  (
+    {
+      children,
+      dropdown = false,
+      megaMenu = false,
+      active = false,
+      href,
+      onClick,
+      className = '',
+      disabled = false,
+      'aria-expanded': ariaExpanded,
+    },
+    ref
+  ) => {
+    const { generateNavItemClass, generateNavLinkClass, handleClick } = useNavItem({
+      dropdown,
+      megaMenu,
+      active,
+      disabled,
+    });
+
+    // State for tracking dropdown open state
+    const [isActive, setIsActive] = useState(false);
+
+    // Ref for detecting outside clicks
+    const itemRef = useRef<HTMLAnchorElement>(null);
+
+    // Toggle dropdown
+    const handleDropdownToggle = (e: React.MouseEvent) => {
+      if (dropdown || megaMenu) {
+        e.preventDefault();
+        setIsActive(!isActive);
+      }
+    };
+
+    // Close dropdown on outside click (desktop only)
+    useEffect(() => {
+      if ((!dropdown && !megaMenu) || !isActive) return undefined;
+
+      const handleOutsideClick = (e: MouseEvent) => {
+        if (itemRef.current && !itemRef.current.contains(e.target as Node)) {
+          // Only handle desktop outside clicks
+          const isMobile = window.innerWidth < 768; // MD breakpoint
+          if (!isMobile) {
+            setIsActive(false);
+          }
+        }
+      };
+
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }, [dropdown, megaMenu, isActive]);
+
+    // Close dropdown on resize to desktop
+    useEffect(() => {
+      if (!dropdown && !megaMenu) return undefined;
+
+      const handleResize = () => {
+        const isMobile = window.innerWidth < 768; // MD breakpoint
+        if (!isMobile && isActive) {
+          setIsActive(false);
+        }
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [dropdown, megaMenu, isActive]);
+
+    const navItemClass =
+      generateNavItemClass({
+        dropdown,
+        megaMenu,
+        active,
+        disabled,
+        className,
+      }) + (isActive ? ' is-active' : '');
+
+    const navLinkClass = generateNavLinkClass(
+      active,
+      disabled,
+      dropdown || megaMenu ? 'c-nav__dropdown-toggle' : ''
+    );
+
+    // For dropdown items, we need to determine content structure
+    const getDropdownContent = (): ReactNode[] => {
+      const childrenArray = React.Children.toArray(children);
+
+      // For NavDropdown component, childrenArray will be [title, content]
+      // For regular NavItem, it's just the content directly
+      return childrenArray;
+    };
+
+    const childContent = getDropdownContent();
+
+    // Use aria-expanded from props if provided, otherwise use local state
+    const expanded = typeof ariaExpanded !== 'undefined' ? ariaExpanded : isActive;
+
+    return (
+      <li ref={ref} className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
+        <a
+          ref={itemRef}
+          href={href || '#'}
+          className={navLinkClass}
+          onClick={dropdown || megaMenu ? handleDropdownToggle : handleClick(onClick)}
+          aria-disabled={disabled}
+          aria-expanded={dropdown || megaMenu ? expanded : undefined}
+          aria-current={active && !dropdown && !megaMenu ? 'page' : undefined}
+        >
+          {dropdown || megaMenu ? childContent[0] : children}
+        </a>
+
+        {(dropdown || megaMenu) && childContent.length > 1 && childContent[1]}
+      </li>
+    );
+  }
+);
+
+export type { NavItemProps };
+
+NavItem.displayName = 'NavItem';
+
+export default NavItem;