@dnanpm/styleguide 3.1.0 → 3.3.0

package/build/es/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js

@@ -0,0 +1,198 @@
+import { ChevronRight } from '@dnanpm/icons';
+import React__default, { useContext, useRef } from 'react';
+import useOutsideClick from '../../../hooks/useOutsideClick.js';
+import styled, { keyframes, css } from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
+import { navMaxHeight, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
+import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
+import Icon from '../../Icon/Icon.js';
+import NavContext from '../context/NavContext.js';
+import { MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
+import LinkModifier, { isSelected } from './LinkModifier.js';
+
+const fadeIn = keyframes `
+    0% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+`;
+const fadeInAnimation = css `
+    animation: ${fadeIn} 0.3s ease-in-out;
+`;
+const noAnimation = css `
+    animation: none;
+`;
+const MegaMenuContent = styled.ul `
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+    padding-left: 0;
+`;
+const CategoryTitle = styled.span `
+    display: flex;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.bold};
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)}
+        ${getMultipliedSize(theme.base.baseWidth, 1)};
+    ${media.xl `
+        font-size: ${theme.fontSize.xl};
+    `}
+`;
+const CategoryBlock = styled.li `
+    display: block;
+    padding: ${getMultipliedSize(theme.base.baseHeight, 2)} 0;
+    border-right: 1px solid ${theme.color.line.L03};
+
+    a {
+        font-size: ${theme.fontSize.s};
+        line-height: ${theme.lineHeight.s};
+        padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
+            ${getMultipliedSize(theme.base.baseWidth, 3)};
+        &:hover,
+        &:focus {
+            background-color: ${theme.color.background.sand.E01};
+        }
+        ${media.xl `
+            font-size: ${theme.fontSize.default};
+            line-height: ${theme.lineHeight.default};
+        `}
+    }
+`;
+const CategoryCollectionBlock = styled(CategoryBlock) `
+    background-color: ${theme.color.background.sand.E01};
+`;
+const SubMenuItem = styled.li `
+    > a {
+        color: ${p => (p.isHighlighted ? theme.color.text.pink : theme.color.text.black)};
+        font-weight: ${p => (p.isHighlighted ? theme.fontWeight.bold : theme.fontWeight.book)};
+        }
+    }
+`;
+const DesktopMenuList = styled(MenuList) `
+    @media (min-width: ${p => p.collapseSize + 1}px) {
+        flex-direction: row;
+        gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
+    }
+    ul {
+        li {
+            a {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+    > li {
+        > a,
+        > button {
+            white-space: nowrap;
+            text-decoration: none;
+        }
+    }
+`;
+const DesktopMenuItem = styled(MenuItem) `
+    > a,
+    > button {
+        width: auto;
+        display: flex;
+        gap: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
+        align-items: center;
+        padding: 0 ${getMultipliedSize(theme.base.baseHeight, 0.5)};
+        height: 100%;
+        font-weight: ${theme.fontWeight.medium};
+
+        > span:first-child {
+            position: relative;
+            &:after {
+                position: absolute;
+                content: '';
+                width: 100%;
+                bottom: -22px;
+                left: 0;
+                border-bottom: 2px solid
+                    ${p => (p.isActive ? theme.color.default.pink : 'transparent')};
+            }
+        }
+    }
+`;
+// MEGAMENU 1st level
+const SubMenuList = styled.div `
+    position: absolute;
+    top: ${navMaxHeight};
+    left: 0;
+    right: 0;
+    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
+    z-index: ${({ navZIndex }) => navZIndex + 1};
+    ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
+    ? fadeInAnimation
+    : noAnimation};
+    background-color: ${theme.color.background.white.default};
+    max-height: calc(100vh - ${getMultipliedSize(theme.base.baseHeight, 3)} - ${headerMaxHeight});
+    border-bottom: 1px solid ${theme.color.line.L03};
+    overflow: auto;
+    ul {
+        padding: 0;
+        list-style: none;
+    }
+`;
+const SubMenuLevel1 = ({ menuItem }) => {
+    const { categoryCollectionText, collapseSize, currentUrl, lang, menuLevel, navZIndex } = useContext(NavContext);
+    const level1HasElements = !!menuItem.pages.length;
+    const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
+    // Helper function to render a sub menu item
+    const renderSubMenuItem = (element, index, currUrl) => (React__default.createElement(SubMenuItem, { key: element.id, isHighlighted: isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
+        React__default.createElement(LinkModifier, { menuItem: element, tabIndex: false })));
+    if (!level1HasElements) {
+        return null;
+    }
+    return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
+        React__default.createElement(MegaMenuContent, null,
+            pagesWithSubItems.slice(0, 5).map(element => (React__default.createElement(CategoryBlock, { key: element.id },
+                React__default.createElement(CategoryTitle, null, element.titles[lang]),
+                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+            pagesWithSubItems.length > 5 && (React__default.createElement(CategoryCollectionBlock, null,
+                React__default.createElement(CategoryTitle, null, categoryCollectionText),
+                React__default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                    .slice(5)
+                    .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
+            React__default.createElement(FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.createElement(LinkModifier, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+};
+const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
+    const { lang, handleNavMenuClick, currentUrl, menuLevel } = useContext(NavContext);
+    const menuClickMain = (element) => () => {
+        handleNavMenuClick(element.id, 'level1');
+    };
+    return (React__default.createElement(DesktopMenuItem, { isActive: isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}`, role: "presentation" },
+        React__default.createElement(MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
+            React__default.createElement("span", null, menuItem.titles[lang]),
+            React__default.createElement(Icon, { icon: ChevronRight, size: "1rem" })),
+        React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
+};
+const DesktopMenu = () => {
+    var _a;
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl, collapseSize } = useContext(NavContext);
+    const mainNavigation = ((_a = items === null || items === void 0 ? void 0 : items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+    const ref = useRef(null);
+    useOutsideClick(ref, () => {
+        if (menuLevel.level1 || menuLevel.level2) {
+            resetMenuEvents();
+        }
+    });
+    if (!mainNavigation.length) {
+        return null;
+    }
+    return (React__default.createElement(DesktopMenuList, { role: "menu", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul", collapseSize: collapseSize }, mainNavigation.map((navElement, index) => {
+        var _a;
+        const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
+        if (displaySubMenu) {
+            return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+        }
+        return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "presentation", "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: isSelected(currentUrl, navElement.urls[lang]) },
+            React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
+    })));
+};
+
+export { DesktopMenu as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/LanguageSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { LanguageSelectorProps } from '../types/globalNavProps';
+declare const LanguageSelector: ({ currentLanguage, languagesObject, languageSelectorLabel, }: LanguageSelectorProps) => React.JSX.Element | null;
+export default LanguageSelector;

package/build/es/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js

@@ -0,0 +1,31 @@
+import { Globe } from '@dnanpm/icons';
+import React__default, { useContext, useCallback } from 'react';
+import styled from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
+import { navIconSize } from '../../../themes/themeComponents/navigation.js';
+import { getMultipliedSize } from '../../../utils/styledUtils.js';
+import Icon from '../../Icon/Icon.js';
+import NavContext from '../context/NavContext.js';
+import { MenuLink } from '../globalNavStyles.js';
+import MainNavTooltipMenu from './MainNavTooltipMenu.js';
+
+const MenuItem = styled(MenuLink) `
+    font-weight: ${theme.fontWeight.medium};
+    margin: ${getMultipliedSize(theme.base.baseHeight, 1)} auto;
+    text-align: center;
+`;
+const LangComponent = ({ currentLanguage, languagesObject }) => (React__default.createElement(React__default.Fragment, null, Object.entries(languagesObject)
+    .filter(([key]) => key.toLowerCase() !== currentLanguage.toLowerCase())
+    .map(([key, value]) => (React__default.createElement(MenuItem, { key: `language-${key}`, href: value }, key.toUpperCase())))));
+const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLabel, }) => {
+    const { isMobileMenu, navZIndex } = useContext(NavContext);
+    const LngComponent = useCallback(() => (React__default.createElement(LangComponent, { languageSelectorLabel: languageSelectorLabel, currentLanguage: currentLanguage, languagesObject: languagesObject })), [currentLanguage, languagesObject, languageSelectorLabel]);
+    if (Object.keys(languagesObject).length < 2) {
+        return null;
+    }
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
+        React__default.createElement(Icon, { icon: Globe, size: navIconSize }),
+        React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
+};
+
+export { LanguageSelector as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MenuLevelItem } from '../types/globalNavProps';
+interface LinkModifierProps {
+    menuItem: MenuLevelItem;
+    tabIndex: boolean;
+    showIcon?: boolean;
+}
+export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
+declare const LinkModifier: ({ menuItem, tabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
+export default LinkModifier;

package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.js

@@ -0,0 +1,33 @@
+import { Open, ArrowRight } from '@dnanpm/icons';
+import React__default, { useContext } from 'react';
+import theme from '../../../themes/theme.js';
+import Icon from '../../Icon/Icon.js';
+import NavContext from '../context/NavContext.js';
+import { MenuLink } from '../globalNavStyles.js';
+
+const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
+    if (currentUrl && linkUrl) {
+        let url = linkUrl;
+        if (url.includes('http')) {
+            url = url.replace(/^.*\/\/[^/]+/, '');
+        }
+        return exactMatch ? url === currentUrl : currentUrl.includes(url);
+    }
+    return false;
+};
+const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
+    const { lang, nextJSLinkComponent, resetMenuEvents } = useContext(NavContext);
+    const menuItemLink = menuItem.urls[lang] || '';
+    const isExternalLink = menuItem.target === '_blank';
+    const MenuLinkComponent = (React__default.createElement(MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, role: "menuitem", tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (React__default.createElement(Icon, { icon: isExternalLink ? Open : ArrowRight, size: "1rem", color: theme.color.default.pink })),
+        React__default.createElement("span", null, menuItem.titles[lang])));
+    if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
+        const NextJSLinkComponent = nextJSLinkComponent;
+        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItemLink }, MenuLinkComponent));
+    }
+    return MenuLinkComponent;
+};
+
+export { LinkModifier as default, isSelected };

package/build/es/components/MainHeaderNavigation/ChildComponents/LoginTooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LoginTooltipProp {
+    isLogged?: boolean;
+    loginLabel?: string;
+}
+declare const LoginTooltip: ({ isLogged, loginLabel }: LoginTooltipProp) => React.JSX.Element;
+export default LoginTooltip;

package/build/es/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js

@@ -0,0 +1,15 @@
+import { User } from '@dnanpm/icons';
+import React__default, { useContext } from 'react';
+import { navIconSize } from '../../../themes/themeComponents/navigation.js';
+import Icon from '../../Icon/Icon.js';
+import NavContext from '../context/NavContext.js';
+import MainNavTooltipMenu from './MainNavTooltipMenu.js';
+
+const LoginTooltip = ({ isLogged, loginLabel }) => {
+    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { icon: User, size: navIconSize }),
+        React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
+};
+
+export { LoginTooltip as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -0,0 +1,193 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MainNavTooltipMenuProps {
+    /** Aria-label for screen readers in mobile */
+    ariaLabel?: string;
+    /** Tooltip menu content */
+    children?: ReactNode;
+    /** Overlap other elements */
+    zIndex?: number;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /** Mandatory Component provided as login content */
+    contentComponent?: ReactNode | boolean;
+    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
+    closeWhenTagClicked?: string[];
+    /** Width of the opened menu content. default 20rem. */
+    contentWidth?: string;
+    /** This will define the global state object string. mandatory */
+    globalStateString: string;
+    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
+    fullWidthDesktop?: boolean;
+    /** Adjust menu to be full width after this number. default xs (480). */
+    fullWidthBreakpoint?: number;
+}
+export declare const IconContainer: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        /** This will define the global state object string. mandatory */
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, {
+    isActive?: boolean | undefined;
+    collapseSize: number;
+}, never>;
+declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, }: MainNavTooltipMenuProps) => React.JSX.Element;
+export default MainNavTooltipMenu;

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -0,0 +1,112 @@
+import React__default, { useContext, useRef, useEffect } from 'react';
+import useCloseOutsideOrElementClicked from '../../../hooks/useCloseOutsideOrElementClicked.js';
+import useDocHeight from '../../../hooks/useDocHeight.js';
+import styled from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
+import { IconContainerMinWidth, navIconSize, navMaxHeight } from '../../../themes/themeComponents/navigation.js';
+import { getMultipliedSize } from '../../../utils/styledUtils.js';
+import Box from '../../Box/Box.js';
+import NavContext from '../context/NavContext.js';
+import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
+import ButtonPrimary from '../../Button/ButtonPrimary.js';
+
+const IconContainer = styled.div `
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: ${IconContainerMinWidth};
+    transition: color 0.2s ease-in-out;
+
+    > span.dnasg-icon > svg {
+        display: block;
+        height: ${navIconSize};
+        width: ${navIconSize};
+    }
+    > span.dnasg-icon > svg,
+    > span.dnasg-icon + span {
+        color: ${p => (p.isActive ? theme.color.text.pink : 'inherit')};
+    }
+
+    @media (min-width: ${p => p.collapseSize + 1}px) {
+        min-width: ${getMultipliedSize(theme.base.baseWidth, 6)};
+        > span.dnasg-icon + span {
+            display: block;
+        }
+    }
+`;
+const Tooltip = styled.div `
+    min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
+    // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
+    max-height: calc(var(--vh100, 100vh) - ${getMultipliedSize(theme.base.baseHeight, 12)});
+    width: 100%;
+    position: absolute;
+    right: 0;
+    top: ${navMaxHeight};
+    z-index: ${p => p.zIndex};
+    display: flex;
+    flex-direction: row;
+
+    @media (min-width: ${p => p.fullWidthBreakpoint}px) {
+        width: ${p => p.contentWidth};
+        right: ${p => (p.fullWidthDesktop ? 0 : p.tooltipRight)};
+    }
+`;
+const TooltipBox = styled(Box) `
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    min-height: inherit;
+    max-height: inherit;
+`;
+const Caret = styled.div `
+    position: absolute;
+    z-index: ${p => p.zIndex + 1};
+    top: ${navMaxHeight};
+    transform: translate3d(50%, -50%, 0) rotate(-45deg);
+    width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    height: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+    background-color: ${theme.color.default.white};
+    border: 1px solid ${theme.color.line.L03};
+    border-width: 1px 1px 0 0;
+    margin-left: -${getMultipliedSize(theme.base.baseWidth, 1)};
+
+    @media (min-width: ${p => p.collapseSize + 1}px) {
+        max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
+    }
+`;
+const MainNavTooltipMenu = ({ ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem', zIndex = 1, }) => {
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    const ref = useRef(null);
+    const globalStateKey = globalStateString;
+    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
+    const ContentComponent = contentComponent;
+    useDocHeight();
+    useEffect(() => {
+        setTooltipItems({
+            minicart: showMinicart,
+            login: showLoginTooltip,
+            search: false,
+        });
+    }, [showMinicart, showLoginTooltip, setTooltipItems]);
+    const toggleState = () => {
+        resetMenuEvents();
+        setTimeout(() => {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
+        });
+    };
+    useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
+        if (tooltipItems[globalStateKey]) {
+            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
+        }
+    });
+    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: ContentComponent ? toggleState : undefined }, children)),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+            React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
+                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
+};
+
+export { IconContainer, MainNavTooltipMenu as default };