@dnanpm/styleguide 3.0.0 → 3.2.0

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MobileMenu.js

@@ -0,0 +1,196 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactSpring = require('react-spring');
+var styled = require('../../../themes/styled.js');
+var theme = require('../../../themes/theme.js');
+var navigation = require('../../../themes/themeComponents/navigation.js');
+var styledUtils = require('../../../utils/styledUtils.js');
+var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlChevronLeft = require('../../Icons/hlChevronLeft.js');
+var hlChevronRight = require('../../Icons/hlChevronRight.js');
+var MobileMenuContext = require('../context/MobileMenuContext.js');
+var NavContext = require('../context/NavContext.js');
+var globalNavStyles = require('../globalNavStyles.js');
+var LinkModifier = require('./LinkModifier.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MobileMenuWrapper = styled["default"].div `
+    width: ${100 * navigation.menuLevelsAmount}%;
+    button {
+        border: 0;
+        background: transparent;
+    }
+`;
+const mobileMenu = `calc(100vh - ${navigation.headerMaxHeight})`;
+const MenuLinkBackLink = styled["default"](globalNavStyles.MenuLink) ``;
+const MobileMenuContainer = styled["default"].div `
+    width: 100%;
+    position: absolute;
+    top: ${navigation.navMaxHeight};
+    right: 0;
+    overflow: hidden;
+    overflow-y: auto;
+    transition: max-height 0.2s ease-in-out;
+    background: ${theme["default"].color.background.white.default};
+    max-height: ${mobileMenu};
+    height: ${mobileMenu};
+    max-width: ${navigation.mobileNavMaxWidth};
+    ${globalNavStyles.MenuList} {
+        display: block;
+        float: left;
+        width: ${100 / navigation.menuLevelsAmount}%;
+        position: relative;
+        min-height: ${mobileMenu};
+        &:first-of-type {
+            background: ${theme["default"].color.background.white.default};
+            > ${globalNavStyles.MenuItem} > ${globalNavStyles.MenuLink} {
+                font-weight: ${theme["default"].fontWeight.bold};
+                height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 6)};
+            }
+        }
+        &:not(:first-of-type) {
+            background: ${theme["default"].color.background.sand.default};
+        }
+        ${globalNavStyles.MenuItem} {
+            border-bottom: 1px solid ${theme["default"].color.line.L04};
+            &:last-of-type {
+                margin-bottom: ${navigation.headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
+            }
+        }
+    }
+    ${globalNavStyles.MenuLink}, ${globalNavStyles.MenuLinkWithChildren} {
+        line-height: ${theme["default"].lineHeight.default};
+        padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.75)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.75)}
+            ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
+        font-size: ${theme["default"].fontSize.default};
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        height: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 5)};
+        &:hover {
+            cursor: pointer;
+            text-decoration: none;
+        }
+    }
+    ${MenuLinkBackLink} {
+        font-weight: ${theme["default"].fontWeight.bold};
+        background: ${theme["default"].color.background.white.default};
+        color: ${theme["default"].color.text.pink};
+        justify-content: flex-start;
+        gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+        height: auto;
+    }
+    ${globalNavStyles.FeaturedBlock} {
+        border-bottom: 1px solid ${theme["default"].color.line.L04};
+        > a {
+            font-size: ${theme["default"].fontSize.s};
+            line-height: ${theme["default"].lineHeight.s};
+            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1)};
+            height: auto;
+        }
+    }
+`;
+const useTabNavigationDisabled = (scrollPosition, indexLevel) => scrollPosition !== indexLevel;
+const MenuItemBackLink = ({ currentLevel }) => {
+    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext["default"]);
+    const levels = {
+        level1Items,
+        level2Items,
+    };
+    const menuElementLevel = `level${currentLevel - 1}Items`;
+    const menuElements = levels[menuElementLevel];
+    const mobileMenuBackClick = () => {
+        handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
+    };
+    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
+    const backLink = getBackLink(menuElements, currentLevel - 1);
+    return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default["default"].createElement(MenuLinkBackLink, { role: "menuitem", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default["default"].createElement(Icon["default"], { icon: hlChevronLeft["default"], size: "1rem" }),
+            backLink.titles[lang])));
+};
+const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
+    var _a;
+    const { handleNavMenuClick, menuLevel, lang, currentUrl } = React.useContext(NavContext["default"]);
+    const { mobileMenuRef } = React.useContext(MobileMenuContext["default"]);
+    const hasChildren = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages) === null || _a === void 0 ? void 0 : _a.length;
+    const indexLevel = currentLevel - 1;
+    const tabNavigationDisabled = useTabNavigationDisabled(menuLevel.scrollPosition, indexLevel);
+    const menuUrl = menuItem.urls[lang] || '';
+    const mobileMenuClick = (element) => (e) => {
+        var _a, _b;
+        (_b = (_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            top: 0,
+            left: 0,
+            behavior: 'smooth',
+        });
+        e.preventDefault();
+        handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
+    };
+    const renderMenuItem = (children) => (React__default["default"].createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "presentation", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) }, children));
+    if (hasChildren && currentLevel < 3) {
+        return renderMenuItem(React__default["default"].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled ? -1 : undefined },
+            menuItem.titles[lang],
+            React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1.5rem", color: theme["default"].color.default.pink })));
+    }
+    return renderMenuItem(React__default["default"].createElement(LinkModifier["default"], { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
+};
+const SubMenuMobile = ({ currentLevel, menuItem }) => {
+    const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
+    const indexLevel = currentLevel - 1;
+    const { collapseSize, menuLevel: { scrollPosition }, } = React.useContext(NavContext["default"]);
+    const tabNavigationDisabled = useTabNavigationDisabled(scrollPosition, indexLevel);
+    if (!menuItem.pages.length) {
+        return null;
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        currentLevel > 1 && React__default["default"].createElement(MenuItemBackLink, { currentLevel: currentLevel }),
+        featuredItems.length > 0 && (React__default["default"].createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default["default"].createElement(LinkModifier["default"], { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
+        menuItem.pages
+            .filter(subMenuItem => !featuredItems.includes(subMenuItem))
+            .map((subMenuItem, index) => (React__default["default"].createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
+};
+const NavigationMenuMobile = () => {
+    const { items, menuLevel, level1Items, level2Items } = React.useContext(NavContext["default"]);
+    const { mainNavigation } = items;
+    if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
+        return null;
+    }
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default["default"].createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
+        React__default["default"].createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        renderMenuList(0, 1, mainNavigation),
+        menuLevel.level1Mobile !== null &&
+            renderMenuList(1, 2, level1Items[menuLevel.level1Mobile]),
+        menuLevel.level2Mobile !== null &&
+            renderMenuList(2, 3, level2Items[menuLevel.level2Mobile])));
+};
+const RenderMobileMenu = () => {
+    const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext["default"]);
+    const mobileMenuRef = React.useRef(null);
+    const slidingMenuAnimation = reactSpring.useSpring({
+        transform: `translateX(${(menuLevel.scrollPosition / navigation.menuLevelsAmount) * -100}%)`,
+    });
+    const mobileMenuContext = React.useMemo(() => ({
+        mobileMenuRef,
+    }), [mobileMenuRef]);
+    if (!isMobileMenuOpen) {
+        return null;
+    }
+    return (React__default["default"].createElement(MobileMenuContainer, { ref: mobileMenuRef },
+        React__default["default"].createElement(MobileMenuContext["default"].Provider, { value: mobileMenuContext },
+            React__default["default"].createElement(MobileMenuWrapper, null,
+                React__default["default"].createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
+                    React__default["default"].createElement(NavigationMenuMobile, null))))));
+};
+
+exports["default"] = RenderMobileMenu;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/PageSearch.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface PageSearchProps {
+    searchLabel?: string;
+}
+declare const PageSearch: ({ searchLabel }: PageSearchProps) => React.JSX.Element;
+export default PageSearch;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/PageSearch.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Icon = require('../../Icon/Icon.js');
+require('tslib');
+var hlMagnifyingGlass = require('../../Icons/hlMagnifyingGlass.js');
+var NavContext = require('../context/NavContext.js');
+var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
+var navigation = require('../../../themes/themeComponents/navigation.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const PageSearch = ({ searchLabel }) => {
+    const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext["default"]);
+    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default["default"].createElement(Icon["default"], { icon: hlMagnifyingGlass["default"], size: navigation.navIconSize }),
+        React__default["default"].createElement("span", null, searchLabel)));
+};
+
+exports["default"] = PageSearch;

package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { GlobalNavItems } from './types/globalNavProps';
+export interface MainHeaderNavigationProps {
+    businessMenuAriaLabel?: string;
+    categoryCollectionText?: string;
+    /** Allows to pass a custom className */
+    className?: string;
+    items?: GlobalNavItems;
+    language?: string;
+    zIndex?: number;
+    search?: boolean;
+    searchText?: string;
+    searchComponent?: ReactNode | boolean;
+    mainMenuAriaLabel?: string;
+    minicart?: boolean;
+    minicartText?: string;
+    minicartAmount?: number;
+    minicartComponent?: ReactNode | boolean;
+    showMinicart?: boolean;
+    showLoginTooltip?: boolean;
+    languageSelector?: boolean;
+    languageSelectorText?: string;
+    login?: boolean;
+    loginText?: string;
+    loginComponent?: ReactNode | boolean;
+    isLoggedIn?: boolean;
+    collapseSize?: number;
+    nextJSLinkComponent: ReactNode | boolean;
+    currentUrl?: string;
+    notificationText?: string;
+}
+/** @visibleName MainHeaderNavigation */
+declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, }: MainHeaderNavigationProps) => React.JSX.Element;
+/** @component */
+export default MainHeaderNavigation;

package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -0,0 +1,322 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ramda = require('ramda');
+var React = require('react');
+var useScrollPosition = require('../../hooks/useScrollPosition.js');
+var useWindowSize = require('../../hooks/useWindowSize.js');
+var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
+var navigation = require('../../themes/themeComponents/navigation.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Notification = require('../Notification/Notification.js');
+var MobileMenu = require('./ChildComponents/MobileMenu.js');
+var NavContext = require('./context/NavContext.js');
+var BusinessMenu = require('./ChildComponents/BusinessMenu.js');
+var globalNavStyles = require('./globalNavStyles.js');
+var DnaLogo = require('../DnaLogo/DnaLogo.js');
+var DesktopMenu = require('./ChildComponents/DesktopMenu.js');
+var LanguageSelector = require('./ChildComponents/LanguageSelector.js');
+var PageSearch = require('./ChildComponents/PageSearch.js');
+var MinicartTooltip = require('./ChildComponents/MinicartTooltip.js');
+var LoginTooltip = require('./ChildComponents/LoginTooltip.js');
+var MainNavTooltipMenu = require('./ChildComponents/MainNavTooltipMenu.js');
+var Icon = require('../Icon/Icon.js');
+require('tslib');
+var hlMenu = require('../Icons/hlMenu.js');
+var hlX = require('../Icons/hlX.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const GlobalStyle = styled.createGlobalStyle `
+    body.overflow-hidden {
+        overflow: hidden;
+    }
+`;
+// detect common touch screen devices
+const isIosDevice = () => {
+    const validate = /iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i;
+    if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
+        return (validate.test(navigator.userAgent) &&
+            !window.MSStream);
+    }
+    return false;
+};
+const iosDevice = isIosDevice();
+const fadeIn = styled.keyframes `
+    0% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    5% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+`;
+const preventBodyScroll = () => {
+    const { scrollY } = window;
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+};
+const resumeBodyScroll = () => {
+    const scrollY = document.body.style.top;
+    document.body.style.position = '';
+    document.body.style.top = '';
+    // if the call to close overlay is done multiple times, scroll only the first time
+    if (scrollY) {
+        setTimeout(() => {
+            window.scrollTo(0, parseInt(scrollY, 10) * -1);
+        });
+    }
+};
+const PageOverlay = styled["default"].div `
+    position: fixed;
+    animation: ${fadeIn} 0.2s ease-in-out;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ${theme["default"].color.background.plum.default + theme["default"].color.transparency.T10};
+    z-index: ${({ navZIndex }) => navZIndex - 1};
+`;
+const scrollThreshold = 82;
+const checkThreshold = (prevPos, currPos) => {
+    if (prevPos >= currPos) {
+        return prevPos - currPos > scrollThreshold;
+    }
+    return currPos - prevPos > scrollThreshold;
+};
+const GlobalNavigationContainer = styled["default"].header `
+    z-index: ${({ navZIndex }) => navZIndex};
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background-color: ${theme["default"].color.background.white.default};
+    color: ${theme["default"].color.text.black};
+    max-width: 2560px;
+    margin: 0 auto;
+`;
+const NavigationWrapper = styled["default"].div `
+    display: flex;
+    width: 100%;
+    max-width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 256)};
+    margin: 0 auto;
+    height: ${navigation.navMaxHeight};
+    position: relative;
+    flex-wrap: nowrap;
+    gap: 0;
+    background-color: ${theme["default"].color.background.white.default};
+    border-bottom: 1px solid ${theme["default"].color.line.L04};
+    @media (min-width: ${p => p.collapseSize + 1}px) {
+        flex-wrap: nowrap;
+        gap: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
+    }
+`;
+let previousValue = false;
+const isStickySupported = typeof CSS !== 'undefined' &&
+    typeof CSS.supports !== 'undefined' &&
+    (CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky'));
+const initiateScrollToHeader = (componentRef) => {
+    if ((componentRef === null || componentRef === void 0 ? void 0 : componentRef.current) && isStickySupported && typeof window !== 'undefined') {
+        window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
+    }
+};
+/** @visibleName MainHeaderNavigation */
+const MainHeaderNavigation = ({ businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030, }) => {
+    var _a, _b;
+    const { isMobile } = useWindowSize["default"](collapseSize);
+    const navigationEl = React.useRef(null);
+    const key = ramda.prop('id');
+    // Index & memoize menu levels
+    const level1 = React.useMemo(() => { var _a, _b; return (_b = (_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) !== null && _b !== void 0 ? _b : []; }, [items.mainNavigation]);
+    const level1Items = React.useMemo(() => ramda.indexBy(key, level1), [level1, key]);
+    const level2 = React.useMemo(() => level1.map(item => ramda.indexBy(key, item.pages)), [level1, key]);
+    const level2Items = Object.assign({}, ...level2);
+    // All states to for handling menus
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
+    const [menuLevel, setMenuLevel] = React.useState({
+        level1: null,
+        animate1: true,
+        level2: null,
+        animate2: true,
+        level1Mobile: null,
+        level2Mobile: null,
+        scrollPosition: 0,
+        hideOnScroll: false,
+    });
+    const [lang] = React.useState(language);
+    // As scroll position cannot be always retained, close mobile menu when orientation changes
+    const initRotation = () => {
+        setIsMobileMenuOpen(false);
+    };
+    React.useEffect(() => {
+        if (iosDevice && isMobileMenuOpen) {
+            window.addEventListener('orientationchange', initRotation, false);
+            preventBodyScroll();
+        }
+        if (iosDevice && !isMobileMenuOpen) {
+            window.removeEventListener('orientationchange', initRotation, false);
+            resumeBodyScroll();
+        }
+        return () => {
+            window.removeEventListener('orientationchange', initRotation, false);
+            resumeBodyScroll();
+        };
+    }, [isMobileMenuOpen]);
+    const [tooltipItems, setTooltipItems] = React.useState(React.useMemo(() => ({
+        minicart: false,
+        login: false,
+        search: false,
+    }), []));
+    const tooltipMenuActive = tooltipItems.minicart || tooltipItems.login || tooltipItems.search;
+    const freezeOverflow = isMobileMenuOpen || (tooltipMenuActive && isMobile);
+    const isPageOverlay = isMobileMenuOpen || tooltipMenuActive || menuLevel.level1 || menuLevel.level2;
+    React.useEffect(() => {
+        const bodyClasses = ['overflow-shown', 'overflow-hidden'];
+        document.body.classList.remove(...bodyClasses);
+        document.body.classList.add(bodyClasses[Number(Boolean(freezeOverflow))]);
+    }, [freezeOverflow]);
+    const navigationContext = React.useMemo(() => {
+        const handleNavMenuClick = (newValue, updatedLevel) => {
+            let clickedItself = false;
+            switch (updatedLevel) {
+                case 'level1':
+                    clickedItself = newValue === menuLevel.level1;
+                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1: !clickedItself ? newValue : null, animate1: !clickedItself, level2: null, animate2: true }));
+                    break;
+                case 'level2':
+                    clickedItself = newValue === menuLevel.level2;
+                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2: newValue !== menuLevel.level2 ? newValue : null, animate1: false, animate2: !clickedItself }));
+                    break;
+                case 'level1Mobile':
+                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level1Mobile: newValue || menuLevel.level1Mobile, scrollPosition: newValue ? 1 : 0 }));
+                    break;
+                case 'level2Mobile':
+                    setMenuLevel(Object.assign(Object.assign({}, menuLevel), { level2Mobile: newValue || menuLevel.level2Mobile, scrollPosition: newValue ? 2 : 1 }));
+                    break;
+            }
+        };
+        const resetMenuEvents = () => {
+            setMenuLevel({
+                level2: null,
+                animate2: true,
+                level1: null,
+                animate1: true,
+                level1Mobile: null,
+                level2Mobile: null,
+                scrollPosition: 0,
+                hideOnScroll: false,
+            });
+            if (isMobileMenuOpen) {
+                setIsMobileMenuOpen(false);
+            }
+            setTooltipItems({
+                minicart: false,
+                login: false,
+                search: false,
+            });
+        };
+        const getBackLink = (menuElements, i) => {
+            const idValue = menuLevel[`level${i}Mobile`];
+            return menuElements[idValue];
+        };
+        // Resets menu states when menu content alters between mobile and desktop
+        const menuChanged = previousValue !== isMobile;
+        if (menuChanged) {
+            resetMenuEvents();
+            previousValue = isMobile;
+        }
+        return {
+            categoryCollectionText,
+            collapseSize,
+            currentUrl,
+            getBackLink,
+            handleNavMenuClick,
+            isLoggedIn,
+            isMobileMenu: isMobile,
+            isMobileMenuOpen,
+            items,
+            lang,
+            level1Items,
+            level2Items,
+            loginComponent,
+            menuLevel,
+            minicartComponent,
+            navZIndex: zIndex,
+            nextJSLinkComponent,
+            resetMenuEvents,
+            searchComponent,
+            setTooltipItems,
+            showLoginTooltip,
+            showMinicart,
+            tooltipItems,
+        };
+    }, [
+        categoryCollectionText,
+        collapseSize,
+        currentUrl,
+        isLoggedIn,
+        isMobile,
+        isMobileMenuOpen,
+        items,
+        lang,
+        level1Items,
+        level2Items,
+        loginComponent,
+        menuLevel,
+        minicartComponent,
+        nextJSLinkComponent,
+        searchComponent,
+        showLoginTooltip,
+        showMinicart,
+        tooltipItems,
+        zIndex,
+    ]);
+    useScrollPosition["default"](({ prevPos, currPos }) => {
+        const overThreshold = checkThreshold(prevPos.y, currPos.y);
+        const isShow = currPos.y < prevPos.y;
+        if (isShow !== menuLevel.hideOnScroll && overThreshold && !menuLevel.level1) {
+            setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
+        }
+    }, undefined, false, 200);
+    const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
+    const languagesObject = (_b = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _b === void 0 ? void 0 : _b.urls;
+    const { resetMenuEvents } = navigationContext;
+    const handleToggleClick = () => {
+        resetMenuEvents();
+        initiateScrollToHeader(navigationEl);
+        setIsMobileMenuOpen(!isMobileMenuOpen);
+    };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        isPageOverlay && React__default["default"].createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
+        React__default["default"].createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
+            React__default["default"].createElement(NavContext["default"].Provider, { value: navigationContext },
+                React__default["default"].createElement(GlobalStyle, null),
+                !items.mainNavigation && notificationText && (React__default["default"].createElement(Notification["default"], { type: "info" }, notificationText)),
+                React__default["default"].createElement(BusinessMenu["default"], { ariaLabel: businessMenuAriaLabel }),
+                React__default["default"].createElement(NavigationWrapper, { collapseSize: collapseSize },
+                    React__default["default"].createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
+                        React__default["default"].createElement(DnaLogo["default"], { size: navigation.headerLogoSize })),
+                    React__default["default"].createElement(globalNavStyles.DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
+                        React__default["default"].createElement(DesktopMenu["default"], null)),
+                    React__default["default"].createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
+                        languagesObject && languageSelector && (React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
+                        search && React__default["default"].createElement(PageSearch["default"], { searchLabel: searchText }),
+                        minicart && (React__default["default"].createElement(MinicartTooltip["default"], { minicartAmount: minicartAmount, minicartLabel: minicartText })),
+                        login && React__default["default"].createElement(LoginTooltip["default"], { loginLabel: loginText, isLogged: isLoggedIn }),
+                        React__default["default"].createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
+                            React__default["default"].createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
+                                React__default["default"].createElement(Icon["default"], { icon: isMobileMenuOpen ? hlX["default"] : hlMenu["default"], size: navigation.navIconSize })))),
+                    isMobile && React__default["default"].createElement(MobileMenu["default"], null))))));
+};
+
+exports["default"] = MainHeaderNavigation;

package/build/cjs/components/MainHeaderNavigation/context/MobileMenuContext.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+interface MobileMenuContextProps {
+    mobileMenuRef: RefObject<HTMLElement> | null;
+}
+declare const MobileMenuContext: import("react").Context<MobileMenuContextProps>;
+export default MobileMenuContext;

package/build/cjs/components/MainHeaderNavigation/context/MobileMenuContext.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const MobileMenuContext = React.createContext({
+    mobileMenuRef: null,
+});
+
+exports["default"] = MobileMenuContext;

package/build/cjs/components/MainHeaderNavigation/context/NavContext.d.ts

@@ -0,0 +1,29 @@
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import type { GlobalNavItems, MenuLevelItem, MenuStates, MenuTooltipItems, MobileMenuLevel } from '../types/globalNavProps';
+export interface NavContextProps {
+    categoryCollectionText: string;
+    collapseSize: number;
+    currentUrl: string;
+    getBackLink: (menuElements: MobileMenuLevel, i: number) => MenuLevelItem;
+    handleNavMenuClick: (id: string | null, level: string) => void;
+    isLoggedIn: boolean;
+    isMobileMenu: boolean;
+    isMobileMenuOpen: boolean;
+    items: GlobalNavItems;
+    level1Items: MobileMenuLevel;
+    level2Items: MobileMenuLevel;
+    lang: string;
+    loginComponent?: ReactNode | boolean | undefined;
+    menuLevel: MenuStates;
+    minicartComponent?: ReactNode | boolean | undefined;
+    navZIndex: number;
+    nextJSLinkComponent: ReactNode | boolean;
+    resetMenuEvents: () => void;
+    searchComponent?: ReactNode | boolean | undefined;
+    setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;
+    showLoginTooltip: boolean;
+    showMinicart: boolean;
+    tooltipItems: MenuTooltipItems;
+}
+declare const NavContext: import("react").Context<NavContextProps>;
+export default NavContext;