@dnanpm/styleguide 3.0.0 → 3.1.0

package/build/cjs/components/Icons/index.js

@@ -25,6 +25,7 @@ var hl4gSim = require('./hl4gSim.js');
 var hl5gSim = require('./hl5gSim.js');
 var hlBattery = require('./hlBattery.js');
 var hlBell = require('./hlBell.js');
+var hlCableTVCard = require('./hlCableTVCard.js');
 var hlCalendar = require('./hlCalendar.js');
 var hlCall = require('./hlCall.js');
 var hlCameraBack = require('./hlCameraBack.js');
@@ -62,10 +63,13 @@ var hlHeadphones = require('./hlHeadphones.js');
 var hlHeadset = require('./hlHeadset.js');
 var hlHeart = require('./hlHeart.js');
 var hlHome = require('./hlHome.js');
+var hlHub = require('./hlHub.js');
 var hlImage = require('./hlImage.js');
 var hlInfo = require('./hlInfo.js');
 var hlInstallment = require('./hlInstallment.js');
 var hlIotSim = require('./hlIotSim.js');
+var hlLaptop = require('./hlLaptop.js');
+var hlLiveVideo = require('./hlLiveVideo.js');
 var hlLock = require('./hlLock.js');
 var hlMagnifyingGlass = require('./hlMagnifyingGlass.js');
 var hlMarker = require('./hlMarker.js');
@@ -84,6 +88,7 @@ var hlPaytime = require('./hlPaytime.js');
 var hlPen = require('./hlPen.js');
 var hlPerson = require('./hlPerson.js');
 var hlPhone = require('./hlPhone.js');
+var hlPlaylist = require('./hlPlaylist.js');
 var hlPlus = require('./hlPlus.js');
 var hlPrepaid = require('./hlPrepaid.js');
 var hlProcessor = require('./hlProcessor.js');
@@ -131,6 +136,7 @@ exports.hl4gSim = hl4gSim["default"];
 exports.hl5gSim = hl5gSim["default"];
 exports.hlBattery = hlBattery["default"];
 exports.hlBell = hlBell["default"];
+exports.hlCableTVCard = hlCableTVCard["default"];
 exports.hlCalendar = hlCalendar["default"];
 exports.hlCall = hlCall["default"];
 exports.hlCameraBack = hlCameraBack["default"];
@@ -169,10 +175,13 @@ exports.hlHeadphones = hlHeadphones["default"];
 exports.hlHeadset = hlHeadset["default"];
 exports.hlHeart = hlHeart["default"];
 exports.hlHome = hlHome["default"];
+exports.hlHub = hlHub["default"];
 exports.hlImage = hlImage["default"];
 exports.hlInfo = hlInfo["default"];
 exports.hlInstallment = hlInstallment["default"];
 exports.hlIotSim = hlIotSim["default"];
+exports.hlLaptop = hlLaptop["default"];
+exports.hlLiveVideo = hlLiveVideo["default"];
 exports.hlLock = hlLock["default"];
 exports.hlMagnifyingGlass = hlMagnifyingGlass["default"];
 exports.hlMarker = hlMarker["default"];
@@ -191,6 +200,7 @@ exports.hlPaytime = hlPaytime["default"];
 exports.hlPen = hlPen["default"];
 exports.hlPerson = hlPerson["default"];
 exports.hlPhone = hlPhone["default"];
+exports.hlPlaylist = hlPlaylist["default"];
 exports.hlPlus = hlPlus["default"];
 exports.hlPrepaid = hlPrepaid["default"];
 exports.hlProcessor = hlProcessor["default"];

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

@@ -1,6 +1,6 @@
 import React from 'react';
-declare type InputStatus = 'none' | 'success' | 'error' | 'comment';
-declare type InputType = 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+type InputStatus = 'none' | 'success' | 'error' | 'comment';
+type InputType = 'date' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 interface Props {
     /**
      * Unique ID for the input element
@@ -117,6 +117,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Input: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Input;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+type LabelType = 'campaign' | 'new' | 'presale' | 'other';
 interface Props {
     /**
      * Allows to change the background color of component
@@ -18,6 +18,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Label: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Label;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
+type LabelTextStatus = 'info' | 'success' | 'warning' | 'error';
 interface Props {
     /**
      * Unique ID for the component
@@ -39,5 +39,5 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Label Text */
-declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const LabelText: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 export default LabelText;

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

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

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

@@ -41,18 +41,18 @@ const BusinessMenuList = styled["default"].ul `
     height: 100%;
 `;
 const BusinessMenu = () => {
-    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = React.useContext(NavContext["default"]);
+    var _a;
+    const { items, lang, isMobileMenu, resetMenuEvents } = React.useContext(NavContext["default"]);
     const ref = React.useRef(null);
-    if (!data.businessId || (!data.businessSelector && data.businessSelector.items.length > 0)) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    }
-    const currentBusinessId = data.businessId;
-    const businessMenuItems = data.businessSelector.items;
-    if (!businessMenuItems.length) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    const currentBusinessId = items.businessId;
+    const businessMenuItems = (_a = items.businessSelector) === null || _a === void 0 ? void 0 : _a.items;
+    if (!(businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) ||
+        !currentBusinessId ||
+        (!items.businessSelector && (businessMenuItems === null || businessMenuItems === void 0 ? void 0 : businessMenuItems.length) > 0)) {
+        return null;
     }
     return (React__default["default"].createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => (React__default["default"].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
-        React__default["default"].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language]))))));
+        React__default["default"].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[lang], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[lang]))))));
 };
 
 exports["default"] = BusinessMenu;

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

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

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.js

