@heycar-uikit/core/header/modern/components/NavigationDropdown.js

The React UI library from HeyCar

import React from 'react';
import Collapse from '../../../collapse/modern';
import Typography from '../../../typography/modern';
import { DEFAULT_LOCALE } from '../constants/Header.constants.js';
import { useNavigationItem } from '../hooks/useNavigationItem.js';
import SubNav from './SubNav.js';
import '../../../grid/modern';
import '../../../icons/modern';
import '../utils/navigationHelpers.js';
import '../utils/headerItemHelpers.js';

var styles = {"navItem":"header__navItem_fyf3c","isActive":"header__isActive_fyf3c","isCurrentPage":"header__isCurrentPage_fyf3c","nav":"header__nav_fyf3c","collapse":"header__collapse_fyf3c"};
 require('./../styles/navigationdropdown.css');

const NavigationDropdown = React.forwardRef(({ activeNavItem, currentRoute, dataTestId, itemOnClick, Link, locale = DEFAULT_LOCALE, navigation = [], setActiveNavItem, trackingFn, }, ref) => {
    const { toggleSubNav, keyboardOpen, closeSiblings } = useNavigationItem(activeNavItem, setActiveNavItem);
    return (React.createElement("nav", { className: styles.nav, "data-nav-type": "dropdown-menu", "data-test-id": dataTestId, ref: ref, role: "navigation" },
        React.createElement("ul", { "aria-label": "Main navigation", role: "menubar", tabIndex: 0 }, navigation.map((navItem, i) => {
            const { label, subNavGroups } = navItem;
            const id = `nav-item-${label.replace(/^[^a-z]+|[^\w:.-]+/gi, '')}`;
            const hasSubNav = subNavGroups && subNavGroups?.length > 0;
            const isActive = activeNavItem === id;
            const isCurrentPage = currentRoute && navItem.href && currentRoute === navItem.href;
            const isLastItem = i + 1 === navigation.length;
            const commonProps = {
                role: 'menuitem',
                className: `${styles.navItem} ${isActive ? styles.isActive : ''} ${isCurrentPage ? styles.isCurrentPage : ''}`,
                id,
            };
            return (React.createElement("li", { className: `${isLastItem ? styles.lastNavItem : ''}`, key: `dropdown-${label}`, onMouseOut: () => toggleSubNav(id, isActive), onMouseOver: () => toggleSubNav(id, isActive, true), role: "none" }, hasSubNav ? (React.createElement(React.Fragment, null,
                React.createElement("button", { ...commonProps, "aria-expanded": isActive, "aria-haspopup": true, "aria-label": `${label} - ${locale.spaceBarNotification}`, onClick: () => itemOnClick({
                        fn: trackingFn,
                        obj: {
                            label: `${label}`,
                            type: 'nav_item',
                            navType: 'dropdown',
                        },
                    }, () => toggleSubNav(id, isActive)), onFocus: () => closeSiblings(id, hasSubNav), onKeyDown: e => keyboardOpen(e, id, isActive) },
                    React.createElement(Typography, { variant: "button2" }, label)),
                React.createElement(Collapse, { "aria-hidden": !isActive, "aria-label": `${label} ${locale.subMenuLabel}`, className: styles.collapse, open: isActive, role: "group" },
                    React.createElement(SubNav, { Link: Link, isDropDownMenu: true, isOpen: isActive, itemOnClick: itemOnClick, locale: locale, navItemId: commonProps.id, navItemName: label, subNavGroups: subNavGroups, trackingFn: trackingFn })))) : (React.createElement(Link, { ...commonProps, href: navItem.href, onClick: () => itemOnClick({
                    fn: trackingFn,
                    obj: {
                        label: `${label}`,
                        type: 'nav_item',
                        href: navItem.href,
                        navType: 'dropdown',
                    },
                }, navItem.onClick) },
                React.createElement(Typography, { variant: "button2" }, label)))));
        }))));
});

export { NavigationDropdown as default };