@dnanpm/styleguide 3.7.1 → 3.8.1

package/build/cjs/components/ReadMore/ReadMore.js

@@ -2,67 +2,70 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var styled = require('../../themes/styled.js');
-var styledUtils = require('../../utils/styledUtils.js');
-var Icon = require('../Icon/Icon.js');
+var theme = require('../../themes/theme.js');
+var ButtonIcon = require('../Button/ButtonIcon.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const TruncateContainer = styled["default"].div `
-    position: relative;
-    padding-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 4)};
-    overflow: hidden;
-    transition: ${props => (props.expanded ? 1.5 : 0.3)}s;
-    max-height: ${props => (props.expanded ? 'auto' : '10rem')};
-`;
-const Toggle = styled["default"].div `
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    cursor: ${p => (p && p.expanded ? 'auto' : 'pointer')};
-    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
-    padding-top: ${p => p && p.expanded
-    ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)
-    : styledUtils.getMultipliedSize(p.theme.base.baseHeight, 10)};
+const Container = styled["default"].div `
+    display: flex;
+    flex-direction: column;
+`;
+const Content = styled["default"].div `
+    ${({ isExpanded, collapsedSize }) => !isExpanded &&
+    `
+        overflow: hidden;
+        max-height: ${collapsedSize};
+        mask-image: linear-gradient(${theme["default"].color.background.white.default}, transparent);
+    `}
+`;
+const ButtonWrapper = styled["default"].div `
+    margin: 0.625rem 0.313rem;
+    align-self: ${({ buttonPosition }) => (buttonPosition === 'right' ? 'flex-end' : 'flex-start')};
+`;
+const StyledButtonIcon = styled["default"](ButtonIcon["default"]) `
+    color: ${theme["default"].color.text.pink};
 
-    button {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        background-color: transparent;
-        border: 0;
-        color: ${p => p.theme.color.text.pink};
-        :focus {
-            outline: none;
-            text-decoration: underline;
-        }
+    &:hover {
+        color: ${theme["default"].color.hover.pink};
+        text-decoration: none;
+    }
+
+    &:active {
+        color: ${theme["default"].color.text.pink};
     }
-`;
-/** @visibleName Read More */
-const ReadMore = ({ children, showMoreText, showLessText, className, onClick = () => ({}), seoInitExpanded, }) => {
-    const [expanded, setExpanded] = React.useState(seoInitExpanded === true || false);
-    React.useEffect(() => {
-        if (seoInitExpanded) {
-            setExpanded(false);
-        }
-    }, [seoInitExpanded]);
-    const toggleTruncate = (event) => {
-        setExpanded(!expanded);
-        onClick(event);
-    };
-    const icon = expanded ? icons.ChevronUp : icons.ChevronDown;
-    const buttonText = expanded ? showLessText : showMoreText;
-    return (React__default["default"].createElement(TruncateContainer, { expanded: expanded, className: className },
-        children,
-        React__default["default"].createElement(Toggle, { expanded: expanded },
-            React__default["default"].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React__default["default"].createElement(Icon["default"], { icon: icon, size: "1rem", position: "left" }),
-                buttonText))));
+`;
+/** @visibleName Read More */
+const ReadMore = (_a) => {
+    var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["collapsedSize", 'data-testid']);
+    const [expanded, setExpanded] = React.useState(props.seoInitExpanded === true || false);
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
+    const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
+    const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
+    const temporaryButtonLabel = temporaryStateManagement ? props.showLessText : props.showMoreText;
+    const handleOnClick = (event) => {
+        if (props.onClick) {
+            props.onClick(event);
+        }
+        if (!temporaryIsStatelessFlag) {
+            setExpanded(!expanded);
+        }
+    };
+    React.useEffect(() => {
+        if (props.seoInitExpanded) {
+            setExpanded(false);
+        }
+    }, [props.seoInitExpanded]);
+    return (React__default["default"].createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+        React__default["default"].createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
+            React__default["default"].createElement(StyledButtonIcon, { icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
 };
 
 exports["default"] = ReadMore;

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

@@ -1,59 +1,59 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the search input element
-     */
-    id?: string;
-    /**
-     *  Name of the search input element
-     */
-    name: string;
-    /**
-     * Default value of search input element
-     */
-    value?: string;
-    /**
-     * Text of placeholder for the search input value
-     */
-    placeholder?: string;
-    /**
-     * On search input change callback
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On search input blur callback
-     */
-    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * On search input focus callback
-     */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * On search input key press callback
-     */
-    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On search input key down callback
-     */
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * On button click callback
-     */
-    onButtonClick?: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allow to set search input element focus on page load
-     */
-    autoFocus?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default Search;
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the search input element
+     */
+    id?: string;
+    /**
+     *  Name of the search input element
+     */
+    name: string;
+    /**
+     * Default value of search input element
+     */
+    value?: string;
+    /**
+     * Text of placeholder for the search input value
+     */
+    placeholder?: string;
+    /**
+     * On search input change callback
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On search input blur callback
+     */
+    onBlur?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * On search input focus callback
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * On search input key press callback
+     */
+    onKeyPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On search input key down callback
+     */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * On button click callback
+     */
+    onButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allow to set search input element focus on page load
+     */
+    autoFocus?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Search;

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

@@ -18,7 +18,7 @@ const Container = styled["default"].div `
     display: flex;
     align-items: center;
     border-bottom: 2px solid ${theme["default"].color.default.pink};