@@ -19,6 +19,7 @@ var LanguageSelector = require('./LanguageSelector.js');
 var LoginTooltip = require('./LoginTooltip.js');
 var MinicartTooltip = require('./MinicartTooltip.js');
 var PageSearch = require('./PageSearch.js');
+var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -133,16 +134,15 @@ const RenderDesktopMenu = ({ collapseSize }) => (React__default["default"].creat
         React__default["default"].createElement(BusinessMenu["default"], null)),
     React__default["default"].createElement(MenuWrapper, null,
         React__default["default"].createElement(DesktopMenu["default"], 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["default"].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 } = React.useContext(NavContext["default"]);
     return (React__default["default"].createElement(HeaderIconContainer, { collapseSize: collapseSize },
         React__default["default"].createElement(HeaderIconWrapper, { collapseSize: collapseSize },
             languagesObject && languageSelectorActive && (React__default["default"].createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
-                React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: languageId, languagesObject: languagesObject, collapseSize: collapseSize }))),
+                React__default["default"].createElement(LanguageSelector["default"], { currentLanguage: language, languagesObject: languagesObject, collapseSize: collapseSize }))),
             isSearch && (React__default["default"].createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
                 React__default["default"].createElement(PageSearch["default"], { searchLabel: searchLabel }))),
             isMinicart && (React__default["default"].createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
@@ -153,15 +153,13 @@ const MenuFunctionality = ({ menuProps }) => {
                 React__default["default"].createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
                     React__default["default"].createElement(Icon["default"], { icon: isMobileMenuOpen ? hlX["default"] : hlMenu["default"], 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["default"].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["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(HeaderIconWrapperNoMargin, null,
-            React__default["default"].createElement("a", { href: currentBusinessSite.urls[language], title: "DNA", "data-testid": "dna-logo-link" },
+            React__default["default"].createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "data-testid": "dna-logo-link" },
                 React__default["default"].createElement(LogoContainer, { collapseSize: collapseSize },
                     React__default["default"].createElement(DnaLogo["default"], { size: "100%" })))),
         React__default["default"].createElement(RenderDesktopMenu, { collapseSize: collapseSize }),

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

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

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LinkModifier.js

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

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/LoginTooltip.js

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

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -16,6 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+// @ts-nocheck
 const Container = styled["default"].div `
     width: 100%;
 `;
@@ -68,9 +69,10 @@ const Caret = styled["default"].div `
         top: calc(${navigation.desktopNavMaxHeight} + ${navigation.ribbonHeight});
     }
 `;
-const MainNavTooltipMenu = ({ children, zIndex = '1', tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme["default"].breakpoints.xs, }) => {
+const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent: ContentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme["default"].breakpoints.xs, }) => {
     const { isMobileMenu, tooltipItems, setTooltipItems, collapseSize, resetMenuEvents, showMinicart, showLoginTooltip, } = React__default["default"].useContext(NavContext["default"]);
     const ref = React.useRef(null);
+    const globalStateKey = globalStateString;
     useDocHeight.useDocHeight();
     React__default["default"].useEffect(() => {
         setTooltipItems({
@@ -82,19 +84,19 @@ const MainNavTooltipMenu = ({ children, zIndex = '1', tooltipRight = '-1rem', co
         resetMenuEvents();
         setTimeout(() => {
             setTooltipItems({
-                [globalStateString]: !tooltipItems[globalStateString],
+                [globalStateString]: !tooltipItems[globalStateKey],
             });
         });
     };
     useCloseOutsideOrElementClicked["default"]({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateString]) {
+        if (tooltipItems[globalStateKey]) {
             setTooltipItems(Object.assign(Object.assign({}, tooltipItems), { [globalStateString]: false }));
         }
     });
     return (React__default["default"].createElement(Container, { ref: ref },
         React__default["default"].createElement("div", { onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateString] && (React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize })),
-        tooltipItems[globalStateString] && ContentComponent && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
+        tooltipItems[globalStateKey] && React__default["default"].createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default["default"].createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },
             React__default["default"].createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
                 React__default["default"].createElement(ContentComponent, { mobileView: isMobileMenu }))))));
 };

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MinicartTooltip.js

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

package/build/cjs/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/cjs/components/MainNavigation/ChildComponents/MobileMenu.js

@@ -22,6 +22,7 @@ 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}%;
 `;
@@ -148,7 +149,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const navElements = menuItem.pages;
     if (!navElements.length) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return null;
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         currentLevel > 1 && React__default["default"].createElement(MenuItemBackLink, { currentLevel: currentLevel }),
@@ -158,7 +159,7 @@ const NavigationMenuMobile = () => {
     const { items: data, menuLevel, level1Items, level2Items } = React.useContext(NavContext["default"]);
     const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
+        return null;
     }
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(globalNavStyles.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/cjs/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/cjs/components/MainNavigation/ChildComponents/PageSearch.js

@@ -17,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const PageSearch = ({ searchLabel }) => {
     const globalStateString = 'search';
     const { navZIndex, searchComponent: SearchComponent, collapseSize, tooltipItems, } = React__default["default"].useContext(NavContext["default"]);
-    return (React__default["default"].createElement(MainNavTooltipMenu["default"], { zIndex: (navZIndex + 1).toString(), tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
+    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))));

package/build/cjs/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/cjs/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;