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

The React UI library from HeyCar

import { _ as __assign } from '../tslib.es6-4ac54363.js';
import React from 'react';
import Collapse from '../../../collapse';
import Typography from '../../../typography';
import { DEFAULT_LOCALE } from '../constants/Header.constants.js';
import { useNavigationItem } from '../hooks/useNavigationItem.js';
import SubNav from './SubNav.js';
import '../../../grid';
import '../../../icons';
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"};

var NavigationDropdown = React.forwardRef(function (_a, ref) {
    var activeNavItem = _a.activeNavItem, currentRoute = _a.currentRoute, dataTestId = _a.dataTestId, itemOnClick = _a.itemOnClick, Link = _a.Link, _b = _a.locale, locale = _b === void 0 ? DEFAULT_LOCALE : _b, _c = _a.navigation, navigation = _c === void 0 ? [] : _c, setActiveNavItem = _a.setActiveNavItem, trackingFn = _a.trackingFn;
    var _d = useNavigationItem(activeNavItem, setActiveNavItem), toggleSubNav = _d.toggleSubNav, keyboardOpen = _d.keyboardOpen, closeSiblings = _d.closeSiblings;
    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(function (navItem, i) {
            var label = navItem.label, subNavGroups = navItem.subNavGroups;
            var id = "nav-item-" + label.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
            var hasSubNav = subNavGroups && (subNavGroups === null || subNavGroups === void 0 ? void 0 : subNavGroups.length) > 0;
            var isActive = activeNavItem === id;
            var isCurrentPage = currentRoute && navItem.href && currentRoute === navItem.href;
            var isLastItem = i + 1 === navigation.length;
            var commonProps = {
                role: 'menuitem',
                className: styles.navItem + " " + (isActive ? styles.isActive : '') + " " + (isCurrentPage ? styles.isCurrentPage : ''),
                id: id,
            };
            return (React.createElement("li", { className: "" + (isLastItem ? styles.lastNavItem : ''), key: "dropdown-" + label, onMouseOut: function () { return toggleSubNav(id, isActive); }, onMouseOver: function () { return toggleSubNav(id, isActive, true); }, role: "none" }, hasSubNav ? (React.createElement(React.Fragment, null,
                React.createElement("button", __assign({}, commonProps, { "aria-expanded": isActive, "aria-haspopup": true, "aria-label": label + " - " + locale.spaceBarNotification, onClick: function () {
                        return itemOnClick({
                            fn: trackingFn,
                            obj: {
                                label: "" + label,
                                type: 'nav_item',
                                navType: 'dropdown',
                            },
                        }, function () { return toggleSubNav(id, isActive); });
                    }, onFocus: function () { return closeSiblings(id, hasSubNav); }, onKeyDown: function (e) { return 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, __assign({}, commonProps, { href: navItem.href, onClick: function () {
                    return 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 };