-`;
+`;
 const Input = styled["default"].input `
     display: inline-block;
     appearance: none;
@@ -55,25 +55,25 @@ const Input = styled["default"].input `
     &::-webkit-search-results-decoration {
         display: none;
     }
-`;
+`;
 const Button = styled["default"](ButtonIcon["default"]) `
     margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
-`;
-const Search = (_a) => {
-    var _b;
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const inputRef = React.useRef(null);
-    const handleButtonClick = (e) => {
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-        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) ? icons.Close : icons.Search, name: `${props.name}-button`, onClick: handleButtonClick })));
+`;
+const Search = (_a) => {
+    var _b;
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    const inputRef = React.useRef(null);
+    const handleButtonClick = (e) => {
+        if (inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+        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) ? icons.Close : icons.Search, name: `${props.name}-button`, onClick: handleButtonClick })));
 };
 
 exports["default"] = Search;

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

@@ -1,90 +1,90 @@
-import type { ComponentType, ReactNode } from 'react';
-import React from 'react';
-import type { LangProps } from '../../types/language';
-interface MenuItem {
-    id: string;
-    titles: LangProps;
-    urls: LangProps;
-    icon?: string;
-    target?: string;
-}
-interface SecondaryNavigationData {
-    name?: string;
-    categoryId?: string;
-    pages?: MenuItem[] | null;
-}
-interface NextJSLink {
-    linkUrl: string;
-    linkTitle: string;
-    iconName: string;
-    showNotification: boolean;
-    collapseSize: number;
-    children?: ReactNode;
-}
-interface Props {
-    /**
-     * Component data in JSON format
-     */
-    data: SecondaryNavigationData;
-    /**
-     * Highlight active item
-     */
-    currentUrl: string;
-    /**
-     * Allows to use nextJS component instead of HTML Anchor
-     */
-    nextJSSecondaryNavLink?: ComponentType<NextJSLink>;
-    /**
-     * Allows to change language of component
-     *
-     * @default 'fi'
-     */
-    lang?: string;
-    /**
-     * Allows to set threshold in px, when desktop style changes to mobile style
-     *
-     * @default 767
-     */
-    collapseSize?: number;
-    /**
-     * Allows to set maximum width of component
-     */
-    'max-width'?: number;
-    /**
-     * Defines how active item is determined relative to `currentUrl` property
-     *
-     * @default true
-     */
-    matchFullUrl?: boolean;
-    /**
-     * Allows to hide component in desktop mode
-     *
-     * @default false
-     */
-    mobileOnly?: boolean;
-    /**
-     * Allows to highlight component items
-     */
-    highlightIds?: string[];
-    /**
-     * Allows to set Secondary navigation background to white
-     *
-     * @default false
-     */
-    whiteBg?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/**
- * @visibleName Secondary Navigation
- * @deprecated Use `PriorityNavigation` component
- */
-declare const SecondaryNavigation: ({ currentUrl, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "max-width": maxWidth, matchFullUrl, highlightIds, className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default SecondaryNavigation;
+import type { ComponentType, ReactNode } from 'react';
+import React from 'react';
+import type { LangProps } from '../../types/language';
+interface MenuItem {
+    id: string;
+    titles: LangProps;
+    urls: LangProps;
+    icon?: string;
+    target?: string;
+}
+interface SecondaryNavigationData {
+    name?: string;
+    categoryId?: string;
+    pages?: MenuItem[] | null;
+}
+interface NextJSLink {
+    linkUrl: string;
+    linkTitle: string;
+    iconName: string;
+    showNotification: boolean;
+    collapseSize: number;
+    children?: ReactNode;
+}
+interface Props {
+    /**
+     * Component data in JSON format
+     */
+    data: SecondaryNavigationData;
+    /**
+     * Highlight active item
+     */
+    currentUrl: string;
+    /**
+     * Allows to use nextJS component instead of HTML Anchor
+     */
+    nextJSSecondaryNavLink?: ComponentType<NextJSLink>;
+    /**
+     * Allows to change language of component
+     *
+     * @default 'fi'
+     */
+    lang?: string;
+    /**
+     * Allows to set threshold in px, when desktop style changes to mobile style
+     *
+     * @default 767
+     */
+    collapseSize?: number;
+    /**
+     * Allows to set maximum width of component
+     */
+    'max-width'?: number;
+    /**
+     * Defines how active item is determined relative to `currentUrl` property
+     *
+     * @default true
+     */
+    matchFullUrl?: boolean;
+    /**
+     * Allows to hide component in desktop mode
+     *
+     * @default false
+     */
+    mobileOnly?: boolean;
+    /**
+     * Allows to highlight component items
+     */
+    highlightIds?: string[];
+    /**
+     * Allows to set Secondary navigation background to white
+     *
+     * @default false
+     */
+    whiteBg?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * @visibleName Secondary Navigation
+ * @deprecated Use `PriorityNavigation` component
+ */
+declare const SecondaryNavigation: ({ currentUrl, lang, nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize, "max-width": maxWidth, matchFullUrl, highlightIds, className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default SecondaryNavigation;

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

@@ -27,7 +27,7 @@ const SecondaryNavigationWrapper = styled["default"].nav `
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         border-bottom: 1px solid ${theme["default"].color.line.L03};
     }
