@dnanpm/styleguide 3.0.0 → 3.1.0

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

@@ -147,7 +147,7 @@ const DesktopMenuItem = styled(MenuItem) `
 const SubMenuList = styled.div `
     position: absolute;
     left: -${getMultipliedSize(theme.base.baseHeight, 0.5)};
-    display: ${({ menuStates, navItemId }) => menuStates.level1 && menuStates.level1 === navItemId ? 'block' : 'none'};
+    display: ${({ menuStates, navItemId }) => (menuStates === null || menuStates === void 0 ? void 0 : menuStates.level1) === navItemId ? 'block' : 'none'};
     z-index: ${({ navZIndex }) => navZIndex + 1};
     margin-top: 1px;
     ${({ menuStates }) => menuStates.level1 && menuStates.animate2 && !menuStates.level2
@@ -164,23 +164,23 @@ const SubMenuList = styled.div `
     }
 `;
 const SubMenuLevel1 = ({ menuItem }) => {
-    const { lang: language, navZIndex, menuLevel, handleNavMenuClick, currentUrl, } = useContext(NavContext);
+    const { lang, navZIndex, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
     const level1HasElements = Boolean(menuItem.pages.length);
     const menuClick = (element) => (e) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level2');
     };
     if (!level1HasElements) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
     return (React__default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex },
         React__default.createElement(Box, { elevation: "high", padding: getMultipliedSize(theme.base.baseHeight, 1) },
             React__default.createElement("ul", null, menuItem.pages.map((element, index) => {
-                const menuUrl = element.urls[language];
+                const menuUrl = element.urls[lang];
                 if (element.pages.length) {
                     return (React__default.createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
                         React__default.createElement(MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-                            React__default.createElement("span", null, element.titles[language]),
+                            React__default.createElement("span", null, element.titles[lang]),
                             React__default.createElement(Icon, { icon: hlChevronRight, size: "1rem" })),
                         React__default.createElement(SubMenuLevel2, { menuItem: element })));
                 }
@@ -213,21 +213,21 @@ const SubMenuLevel2 = ({ menuItem }) => {
             })))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
-    const { lang: language, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
+    const { lang, menuLevel, handleNavMenuClick, currentUrl } = useContext(NavContext);
     const menuClickMain = (element) => (e) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    const menuUrl = menuItem.urls[language];
+    const menuUrl = menuItem.urls[lang];
     return (React__default.createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
         React__default.createElement(MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
-            React__default.createElement("span", null, menuItem.titles[language])),
+            React__default.createElement("span", null, menuItem.titles[lang])),
         React__default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
     var _a;
-    const { items: data, lang: language, resetMenuEvents, menuLevel, currentUrl, } = useContext(NavContext);
-    const mainNavigation = ((_a = data === null || data === void 0 ? void 0 : data.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) || [];
+    const { items, lang, resetMenuEvents, menuLevel, currentUrl } = 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) {
@@ -235,15 +235,16 @@ const DesktopMenu = () => {
         }
     });
     if (!mainNavigation.length) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
     return (React__default.createElement(DesktopMenuList, { role: "menubar", "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
-        const menuHasChildren = Boolean(navElement.pages && navElement.pages.length);
+        var _a;
+        const menuHasChildren = !!((_a = navElement.pages) === null || _a === void 0 ? void 0 : _a.length);
         if (menuHasChildren) {
             return (React__default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
         return (React__default.createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
-                isSelected(currentUrl, navElement.urls[language]) },
+                isSelected(currentUrl, navElement.urls[lang]) },
             React__default.createElement(LinkModifier, { menuItem: navElement, tabIndex: false })));
     })));
 };

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
+import { MainNavigationProps } from '../MainNavigation';
 export declare const IconContainer: import("styled-components").StyledComponent<"div", {
     base: {
         baseHeight: {
@@ -165,7 +166,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     isActive?: boolean | undefined;
     collapseSize: number;
 }, never>;
-declare const HeaderNavigationElements: ({ navElementProps }: {
-    navElementProps: any;
-}) => JSX.Element;
+declare const HeaderNavigationElements: ({ navElementProps, }: {
+    navElementProps: MainNavigationProps;
+}) => React.JSX.Element;
 export default HeaderNavigationElements;

package/build/es/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -15,6 +15,7 @@ import LanguageSelector from './LanguageSelector.js';
 import LoginTooltip from './LoginTooltip.js';
 import MinicartTooltip from './MinicartTooltip.js';
 import PageSearch from './PageSearch.js';
+import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 
 const DesktopMenuContainer = styled.div `
     height: 100%;
@@ -125,16 +126,15 @@ const RenderDesktopMenu = ({ collapseSize }) => (React__default.createElement(De
         React__default.createElement(BusinessMenu, null)),
     React__default.createElement(MenuWrapper, null,
         React__default.createElement(DesktopMenu, null))));
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-// { menuProps: MainNavigationProps }
 const MenuFunctionality = ({ menuProps }) => {
-    const { collapseSize, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount, login: isLogin, loginText: loginLabel, language: languageId, languageSelector: languageSelectorActive, items, } = menuProps;
-    const languagesObject = items && items.languageSelector && items.languageSelector.urls;
+    var _a;
+    const { collapseSize = breakpoints.md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
+    const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
     const { handleToggleClick, isMobileMenuOpen } = useContext(NavContext);
     return (React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
         React__default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
             languagesObject && languageSelectorActive && (React__default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
-                React__default.createElement(LanguageSelector, { currentLanguage: languageId, languagesObject: languagesObject, collapseSize: collapseSize }))),
+                React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject, collapseSize: collapseSize }))),
             isSearch && (React__default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
                 React__default.createElement(PageSearch, { searchLabel: searchLabel }))),
             isMinicart && (React__default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
@@ -145,15 +145,13 @@ const MenuFunctionality = ({ menuProps }) => {
                 React__default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
                     React__default.createElement(Icon, { icon: isMobileMenuOpen ? hlX : hlMenu, size: "2rem" }))))));
 };
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-// { navElementProps: MainNavigationProps }
-const HeaderNavigationElements = ({ navElementProps }) => {
+const HeaderNavigationElements = ({ navElementProps, }) => {
     var _a;
-    const { collapseSize, items, language } = navElementProps;
-    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 { collapseSize = breakpoints.md, items, language = 'fi' } = navElementProps;
+    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);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(HeaderIconWrapperNoMargin, null,
-            React__default.createElement("a", { href: currentBusinessSite.urls[language], title: "DNA", "data-testid": "dna-logo-link" },
+            React__default.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "data-testid": "dna-logo-link" },
                 React__default.createElement(LogoContainer, { collapseSize: collapseSize },
                     React__default.createElement(DnaLogo, { size: "100%" })))),
         React__default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),

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

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

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

@@ -23,9 +23,9 @@ const LanguageSelector = ({ currentLanguage, languagesObject, collapseSize, }) =
     const languageSelectorKeys = languageKeys.filter(key => key.toLowerCase() !== currentLanguage.toLowerCase());
     const LangComponent = () => (React__default.createElement(MenuContainer, null, languageSelectorKeys.map(key => (React__default.createElement(MenuItem, { key: `language-${key}`, href: languagesObject[key] }, key.toUpperCase())))));
     if (!languageSelectorKeys.length) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LangComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', contentComponent: LangComponent, contentWidth: "5rem", globalStateString: "lang", closeWhenTagClicked: ['a'] },
         React__default.createElement(TooltipWrapper, { collapseSize: collapseSize },
             React__default.createElement(Icon, { icon: hlGlobe, size: "2rem" }),
             React__default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase()))));

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

@@ -1,14 +1,9 @@
-/// <reference types="react" />
-import type { LangProps } from '../../../types/language';
-export interface MenuItem {
-    urls: LangProps;
-    titles: LangProps;
-    id: string;
-}
-export interface LinkModifierProps {
-    menuItem: MenuItem;
+import React from 'react';
+import { MenuLevelItem } from '../types/globalNavProps';
+interface LinkModifierProps {
+    menuItem: MenuLevelItem;
     tabIndex: boolean;
 }
-export declare const isSelected: (currentUrl: string | false, linkUrl: string, exactMatch?: boolean) => boolean;
-declare const LinkModifier: ({ menuItem, tabIndex }: LinkModifierProps) => JSX.Element;
+export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
+declare const LinkModifier: ({ menuItem, tabIndex }: LinkModifierProps) => React.JSX.Element;
 export default LinkModifier;

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

@@ -16,7 +16,9 @@ const LinkModifier = ({ menuItem, tabIndex }) => {
     const { lang, nextJSLinkComponent: NextJSLinkComponent, resetMenuEvents, } = useContext(NavContext);
     const menuItemLink = menuItem.urls[lang] || '';
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
-        return (React__default.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
+        return (
+        // @ts-ignore
+        React__default.createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
             React__default.createElement(MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
                 React__default.createElement("span", null, menuItem.titles[lang]))));
     }

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

@@ -1,4 +1,6 @@
-/// <reference types="react" />
-import type { LoginTooltipProp } from '../types/globalNavProps';
-declare const LoginTooltip: ({ loginLabel }: LoginTooltipProp) => JSX.Element;
+import React from 'react';
+interface LoginTooltipProp {
+    loginLabel?: string;
+}
+declare const LoginTooltip: ({ loginLabel }: LoginTooltipProp) => React.JSX.Element;
 export default LoginTooltip;

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

@@ -9,7 +9,7 @@ import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
 const LoginTooltip = ({ loginLabel }) => {
     const globalStateString = 'login';
     const { navZIndex, isMobileMenu, loginComponent: LoginComponent, collapseSize, isLoggedIn, tooltipItems, } = React__default.useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: isMobileMenu ? '3rem' : '1rem', contentComponent: LoginComponent, globalStateString: globalStateString, closeWhenTagClicked: ['a', 'button'] },
         React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] || isLoggedIn },
             React__default.createElement(Icon, { icon: hlPerson, size: "2rem" }),
             React__default.createElement("span", { "data-testid": "header-login-label" }, loginLabel))));

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

@@ -3,13 +3,11 @@ export interface MainNavTooltipMenuProps {
     /** Tooltip menu content */
     children?: React.ReactNode;
     /** Overlap other elements */
-    zIndex?: string;
+    zIndex?: number;
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
-    contentComponent?: React.FC<{
-        mobileView: boolean;
-    }>;
+    contentComponent?: React.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. */
@@ -21,5 +19,5 @@ export interface MainNavTooltipMenuProps {
     /** Adjust menu to be full width after this number. default xs (480). */
     fullWidthBreakpoint?: number;
 }
-declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent: ContentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => JSX.Element;
+declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent: ContentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
 export default MainNavTooltipMenu;

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

@@ -8,6 +8,7 @@ import { getMultipliedSize, media } from '../../../utils/styledUtils.js';
 import Box from '../../Box/Box.js';
 import NavContext from '../context/NavContext.js';
 
+// @ts-nocheck
 const Container = styled.div `
     width: 100%;
 `;
@@ -60,9 +61,10 @@ const Caret = styled.div `
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
 `;
-const MainNavTooltipMenu = ({ children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.breakpoints.xs, }) => {
+const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.breakpoints.xs, }) => {
     const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React__default.useContext(NavContext);
     const ref = useRef(null);
+    const globalStateKey = globalStateString;
     useDocHeight();
     React__default.useEffect(() => {
         setTooltipItems({
@@ -74,19 +76,19 @@ const MainNavTooltipMenu = ({ children, zIndex = '1', tooltipRight = '-1rem', co
         resetMenuEvents();
         setTimeout(() => {
             setTooltipItems({
-                [globalStateString]: !tooltipItems[globalStateString],
+                [globalStateString]: !tooltipItems[globalStateKey],
             });
         });
     };
     useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateString]) {
+        if (tooltipItems[globalStateKey]) {
             setTooltipItems(Object.assign(Object.assign({}, tooltipItems), { [globalStateString]: false }));
         }
     });
     return (React__default.createElement(Container, { ref: ref },
         React__default.createElement("div", { onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateString] && (React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize })),
-        tooltipItems[globalStateString] && ContentComponent && (React__default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+        tooltipItems[globalStateKey] && React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (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 }))))));
 };

package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface MinicartTooltipProps {
     minicartAmount: number;
-    minicartLabel: string;
+    minicartLabel?: string;
 }
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => JSX.Element;
+declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
 export default MinicartTooltip;

package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.js

@@ -11,7 +11,7 @@ import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
 const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
     const globalStateString = 'minicart';
     const { navZIndex, minicartComponent: MinicartComponent, collapseSize, tooltipItems, } = React__default.useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
         React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] },
             React__default.createElement(Icon, { icon: hlCart, size: "2rem" }),
             React__default.createElement("span", null, minicartLabel),

package/build/es/components/MainNavigation/ChildComponents/MobileMenu.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const RenderMobileMenu: () => JSX.Element;
+import React from 'react';
+declare const RenderMobileMenu: () => React.JSX.Element;
 export default RenderMobileMenu;

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

@@ -14,6 +14,7 @@ import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren } from '../globalNav
 import BusinessMenu from './BusinessMenu.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
 
+// @ts-nocheck
 const MobileMenuWrapper = styled.div `
     width: ${100 * menuLevelsAmount}%;
 `;
@@ -140,7 +141,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const navElements = menuItem.pages;
     if (!navElements.length) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
     return (React__default.createElement(React__default.Fragment, null,
         currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
@@ -150,7 +151,7 @@ const NavigationMenuMobile = () => {
     const { items: data, menuLevel, level1Items, level2Items } = useContext(NavContext);
     const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
-        return React__default.createElement(React__default.Fragment, null);
+        return null;
     }
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },

package/build/es/components/MainNavigation/ChildComponents/PageSearch.d.ts

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

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

@@ -9,7 +9,7 @@ import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
 const PageSearch = ({ searchLabel }) => {
     const globalStateString = 'search';
     const { navZIndex, searchComponent: SearchComponent, collapseSize, tooltipItems, } = React__default.useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
         React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] },
             React__default.createElement(Icon, { icon: hlMagnifyingGlass, size: "2rem" }),
             React__default.createElement("span", null, searchLabel))));

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { LangProps } from '../../../types/language';
 export interface RibbonDataProps {
     ribbonLink: LangProps;
@@ -9,5 +9,5 @@ interface Ribbon {
     ribbonData: RibbonDataProps[];
     lang?: string;
 }
-declare const Ribbon: ({ ribbonData, lang }: Ribbon) => JSX.Element;
+declare const Ribbon: ({ ribbonData, lang }: Ribbon) => React.JSX.Element;
 export default Ribbon;

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

@@ -10,25 +10,26 @@ export interface MainNavigationProps {
     zIndex?: number;
     search?: boolean;
     searchText?: string;
-    searchComponent?: React.FC | boolean;
+    searchComponent?: React.ReactNode | boolean;
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
-    minicartComponent?: React.FC | boolean;
+    minicartComponent?: React.ReactNode | boolean;
     showMinicart?: boolean;
     showLoginTooltip?: boolean;
     login?: boolean;
     loginText?: string;
-    loginComponent?: React.FC | boolean;
+    loginComponent?: React.ReactNode | boolean;
     isLoggedIn?: boolean;
     collapseSize?: number;
     languageSelector?: boolean;
-    nextJSLinkComponent: React.FC | boolean;
+    nextJSLinkComponent: React.ReactNode | boolean;
     ribbon?: boolean;
     ribbonData?: RibbonDataProps[];
-    currentUrl?: string | false;
+    currentUrl?: string;
     notificationText?: string;
 }
-declare const _default: React.FunctionComponent<any>;
+/** @visibleName Main Navigation */
+declare const MainNavigation: ({ items, language, zIndex, languageSelector, search, searchText, searchComponent, minicart, minicartText, minicartComponent, minicartAmount, showMinicart, showLoginTooltip, login, loginText, loginComponent, isLoggedIn, collapseSize, nextJSLinkComponent, ribbon, ribbonData, className, currentUrl, notificationText, }: MainNavigationProps) => React.JSX.Element;
 /** @component */
-export default _default;
+export default MainNavigation;

package/build/es/components/MainNavigation/MainNavigation.js

@@ -22,7 +22,8 @@ const GlobalStyle = createGlobalStyle `
 const isIosDevice = () => {
     const validate = new RegExp(/iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i);
     if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
-        return validate.test(navigator.userAgent) && !window.MSStream;
+        return (validate.test(navigator.userAgent) &&
+            !window.MSStream);
     }
     return false;
 };
@@ -42,7 +43,7 @@ const fadeIn = keyframes `
     }
 `;
 const preventBodyScroll = () => {
-    const scrollY = window.pageYOffset;
+    const scrollY = window.scrollY;
     document.body.style.position = 'fixed';
     document.body.style.top = `-${scrollY}px`;
 };
@@ -84,7 +85,7 @@ const GlobalNavigationContainer = styled.nav `
     width: 100%;
     background-color: ${theme.color.background.white.default};
     color: ${theme.color.text.black};
-    top: ${({ menuLevel, tooltipMenuActive }) => menuLevel && menuLevel.hideOnScroll && !menuLevel.level1 && !tooltipMenuActive
+    top: ${({ menuLevel, tooltipMenuActive }) => (menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.hideOnScroll) && !(menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.level1) && !tooltipMenuActive
     ? `calc(-${desktopNavMaxHeight} - ${ribbonHeight})`
     : '0px'} !important;
     transition: top 0.2s ease-in-out;
@@ -105,17 +106,13 @@ const isStickySupported = typeof CSS !== 'undefined' &&
     typeof CSS.supports !== 'undefined' &&
     (CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky'));
 const initiateScrollToHeader = (componentRef) => {
-    if (componentRef &&
-        componentRef.current &&
-        isStickySupported &&
-        typeof window !== 'undefined') {
+    if ((componentRef === null || componentRef === void 0 ? void 0 : componentRef.current) && isStickySupported && typeof window !== 'undefined') {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
 /** @visibleName Main Navigation */
-const MainNavigation = ({ 
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-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 = false, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = false, notificationText = '', }) => {
+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(collapseSize);
     const props = {
         items,
@@ -142,10 +139,10 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = t
     };
     const navigationEl = useRef(null);
     const key = prop('id');
-    const level1 = items.mainNavigation && items.mainNavigation.pages ? items.mainNavigation.pages : [];
+    const level1 = (_b = (_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) !== null && _b !== void 0 ? _b : [];
     // Index & memoize menu levels
     const level1Items = useMemo(() => indexBy(key, level1), [level1, key]);
-    const level2 = useMemo(() => level1.map((item) => indexBy(key, item.pages)), [level1, key]);
+    const level2 = useMemo(() => level1.map(item => indexBy(key, item.pages)), [level1, key]);
     const level2Items = Object.assign({}, ...level2);
     // All states to for handling menus
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

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

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

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

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

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

@@ -1,22 +1,37 @@
 import React__default from 'react';
 
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-// const NavContext = React.createContext<MainNavigationProps>({
 const NavContext = React__default.createContext({
-    lang: 'fi',
-    navZIndex: null,
-    menuLevel: {},
-    handleNavMenuClick: null,
-    getBackLink: {},
-    isMobileMenu: null,
-    items: {},
-    level1Items: {},
-    level2Items: {},
-    resetMenuEvents: null,
-    loginComponent: null,
-    nextJSLinkComponent: null,
-    collapseSize: null,
+    collapseSize: 767,
+    currentUrl: '',
+    getBackLink: () => ({ id: '', pages: [], titles: {}, urls: {} }),
+    handleNavMenuClick: () => { },
+    handleToggleClick: () => { },
     isLoggedIn: false,
+    isMobileMenu: false,
+    isMobileMenuOpen: false,
+    items: {},
+    lang: 'fi',
+    loginComponent: false,
+    menuLevel: {
+        level1: null,
+        animate1: true,
+        level2: null,
+        animate2: true,
+        level1Mobile: null,
+        level2Mobile: null,
+        scrollPosition: 0,
+        hideOnScroll: false,
+    },
+    minicartComponent: undefined,
+    navZIndex: 1030,
+    nextJSLinkComponent: false,
+    resetMenuEvents: () => { },
+    searchComponent: false,
+    tooltipItems: {
+        minicart: false,
+        login: false,
+        search: false,
+    },
 });
 
 export { NavContext as default };

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

@@ -64,5 +64,5 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Modal: ({ appElement, maxWidth, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Modal: ({ appElement, maxWidth, closeButton, isClosable, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default Modal;

package/build/es/components/Modal/Modal.js

@@ -32,7 +32,10 @@ const StyledOverlay = styled.div `
     justify-content: center;
     align-items: center;
     position: fixed;
-    inset: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     z-index: 9999;
     background-color: ${theme.color.background.plum.default}${theme.color.transparency.T40};
     animation: fadeIn 0.2s ease-in-out;