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

The React UI library from HeyCar

var tslib_es6 = require('../tslib.es6-0efb545c.js');
var React = require('react');
var Collapse = require('../../../collapse/cssm');
var Typography = require('../../../typography/cssm');
var constants_Header_constants = require('../constants/Header.constants.js');
var hooks_useNavigationItem = require('../hooks/useNavigationItem.js');
var components_SubNav = require('./SubNav.js');
var styles = require('../styles/navigationDropdown.module.css');
require('../../../grid/cssm');
require('../utils/navigationHelpers.js');
require('../utils/headerItemHelpers.js');
require('../../../icons/cssm');
require('../styles/subNav.module.css');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);

var NavigationDropdown = React__default["default"].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 ? constants_Header_constants.DEFAULT_LOCALE : _b, _c = _a.navigation, navigation = _c === void 0 ? [] : _c, setActiveNavItem = _a.setActiveNavItem, trackingFn = _a.trackingFn;
    var _d = hooks_useNavigationItem.useNavigationItem(activeNavItem, setActiveNavItem), toggleSubNav = _d.toggleSubNav, keyboardOpen = _d.keyboardOpen, closeSiblings = _d.closeSiblings;
    return (React__default["default"].createElement("nav", { className: styles__default["default"].nav, "data-nav-type": "dropdown-menu", "data-test-id": dataTestId, ref: ref, role: "navigation" },
        React__default["default"].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__default["default"].navItem + " " + (isActive ? styles__default["default"].isActive : '') + " " + (isCurrentPage ? styles__default["default"].isCurrentPage : ''),
                id: id,
            };
            return (React__default["default"].createElement("li", { className: "" + (isLastItem ? styles__default["default"].lastNavItem : ''), key: "dropdown-" + label, onMouseOut: function () { return toggleSubNav(id, isActive); }, onMouseOver: function () { return toggleSubNav(id, isActive, true); }, role: "none" }, hasSubNav ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                React__default["default"].createElement("button", tslib_es6.__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__default["default"].createElement(Typography__default["default"], { variant: "button2" }, label)),
                React__default["default"].createElement(Collapse__default["default"], { "aria-hidden": !isActive, "aria-label": label + " " + locale.subMenuLabel, className: styles__default["default"].collapse, open: isActive, role: "group" },
                    React__default["default"].createElement(components_SubNav, { Link: Link, isDropDownMenu: true, isOpen: isActive, itemOnClick: itemOnClick, locale: locale, navItemId: commonProps.id, navItemName: label, subNavGroups: subNavGroups, trackingFn: trackingFn })))) : (React__default["default"].createElement(Link, tslib_es6.__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__default["default"].createElement(Typography__default["default"], { variant: "button2" }, label)))));
        }))));
});

module.exports = NavigationDropdown;