-`;
+`;
 const MobileSelector = styled["default"].button `
     display: flex;
     align-items: center;
@@ -48,10 +48,10 @@ const MobileSelector = styled["default"].button `
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         display: none;
     }
-`;
+`;
 const MobileSelectorTitleWrapper = styled["default"].div `
     display: flex;
-`;
+`;
 const MobileSelectorArrow = styled["default"].span `
     display: flex;
 
@@ -59,7 +59,7 @@ const MobileSelectorArrow = styled["default"].span `
         transition: transform 0.15s ease-in-out;
         transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
     }
-`;
+`;
 const MobileSelectorCheck = styled["default"].span `
     margin-left: auto;
 
@@ -68,7 +68,7 @@ const MobileSelectorCheck = styled["default"].span `
             display: none;
         }
     }
-`;
+`;
 const SecondaryNavigationList = styled["default"].ul `
     padding: 0;
     list-style-type: none;
@@ -91,7 +91,7 @@ const SecondaryNavigationList = styled["default"].ul `
         border-bottom: none;
         max-width: ${({ 'max-width': maxWidth }) => (maxWidth ? `${maxWidth}px` : 'none')};
     }
-`;
+`;
 const SecondaryNavigationListElement = styled["default"].li `
     margin: 0 ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 2)};
 
