@dnanpm/styleguide 3.0.0 → 3.2.0

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

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

package/build/cjs/components/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,2 +1,29 @@
-declare const NavContext: any;
+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: 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?: ReactNode | boolean | undefined;
+    menuLevel: MenuStates;
+    minicartComponent?: ReactNode | boolean | undefined;
+    navZIndex: number;
+    nextJSLinkComponent: ReactNode | boolean;
+    resetMenuEvents: () => void;
+    searchComponent?: ReactNode | boolean | undefined;
+    setTooltipItems: Dispatch<SetStateAction<MenuTooltipItems>>;
+    showLoginTooltip: boolean;
+    showMinicart: boolean;
+    tooltipItems: MenuTooltipItems;
+}
+declare const NavContext: import("react").Context<NavContextProps>;
 export default NavContext;

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

@@ -4,27 +4,43 @@ 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);
-
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-// const NavContext = React.createContext<MainNavigationProps>({
-const NavContext = React__default["default"].createContext({
-    lang: 'fi',
-    navZIndex: null,
-    menuLevel: {},
-    handleNavMenuClick: null,
-    getBackLink: {},
-    isMobileMenu: null,
-    items: {},
-    level1Items: {},
-    level2Items: {},
-    resetMenuEvents: null,
-    loginComponent: null,
-    nextJSLinkComponent: null,
-    collapseSize: null,
+const NavContext = React.createContext({
+    collapseSize: 767,
+    currentUrl: '',
+    getBackLink: () => ({ id: '', pages: [], titles: {}, urls: {} }),
+    handleNavMenuClick: () => { },
+    handleToggleClick: () => { },
     isLoggedIn: false,
+    isMobileMenu: false,
+    isMobileMenuOpen: false,
+    items: {},
+    lang: 'fi',
+    level1Items: { level1: { id: '', pages: [], titles: {}, urls: {} } },
+    level2Items: { level2: { id: '', pages: [], titles: {}, urls: {} } },
+    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,
+    setTooltipItems: () => { },
+    showLoginTooltip: false,
+    showMinicart: true,
+    tooltipItems: {
+        minicart: false,
+        login: false,
+        search: false,
+    },
 });
 
 exports["default"] = NavContext;

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
      *
@@ -64,5 +65,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/cjs/components/Modal/Modal.js

@@ -41,7 +41,10 @@ const StyledOverlay = styled["default"].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["default"].color.background.plum.default}${theme["default"].color.transparency.T40};
     animation: fadeIn 0.2s ease-in-out;

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

@@ -1,5 +1,6 @@
+import type { MouseEvent, ReactNode } from 'react';
 import React from 'react';
-declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
+type NotificationType = 'info' | 'success' | 'warning' | 'error';
 interface Props {
     /**
      * Allows to change styling of component, depending on the passed type
@@ -13,9 +14,9 @@ interface Props {
      */
     type?: NotificationType;
     /**
-     * Content of the ribbon
+     * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to show and hide close button
      *
@@ -25,9 +26,9 @@ interface Props {
     /**
      * On close button click callback
      */
-    onClickCloseButton?: (e: React.MouseEvent<HTMLElement>) => void;
+    onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
     /**
-     * Allows to dismiss the ribbon programmatically
+     * Allows to dismiss the notification programmatically
      *
      * @default false
      */
@@ -41,6 +42,6 @@ interface Props {
      */
     'data-testid'?: string;
 }
-declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
+declare const Notification: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Notification;

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`
      *
@@ -36,6 +37,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Notification Badge */
-declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const NotificationBadge: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default NotificationBadge;

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

@@ -1,6 +1,7 @@
+import type { ChangeEvent, ReactNode } from 'react';
 import React from 'react';
-declare type PillType = 'none' | 'checkbox' | 'radio';
-declare type Position = 'auto' | 'left' | 'right' | 'middle';
+type PillType = 'none' | 'checkbox' | 'radio';
+type Position = 'auto' | 'left' | 'right' | 'middle';
 interface Props {
     /**
      * Unique ID for the input element
@@ -29,16 +30,16 @@ 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
      *
-     * @param {Position} auto Pill component is grouped with other pill components, add margings in between
+     * @param {Position} auto Pill component is grouped with other pill components, add margins in between
      * @param {Position} left Pill component is on the left side of content, add right margin
      * @param {Position} right Pill component is on the right side of content, add left margin
      * @param {Position} middle Pill component is in the middle of content, add left and right margins
      *
-     * @default false
+     * @default undefined
      */
     position?: Position;
     /**
@@ -62,7 +63,7 @@ interface Props {
     /**
      * Content of the component
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * Allows to pass testid string for testing purposes
      */
@@ -72,6 +73,6 @@ interface Props {
      */
     className?: string;
 }
-declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Pill;

package/build/cjs/components/Pill/Pill.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled, as, }) => {
+const getBackgroundColor = ({ isChecked, isDisabled }) => {
     const alphaValue = isDisabled ? theme["default"].color.transparency.T30 : theme["default"].color.transparency.T100;
     const colorValue = isChecked
         ? theme["default"].color.background.plum.default
@@ -22,7 +22,7 @@ const getBackgroundColor = ({ isChecked, isDisabled, as, }) => {
     // Only Pill component specific colors to be used on user interaction styles
     const hoverValue = isChecked ? '#441632' : '#FFB557';
     const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled && as !== 'div' ? `&:hover { background-color: ${hoverValue}}` : '';
+    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
     return backgroundColor + hoverBackgroundColor;
 };
 const Label = styled__default["default"].label `
@@ -37,9 +37,9 @@ const Label = styled__default["default"].label `
     text-align: center;
 
     ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
-    ${({ isChecked, isDisabled, as }) => getBackgroundColor({ isChecked, isDisabled, as })}
+    ${({ isChecked, isDisabled }) => getBackgroundColor({ isChecked, isDisabled })}
 
-    &:focus-within {
+    &:focus-within, *:focus > & {
         box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
         border: 2px solid ${theme["default"].color.focus.light};
     }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface Props {
     /**
      * Allows to pass custom color
@@ -16,6 +16,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Pixel Loader */
-declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default PixelLoader;

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

@@ -1,5 +1,6 @@
+import type { MouseEvent } from 'react';
 import React from 'react';
-declare type ProgressIndicatorStatus = 'error';
+type ProgressIndicatorStatus = 'error';
 interface Props {
     /**
      * Array of strings to be used as labels or number of steps.
@@ -11,10 +12,10 @@ interface Props {
      */
     activeStep?: number;
     /**
-     * On component title and button mouse click callback
+     * On Progress Indicator Item label or number click callback
      * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
      */
-    onStepClick?: (stepIndex: number, e: React.MouseEvent<HTMLElement>) => void;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */
@@ -35,6 +36,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Progress Indicator */
-declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ProgressIndicator;

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

@@ -1,3 +1,4 @@
+import type { ChangeEvent } from 'react';
 import React from 'react';
 interface Props {
     /**
@@ -21,7 +22,7 @@ interface Props {
     /**
      * On radio button change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * Allows to set the radio button as checked
      *
@@ -44,6 +45,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Radio Button */
-declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default RadioButton;

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

@@ -1,18 +1,18 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
 interface ReadMoreProps {
     /** The label for show more link */
     showMoreText?: string;
     /** The label for show less link */
     showLessText?: string;
     /** Text content for component */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Allows to pass a custom className */
     className?: string;
     /** Allows to pass custom onClick */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     /** Init in expanded state and immediately close on client for better SEO */
     seoInitExpanded?: boolean;
 }
 /** @visibleName Read More */
-declare const ReadMore: React.FunctionComponent<ReadMoreProps>;
+declare const ReadMore: FunctionComponent<ReadMoreProps>;
 export default ReadMore;

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

@@ -1,5 +1,6 @@
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import React from 'react';
-export interface Props {
+interface Props {
     /**
      * Unique ID for the search input element
      */
@@ -19,27 +20,27 @@ export interface Props {
     /**
      * On search input change callback
      */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input blur callback
      */
-    onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
     /**
      * On search input focus callback
      */
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
     /**
      * On search input key press callback
      */
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
      * On search input key down callback
      */
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * On icon click callback
+     * On button click callback
      */
-    onIconClick?: (e: React.MouseEvent<Element, MouseEvent>) => void;
+    onButtonClick?: (e: MouseEvent<HTMLElement>) => void;
     /**
      * Allow to set search input element focus on page load
      */
@@ -53,6 +54,6 @@ export interface Props {
      */
     'data-testid'?: string;
 }
-declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Search;

package/build/cjs/components/Search/Search.js

@@ -19,10 +19,6 @@ const Container = styled["default"].div `
     display: flex;
     align-items: center;
     border-bottom: 2px solid ${theme["default"].color.default.pink};
-
-    span.dnasg-icon {
-        cursor: pointer;
-    }
 `;
 const Input = styled["default"].input `
     display: inline-block;
@@ -67,18 +63,18 @@ const Button = styled["default"](ButtonIcon["default"]) `
 const Search = (_a) => {
     var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const inputRef = React__default["default"].useRef(null);
-    const handleIconClick = (e) => {
+    const inputRef = React.useRef(null);
+    const handleButtonClick = (e) => {
         if (inputRef && inputRef.current) {
             inputRef.current.focus();
         }
-        if (props.onIconClick) {
-            props.onIconClick(e);
+        if (props.onButtonClick) {
+            props.onButtonClick(e);
         }
     };
     return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
         React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
-        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? hlX["default"] : hlMagnifyingGlass["default"], name: `${props.name}-button`, onClick: handleIconClick })));
+        React__default["default"].createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? hlX["default"] : hlMagnifyingGlass["default"], name: `${props.name}-button`, onClick: handleButtonClick })));
 };
 
 exports["default"] = Search;

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

@@ -1,8 +1,25 @@
-/// <reference types="react" />
+import type { ComponentType, ReactNode } from 'react';
+import React from 'react';
+import type { LangProps } from '../../types/language';
+interface MenuItem {
+    id: string;
+    icon?: string;
+    target?: string;
+    titles: LangProps;
+    urls: LangProps;
+}
 interface SNDataProps {
     name?: string;
     categoryId?: string;
-    pages?: object[] | null;
+    pages?: MenuItem[] | null;
+}
+interface NextJSSecondaryNavLinkProps {
+    linkUrl: string;
+    linkTitle: string;
+    iconName: string;
+    showNotification: boolean;
+    collapseSize: number;
+    children?: ReactNode;
 }
 interface Props {
     /**
@@ -21,7 +38,7 @@ interface Props {
     /**
      * pass nextJS component for enabling nextJS routing
      */
-    nextJSSecondaryNavLink?: any;
+    nextJSSecondaryNavLink?: ComponentType<NextJSSecondaryNavLinkProps>;
     /**
      * width in pixels where navigation collapses to a dropdown
      *
@@ -64,6 +81,6 @@ interface Props {
     whiteBg?: boolean;
 }
 /** @visibleName Secondary Navigation */
-declare const SecondaryNavigation: ({ currentUrl, data, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "data-testid": dataTestId, "max-width": componentMaxWidth, className, matchFullUrl, mobileOnly, highlightIds, whiteBg, }: Props) => JSX.Element;
+declare const SecondaryNavigation: ({ currentUrl, data, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "data-testid": dataTestId, "max-width": componentMaxWidth, className, matchFullUrl, mobileOnly, highlightIds, whiteBg, }: Props) => React.JSX.Element;
 /** @component */
 export default SecondaryNavigation;

package/build/cjs/components/SecondaryNavigation/SecondaryNavigation.js

@@ -140,10 +140,9 @@ const IconWrapper = styled["default"].span `
         background-color: ${theme["default"].color.default.pink};
     }
 `;
-const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
 /** @visibleName Secondary Navigation */
-const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink = false, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
-    var _a;
+const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'data-testid': dataTestId, 'max-width': componentMaxWidth, className, matchFullUrl = true, mobileOnly = false, highlightIds = [], whiteBg = false, }) => {
+    var _a, _b, _c, _d;
     const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
     const toggleNav = () => {
         setIsSecondaryNavOpen(!isSecondaryNavOpen);
@@ -159,39 +158,34 @@ const SecondaryNavigation = ({ currentUrl = '', data, lang = 'fi', nextJSSeconda
             setIsSecondaryNavOpen(false);
         }
     });
-    const selectedElement = data.pages
-        ? data.pages.find((listElement) => currentUrl === listElement.urls[lang])
-        : undefined;
-    const shouldHighlightSelectedElement = selectedElement && highlightIds.some((el) => el === selectedElement.id);
+    const selectedElement = (_a = data.pages) === null || _a === void 0 ? void 0 : _a.find(listElement => currentUrl === listElement.urls[lang]);
+    const shouldHighlightSelectedElement = (_b = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _b !== void 0 ? _b : false;
+    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
     return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: mobileOnly, whiteBg: whiteBg },
         selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
             React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                ((_a = selectedElement.icon) === null || _a === void 0 ? void 0 : _a.length) > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
+                (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.icon) && (React__default["default"].createElement(IconWrapper, { showNotification: shouldHighlightSelectedElement, collapseSize: collapseSize },
                     React__default["default"].createElement(Icon["default"], { name: selectedElement.icon }))),
                 React__default["default"].createElement("span", null, selectedElement.titles[lang])),
             React__default["default"].createElement(MobileSelectorArrow, { isOpen: isSecondaryNavOpen },
                 React__default["default"].createElement(Icon["default"], { icon: hlChevronDown["default"] })))),
-        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${data.categoryId}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, data.pages
-            ? data.pages.map((listElement, index) => {
-                const linkUrl = listElement.urls[lang];
-                const linkTitle = listElement.titles[lang];
-                const iconName = listElement.icon || '';
-                const isActive = matchFullUrl
-                    ? currentUrl === linkUrl
-                    : currentUrl.indexOf(linkUrl) > -1;
-                const showNotification = highlightIds.some((el) => el === listElement.id);
-                const isNextJsLink = NextJSSecondaryNavLink && !isMenuItemLinkAbsolute(linkUrl);
-                return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize },
-                    isNextJsLink && (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                        React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))),
-                    !isNextJsLink && (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
-                        iconName.length > 0 && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { name: iconName }))),
-                        React__default["default"].createElement("span", null, linkTitle),
-                        isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
-                            React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
-            })
-            : null)));
+        React__default["default"].createElement(SecondaryNavigationList, { id: data.name || `secondary-navigation-category-${(_c = data.categoryId) !== null && _c !== void 0 ? _c : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, componentMaxWidth: componentMaxWidth, "data-testid": "secondary-nav-menu-ul" }, (_d = data.pages) === null || _d === void 0 ? void 0 : _d.map((listElement, index) => {
+            const linkUrl = listElement.urls[lang];
+            const linkTitle = listElement.titles[lang];
+            const iconName = listElement.icon || '';
+            const isActive = matchFullUrl
+                ? currentUrl === linkUrl
+                : currentUrl.indexOf(linkUrl) > -1;
+            const showNotification = highlightIds.some(el => el === listElement.id);
+            const isMenuItemLinkAbsolute = checkIsMenuItemLinkAbsolute(linkUrl);
+            return (React__default["default"].createElement(SecondaryNavigationListElement, { key: listElement.id, isActive: isActive, onClick: closeNav, collapseSize: collapseSize }, NextJSSecondaryNavLink && !isMenuItemLinkAbsolute ? (React__default["default"].createElement(NextJSSecondaryNavLink, { linkUrl: linkUrl, linkTitle: linkTitle, iconName: iconName, showNotification: showNotification, collapseSize: collapseSize, "data-testid": `secondary-nav-item-link-${index + 1}` }, isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] }))))) : (React__default["default"].createElement("a", { href: linkUrl, "data-testid": `secondary-nav-item-link-${index + 1}` },
+                iconName && (React__default["default"].createElement(IconWrapper, { showNotification: showNotification, collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { name: iconName }))),
+                React__default["default"].createElement("span", null, linkTitle),
+                isActive && (React__default["default"].createElement(MobileSelectorCheck, { collapseSize: collapseSize },
+                    React__default["default"].createElement(Icon["default"], { icon: hlCheck["default"] })))))));
+        }))));
 };
 
 exports["default"] = SecondaryNavigation;