@dnanpm/styleguide 3.1.0 → 3.2.0

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

@@ -22,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-// @ts-nocheck
 const MobileMenuWrapper = styled["default"].div `
     width: ${100 * navigation.menuLevelsAmount}%;
 `;
@@ -101,7 +100,7 @@ const MobileMenu = styled["default"].div `
     }
 `;
 const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang: language, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext["default"]);
+    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = React.useContext(NavContext["default"]);
     const levels = {
         level1Items,
         level2Items,
@@ -115,19 +114,21 @@ const MenuItemBackLink = ({ currentLevel }) => {
     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: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+        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[language])));
+            backLink.titles[lang])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
-    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang: language, currentUrl, } = React.useContext(NavContext["default"]);
+    var _a;
+    const { handleNavMenuClick, menuLevel: { scrollPosition }, lang, currentUrl, } = React.useContext(NavContext["default"]);
     const { mobileMenuRef } = React.useContext(MobileMenuContext["default"]);
-    const hasChildren = menuItem.pages && menuItem.pages.length;
+    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 = () => scrollPosition !== indexLevel;
-    const menuUrl = menuItem.urls[language] || '';
+    const menuUrl = menuItem.urls[lang] || '';
     const mobileMenuClick = (element) => (e) => {
-        if (typeof mobileMenuRef.current.scroll === 'function') {
+        var _a;
+        if (typeof ((_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === 'function') {
             mobileMenuRef.current.scroll({
                 top: 0,
                 left: 0,
@@ -140,7 +141,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
     if (hasChildren && currentLevel < 3) {
         return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl) },
             React__default["default"].createElement(globalNavStyles.MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
-                menuItem.titles[language],
+                menuItem.titles[lang],
                 React__default["default"].createElement(Icon["default"], { icon: hlChevronRight["default"], size: "1rem" }))));
     }
     return (React__default["default"].createElement(globalNavStyles.MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: LinkModifier.isSelected(currentUrl, menuUrl, true) },
@@ -156,9 +157,9 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
         navElements.map((subMenuItem, index) => (React__default["default"].createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
 };
 const NavigationMenuMobile = () => {
-    const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext["default"]);
-    const { mainNavigation } = data;
-    if (!mainNavigation.pages.length) {
+    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;
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -173,19 +174,22 @@ const NavigationMenuMobile = () => {
 };
 const RenderMobileMenu = () => {
     const { menuLevel, isMobileMenuOpen } = React.useContext(NavContext["default"]);
-    const mobileMenuRef = React__default["default"].useRef(null);
+    const mobileMenuRef = React.useRef(null);
     const slidingMenuAnimation = reactSpring.useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / navigation.menuLevelsAmount) * -100}%)`,
     });
-    const mobileMenuContext = {
+    const mobileMenuContext = React.useMemo(() => ({
         mobileMenuRef,
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, isMobileMenuOpen && (React__default["default"].createElement(MobileMenuContainer, { ref: 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(MobileMenu, null,
                 React__default["default"].createElement(MobileMenuWrapper, null,
                     React__default["default"].createElement(reactSpring.animated.div, { style: slidingMenuAnimation },
-                        React__default["default"].createElement(NavigationMenuMobile, null)))))))));
+                        React__default["default"].createElement(NavigationMenuMobile, null)))))));
 };
 
 exports["default"] = RenderMobileMenu;

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

@@ -8,7 +8,6 @@ require('tslib');
 var hlMagnifyingGlass = require('../../Icons/hlMagnifyingGlass.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
-var MainNavTooltipMenuExportedStyles = require('./MainNavTooltipMenuExportedStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -16,11 +15,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const PageSearch = ({ searchLabel }) => {
     const globalStateString = 'search';
-    const { navZIndex, searchComponent: SearchComponent, collapseSize, tooltipItems, } = React__default["default"].useContext(NavContext["default"]);
+    const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext["default"]);
     return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
-        React__default["default"].createElement(MainNavTooltipMenuExportedStyles.TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] },
-            React__default["default"].createElement(Icon["default"], { icon: hlMagnifyingGlass["default"], size: "2rem" }),
-            React__default["default"].createElement("span", null, searchLabel))));
+        React__default["default"].createElement(Icon["default"], { icon: hlMagnifyingGlass["default"], size: "2rem" }),
+        React__default["default"].createElement("span", null, searchLabel)));
 };
 
 exports["default"] = PageSearch;

package/build/cjs/components/MainNavigation/ChildComponents/Ribbon.d.ts

@@ -5,9 +5,9 @@ export interface RibbonDataProps {
     ribbonIcon: string;
     ribbonTexts: LangProps;
 }
-interface Ribbon {
+interface Props {
     ribbonData: RibbonDataProps[];
     lang?: string;
 }
-declare const Ribbon: ({ ribbonData, lang }: Ribbon) => React.JSX.Element;
+declare const Ribbon: ({ ribbonData, lang }: Props) => React.JSX.Element;
 export default Ribbon;

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

@@ -1,29 +1,29 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { RibbonDataProps } from './ChildComponents/Ribbon';
 import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainNavigationProps {
     /** Allows to pass a custom className */
     className?: string;
-    children?: React.ReactNode;
     items?: GlobalNavItems;
     language?: string;
     zIndex?: number;
     search?: boolean;
     searchText?: string;
-    searchComponent?: React.ReactNode | boolean;
+    searchComponent?: ReactNode | boolean;
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
-    minicartComponent?: React.ReactNode | boolean;
+    minicartComponent?: ReactNode | boolean;
     showMinicart?: boolean;
     showLoginTooltip?: boolean;
     login?: boolean;
     loginText?: string;
-    loginComponent?: React.ReactNode | boolean;
+    loginComponent?: ReactNode | boolean;
     isLoggedIn?: boolean;
     collapseSize?: number;
     languageSelector?: boolean;
-    nextJSLinkComponent: React.ReactNode | boolean;
+    nextJSLinkComponent: ReactNode | boolean;
     ribbon?: boolean;
     ribbonData?: RibbonDataProps[];
     currentUrl?: string;

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var ramda = require('ramda');
 var React = require('react');
-var modifyBodyClass = require('../../hooks/modifyBodyClass.js');
 var useScrollPosition = require('../../hooks/useScrollPosition.js');
 var useWindowSize = require('../../hooks/useWindowSize.js');
 var styled = require('../../themes/styled.js');
@@ -28,7 +27,7 @@ const GlobalStyle = styled.createGlobalStyle `
 `;
 // detect common touch screen devices
 const isIosDevice = () => {
-    const validate = new RegExp(/iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i);
+    const validate = /iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i;
     if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
         return (validate.test(navigator.userAgent) &&
             !window.MSStream);
@@ -51,7 +50,7 @@ const fadeIn = styled.keyframes `
     }
 `;
 const preventBodyScroll = () => {
-    const scrollY = window.scrollY;
+    const { scrollY } = window;
     document.body.style.position = 'fixed';
     document.body.style.top = `-${scrollY}px`;
 };
@@ -62,7 +61,7 @@ const resumeBodyScroll = () => {
     // if the call to close overlay is done multiple times, scroll only the first time
     if (scrollY) {
         setTimeout(() => {
-            window.scrollTo(0, parseInt(scrollY, undefined) * -1);
+            window.scrollTo(0, parseInt(scrollY, 10) * -1);
         });
     }
 };
@@ -120,7 +119,6 @@ const initiateScrollToHeader = (componentRef) => {
 };
 /** @visibleName Main Navigation */
 const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
-    var _a, _b;
     const { isMobile } = useWindowSize["default"](collapseSize);
     const props = {
         items,
@@ -147,14 +145,14 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
     };
     const navigationEl = React.useRef(null);
     const key = ramda.prop('id');
-    const level1 = (_b = (_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) !== null && _b !== void 0 ? _b : [];
     // 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__default["default"].useState({
+    const [menuLevel, setMenuLevel] = React.useState({
         level1: null,
         animate1: true,
         level2: null,
@@ -165,26 +163,11 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
         hideOnScroll: false,
     });
     const [lang] = React.useState(language);
-    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;
-        }
+    // As scroll position cannot be always retained, close mobile menu when orientation changes
+    const initRotation = () => {
+        setIsMobileMenuOpen(false);
     };
-    React__default["default"].useEffect(() => {
+    React.useEffect(() => {
         if (iosDevice && isMobileMenuOpen) {
             window.addEventListener('orientationchange', initRotation, false);
             preventBodyScroll();
@@ -198,83 +181,126 @@ const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSe
             resumeBodyScroll();
         };
     }, [isMobileMenuOpen]);
-    // As scroll position cannot be always retained, close mobile menu when orientation changes
-    const initRotation = () => {
-        setIsMobileMenuOpen(false);
-    };
-    const handleToggleClick = () => {
-        resetMenuEvents();
-        initiateScrollToHeader(navigationEl);
-        setIsMobileMenuOpen(!isMobileMenuOpen);
-    };
-    const initialTooltipItems = {
+    const [tooltipItems, setTooltipItems] = React.useState(React.useMemo(() => ({
         minicart: false,
         login: false,
         search: false,
-    };
-    const [tooltipItems, setTooltipItems] = React.useState(initialTooltipItems);
+    }), []));
     const tooltipMenuActive = tooltipItems.minicart || tooltipItems.login || tooltipItems.search;
     const freezeOverflow = isMobileMenuOpen || (tooltipMenuActive && isMobile);
     const isPageOverlay = tooltipMenuActive || menuLevel.level1 || menuLevel.level2;
-    modifyBodyClass["default"](freezeOverflow ? 'overflow-hidden' : 'overflow-shown');
-    const resetMenuEvents = () => {
-        setMenuLevel({
-            level2: null,
-            animate2: true,
-            level1: null,
-            animate1: true,
-            level1Mobile: null,
-            level2Mobile: null,
-            scrollPosition: 0,
-            hideOnScroll: false,
-        });
-        if (isMobileMenuOpen) {
-            setIsMobileMenuOpen(false);
+    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 handleToggleClick = () => {
+            resetMenuEvents();
+            initiateScrollToHeader(navigationEl);
+            setIsMobileMenuOpen(!isMobileMenuOpen);
+        };
+        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;
         }
-        setTooltipItems(initialTooltipItems);
-    };
-    const getBackLink = (menuElements, i) => {
-        const idValue = menuLevel[`level${i}Mobile`];
-        return menuElements[idValue];
-    };
-    const navigationContext = {
+        return {
+            lang,
+            navZIndex: zIndex,
+            menuLevel,
+            handleNavMenuClick,
+            getBackLink,
+            isMobileMenu: isMobile,
+            items,
+            level1Items,
+            level2Items,
+            resetMenuEvents,
+            handleToggleClick,
+            isMobileMenuOpen,
+            nextJSLinkComponent,
+            loginComponent,
+            isLoggedIn,
+            collapseSize,
+            tooltipItems,
+            setTooltipItems,
+            minicartComponent,
+            showMinicart,
+            showLoginTooltip,
+            searchComponent,
+            currentUrl,
+        };
+    }, [
+        isMobile,
         lang,
-        navZIndex: zIndex,
+        zIndex,
         menuLevel,
-        handleNavMenuClick,
-        getBackLink,
-        isMobileMenu: isMobile,
         items,
         level1Items,
         level2Items,
-        resetMenuEvents,
-        handleToggleClick,
         isMobileMenuOpen,
         nextJSLinkComponent,
         loginComponent,
         isLoggedIn,
         collapseSize,
         tooltipItems,
-        setTooltipItems,
         minicartComponent,
         showMinicart,
         showLoginTooltip,
         searchComponent,
         currentUrl,
-    };
-    // Resets menu states when menu content alters between mobile and desktop
-    const menuChanged = previousValue !== isMobile;
-    if (menuChanged) {
-        resetMenuEvents();
-        previousValue = isMobile;
-    }
+    ]);
     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 }));
         }
-    }, [menuLevel], undefined, false, 200);
+    }, undefined, false, 200);
     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, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },

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

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

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

@@ -4,11 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const MobileMenuContext = React__default["default"].createContext({
+const MobileMenuContext = React.createContext({
     mobileMenuRef: null,
 });
 

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

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

package/build/cjs/components/MainNavigation/context/NavContext.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const NavContext = React__default["default"].createContext({
+const NavContext = React.createContext({
     collapseSize: 767,
     currentUrl: '',
     getBackLink: () => ({ id: '', pages: [], titles: {}, urls: {} }),
@@ -19,6 +15,8 @@ const NavContext = React__default["default"].createContext({
     isMobileMenuOpen: false,
     items: {},
     lang: 'fi',
+    level1Items: { level1: { id: '', pages: [], titles: {}, urls: {} } },
+    level2Items: { level2: { id: '', pages: [], titles: {}, urls: {} } },
     loginComponent: false,
     menuLevel: {
         level1: null,
@@ -35,6 +33,9 @@ const NavContext = React__default["default"].createContext({
     nextJSLinkComponent: false,
     resetMenuEvents: () => { },
     searchComponent: false,
+    setTooltipItems: () => { },
+    showLoginTooltip: false,
+    showMinicart: true,
     tooltipItems: {
         minicart: false,
         login: false,

package/build/cjs/components/MainNavigation/globalNavStyles.d.ts

@@ -152,7 +152,7 @@ export declare const MenuItem: import("styled-components").StyledComponent<"li",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -317,7 +317,7 @@ export declare const MenuLink: import("styled-components").StyledComponent<"a",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -482,7 +482,7 @@ export declare const MenuLinkWithChildren: import("styled-components").StyledCom
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;
@@ -648,7 +648,7 @@ export declare const MenuList: import("styled-components").StyledComponent<"ul",
         h1: string;
         h2: string;
     };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
     radius: {
         default: string;
         s: string;

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 import type { Props as ReactModalProps } from 'react-modal';
 interface Props {
@@ -16,7 +17,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to hide application from assistive screenreaders and other assistive technologies while the modal is open
      *

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

@@ -1,3 +1,4 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
 type NotificationType = 'info' | 'success' | 'warning' | 'error';
 interface Props {
@@ -15,7 +16,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to show and hide close button
      *
@@ -25,7 +26,7 @@ interface Props {
     /**
      * On close button click callback
      */
-    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to dismiss the notification programmatically
      *

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -7,7 +8,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to change CSS property `position`
      *

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

@@ -1,3 +1,4 @@
+import type { ChangeEvent, ReactNode } from 'react';
 import React from 'react';
 type PillType = 'none' | 'checkbox' | 'radio';
 type Position = 'auto' | 'left' | 'right' | 'middle';
@@ -29,7 +30,7 @@ interface Props {
     /**
      * On checkbox/radiobutton change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set position of component relative to other content and adds appropriate margins
      *
@@ -62,7 +63,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass testid string for testing purposes
      */