@@ -125,7 +125,7 @@ const SecondaryNavigationListElement = styled["default"].li `
             margin-left: 0;
         }
     }
-`;
+`;
 const IconWrapper = styled["default"].span `
     position: relative;
     display: flex;
@@ -147,58 +147,58 @@ const IconWrapper = styled["default"].span `
     @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         display: none;
     }
-`;
-/**
- * @visibleName Secondary Navigation
- * @deprecated Use `PriorityNavigation` component
- */
-const SecondaryNavigation = (_a) => {
-    var _b, _c, _d, _e;
-    var { currentUrl = '', lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'max-width': maxWidth, matchFullUrl = true, highlightIds = [], className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["currentUrl", "lang", "nextJSSecondaryNavLink", "collapseSize", 'max-width', "matchFullUrl", "highlightIds", "className", 'data-testid']);
-    const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
-    const toggleNav = () => {
-        setIsSecondaryNavOpen(!isSecondaryNavOpen);
-    };
-    const closeNav = () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    };
-    const ref = React.useRef(null);
-    useOutsideClick["default"](ref, () => {
-        if (isSecondaryNavOpen) {
-            setIsSecondaryNavOpen(false);
-        }
-    });
-    const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
-    const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
-    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-    return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
-        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
-            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
-                (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: icons.ChevronDown })))),
-        React__default["default"].createElement(SecondaryNavigationList, { id: props.data.name ||
-                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.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: icons.Check }))))) : (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: icons.Check })))))));
-        }))));
+`;
+/**
+ * @visibleName Secondary Navigation
+ * @deprecated Use `PriorityNavigation` component
+ */
+const SecondaryNavigation = (_a) => {
+    var _b, _c, _d, _e;
+    var { currentUrl = '', lang = 'fi', nextJSSecondaryNavLink: NextJSSecondaryNavLink, collapseSize = 767, 'max-width': maxWidth, matchFullUrl = true, highlightIds = [], className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["currentUrl", "lang", "nextJSSecondaryNavLink", "collapseSize", 'max-width', "matchFullUrl", "highlightIds", "className", 'data-testid']);
+    const [isSecondaryNavOpen, setIsSecondaryNavOpen] = React.useState(false);
+    const toggleNav = () => {
+        setIsSecondaryNavOpen(!isSecondaryNavOpen);
+    };
+    const closeNav = () => {
+        if (isSecondaryNavOpen) {
+            setIsSecondaryNavOpen(false);
+        }
+    };
+    const ref = React.useRef(null);
+    useOutsideClick["default"](ref, () => {
+        if (isSecondaryNavOpen) {
+            setIsSecondaryNavOpen(false);
+        }
+    });
+    const selectedElement = (_b = props.data.pages) === null || _b === void 0 ? void 0 : _b.find(listElement => currentUrl === listElement.urls[lang]);
+    const shouldHighlightSelectedElement = (_c = (selectedElement && highlightIds.some(el => el === selectedElement.id))) !== null && _c !== void 0 ? _c : false;
+    const checkIsMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
+    return (React__default["default"].createElement(SecondaryNavigationWrapper, { ref: ref, collapseSize: collapseSize, "data-testid": dataTestId, className: className, mobileOnly: props.mobileOnly, whiteBg: props.whiteBg },
+        selectedElement && (React__default["default"].createElement(MobileSelector, { onClick: toggleNav, collapseSize: collapseSize, "data-testid": "secondary-navigation-dropdown-selector" },
+            React__default["default"].createElement(MobileSelectorTitleWrapper, null,
+                (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: icons.ChevronDown })))),
+        React__default["default"].createElement(SecondaryNavigationList, { id: props.data.name ||
+                `secondary-navigation-category-${(_d = props.data.categoryId) !== null && _d !== void 0 ? _d : ''}`, isOpen: isSecondaryNavOpen, collapseSize: collapseSize, "max-width": maxWidth, "data-testid": "secondary-nav-menu-ul" }, (_e = props.data.pages) === null || _e === void 0 ? void 0 : _e.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: icons.Check }))))) : (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: icons.Check })))))));
+        }))));
 };
 
 exports["default"] = SecondaryNavigation;