@doyourjob/gravity-ui-page-constructor-addons 2.1.25 → 2.1.26

package/build/esm/components/NewHeader/NewHeader.js

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button as PCButton, getLinkProps, } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../utils/cn';
+import { NHLoginButton } from './components/NHLoginButton/NHLoginButton';
+import { NHMobileNavigation } from './components/NHMobileNavigation/NHMobileNavigation';
+import { NHNavigation } from './components/NHNavigation/NHNavigation';
+import { RouteChangeHandlerContext } from './contexts/route-change';
+import './NewHeader.css';
+const b = block('new-header');
+export const MOBILE_ICON_SIZE = 24;
+export const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset = 0, }) => {
+    const { logo, buttons, left, right, mobile, login } = data;
+    const headerRef = useRef(null);
+    const [withBackground, setWithBackground] = useState(false);
+    const [withShadow, setWithShadow] = useState(true);
+    const [isSearchMode, setIsSearchMode] = useState(false);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = useState(false);
+    const [pageHasScroll, setPageHasScroll] = useState(false);
+    const showButtonsContainer = Boolean(buttons);
+    const toggleSearch = useCallback((isActive) => setIsSearchMode(isActive), []);
+    const toggleMobileNavigationPopup = useCallback((isOpened) => {
+        setIsMobileNavigationOpen(isOpened);
+        // disable header's shadow on mobile with opened menu and if page was scrolled
+        if (isOpened && pageHasScroll) {
+            setWithShadow(false);
+        }
+    }, [pageHasScroll]);
+    const onMenuScroll = useCallback((scrollTop) => {
+        // enable header's shadow on mobile if mobile menu started to scroll
+        setWithShadow(scrollTop > 0);
+        if (!pageHasScroll) {
+            setWithBackground(scrollTop > 0);
+        }
+    }, [pageHasScroll]);
+    useEffect(() => {
+        const onScroll = () => {
+            const scrollTop = window.pageYOffset;
+            const shouldShowBg = scrollTop > scrollOffset;
+            if (withBackground !== shouldShowBg) {
+                setWithBackground(shouldShowBg);
+            }
+            if (scrollTop === 0 && pageHasScroll) {
+                setPageHasScroll(false);
+            }
+            else if (scrollTop > 0 && !pageHasScroll) {
+                setPageHasScroll(true);
+            }
+        };
+        window.addEventListener('scroll', onScroll);
+        onScroll();
+    });
+    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        setIsMobileNavigationOpen(false);
+    }), [setupRouteChangeHandler]);
+    return (React.createElement(RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
+        React.createElement("header", { className: b({
+                search: isSearchMode,
+            }, className), ref: headerRef },
+            React.createElement("div", { className: b('container', {
+                    'with-background': withBackground,
+                    'with-shadow': withShadow,
+                }) },
+                React.createElement("div", { className: b('left') },
+                    logo && (React.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, getLinkProps(logo.href || '')), logo.src && (React.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
+                    left ? (React.createElement("div", { className: b('navigation') },
+                        React.createElement(NHNavigation, { data: left, headerRef: headerRef }))) : null),
+                React.createElement("div", { className: b('right') },
+                    right ? (React.createElement("div", { className: b('navigation') },
+                        React.createElement(NHNavigation, { data: right, headerRef: headerRef }))) : null,
+                    React.createElement("div", { className: b('wrap') },
+                        React.createElement("div", { className: b('icons-container') }, renderSearch && renderSearch({ onActiveToggle: toggleSearch })),
+                        showButtonsContainer &&
+                            (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (React.createElement(PCButton, Object.assign({}, button, { size: "l", key: button.text }))))),
+                        login && React.createElement(NHLoginButton, { data: login, headerRef: headerRef }),
+                        mobile ? (React.createElement(NHMobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null))))));
+};

package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-company-popup {
+  background: var(--g-color-base-float);
+  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
+  max-height: calc(100vh - 64px - 64px);
+  overflow: auto;
+  max-width: 900px;
+  margin-left: auto;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-company-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-company-popup__container {
+  padding: 20px;
+  display: flex;
+}
+
+.pc-addons-nh-company-popup__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  padding: 12px;
+  font-weight: 500;
+  color: #9fb1bd;
+}

package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHCompanyPopupData } from '../../models';
+import './NHCompanyPopup.css';
+export declare const NHCompanyPopup: ({ sections }: NHCompanyPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHCompanyPopup/NHCompanyPopup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHCompanyPopup.css';
+const b = block('nh-company-popup');
+export const NHCompanyPopup = ({ sections }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
+    React.createElement(Row, null, sections.map((section, index) => (React.createElement(Col, { key: section.title, sizes: index === 0
+            ? { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 4 }
+            : { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 8 } },
+        React.createElement(Row, null,
+            React.createElement(Col, null,
+                React.createElement("div", { className: b('title') }, section.title))),
+        React.createElement(Row, null, section.items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title, hover: true }, item, { sizes: index === 0
+                ? { [GridColumnSize.All]: 12 }
+                : { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 6 } })))))))))));

package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.css

@@ -0,0 +1,86 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-investor-popup {
+  background: var(--g-color-base-float);
+  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
+  max-height: calc(100vh - 64px - 64px);
+  overflow: auto;
+  max-width: 900px;
+  margin-left: auto;
+  width: 100%;
+  border-radius: var(--pc-border-radius, 24px);
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-investor-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-investor-popup__container {
+  padding: 32px;
+  display: flex;
+}
+
+.pc-addons-nh-investor-popup__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0;
+  flex: 1;
+}
+
+.pc-addons-nh-investor-popup__title {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.pc-addons-nh-investor-popup__title:hover {
+  color: var(--g-color-text-link-hover);
+}
+
+.pc-addons-nh-investor-popup__subtitle {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  font-weight: 500;
+  color: #9fb1bd;
+}
+
+.pc-addons-nh-investor-popup__card {
+  background-color: #f2f4f5;
+  border-radius: 8px;
+  width: 268px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pc-addons-nh-investor-popup__card-title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  font-weight: 500;
+}
+
+.pc-addons-nh-investor-popup__card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-nh-investor-popup__card-price {
+  font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+  line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  font-weight: 700;
+}
+
+.pc-addons-nh-investor-popup__card-date {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  font-weight: 500;
+  color: #9fb1bd;
+}

package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHInvestorPopupData } from '../../models';
+import './NHInvestorPopup.css';
+export declare const NHInvestorPopup: ({ title, subtitle, url, items, stock }: NHInvestorPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHInvestorPopup/NHInvestorPopup.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Row, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHInvestorPopup.css';
+const b = block('nh-investor-popup');
+export const NHInvestorPopup = ({ title, subtitle, url, items, stock }) => (React.createElement(Grid, { className: b(), containerClass: b('container') },
+    React.createElement("div", { className: b('wrap') },
+        React.createElement(Row, null,
+            React.createElement(Col, null,
+                React.createElement("a", Object.assign({ href: url, className: b('title') }, getLinkProps(url)), title),
+                React.createElement("div", { className: b('subtitle') }, subtitle))),
+        React.createElement(Row, null, items.map((item) => (React.createElement(NHPopupItem, Object.assign({ key: item.title, hover: true }, item, { sizes: { [GridColumnSize.All]: 12, [GridColumnSize.Md]: 6 } })))))),
+    stock && (React.createElement("div", { className: b('card') },
+        React.createElement("div", { className: b('card-title') }, stock.title),
+        React.createElement("div", { className: b('card-wrap') },
+            React.createElement("div", { className: b('card-price') }, stock.price),
+            React.createElement("div", { className: b('card-date') }, stock.date))))));

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.css

@@ -0,0 +1,16 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-login-button {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  gap: 4px;
+  padding: 0 8px 0 12px;
+  border-radius: 8px;
+  background: var(--g-color-base-brand);
+  color: var(--g-color-text-brand-contrast);
+}
+
+.pc-addons-nh-login-button:hover {
+  background: var(--g-color-base-brand-hover);
+}

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import React from 'react';
+import { NHLoginPopupData, SetupRouteChangeHandler } from '../../models';
+import './NHLoginButton.css';
+interface LoginButtonProps {
+    data: NHLoginPopupData;
+    headerRef?: RefObject<HTMLDivElement>;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+}
+export declare const NHLoginButton: ({ data, headerRef, setupRouteChangeHandler }: LoginButtonProps) => React.JSX.Element;
+export {};

package/build/esm/components/NewHeader/components/NHLoginButton/NHLoginButton.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
+import { NHLoginPopup } from '../NHLoginPopup/NHLoginPopup';
+import { NHNavigationPopup } from '../NHNavigationPopup/NHNavigationPopup';
+import './NHLoginButton.css';
+const b = block('nh-login-button');
+export const NHLoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
+    const [isActive, setIsActive] = useState(false);
+    const [pretendentActiveTab, setPretendentAciveTab] = useState(false);
+    const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
+    const handleActiveTab = useCallback((val) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(val);
+    }, []);
+    const onEscapeKeyDown = useCallback((event) => {
+        if (event.key === 'Escape') {
+            setIsActive(false);
+            setPretendentAciveTab(false);
+            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+        }
+    }, [previouslyFocusedElement]);
+    const handleMouseEnter = useCallback(() => handleActiveTab(true), [handleActiveTab]);
+    const handleMouseLeave = useCallback(() => handleActiveTab(false), [handleActiveTab]);
+    useEffect(() => {
+        const timerId = setTimeout(() => {
+            setIsActive(pretendentActiveTab);
+        }, SWITCH_MENU_TAB_TIMEOUT);
+        return () => clearTimeout(timerId);
+    }, [pretendentActiveTab]);
+    useEffect(() => {
+        document.addEventListener('keydown', onEscapeKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onEscapeKeyDown);
+        };
+    }, [onEscapeKeyDown]);
+    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleMouseLeave();
+    }), [handleMouseLeave, setupRouteChangeHandler]);
+    return (React.createElement("div", { className: b(), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        data.text,
+        React.createElement(Icon, { data: isActive ? ChevronUp : ChevronDown, size: 14 }),
+        isActive && (React.createElement(NHNavigationPopup, { headerRef: headerRef },
+            React.createElement(NHLoginPopup, Object.assign({}, data))))));
+};

package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.css

@@ -0,0 +1,51 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-login-popup {
+  border-radius: 16px;
+  background: var(--g-color-base-float);
+  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
+  max-height: calc(100vh - 64px - 64px);
+  overflow: auto;
+  max-width: 260px;
+  margin-left: auto;
+  width: 100%;
+  scrollbar-width: none;
+}
+
+.pc-addons-nh-login-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-nh-login-popup__container {
+  padding: 8px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-addons-nh-login-popup__item {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.pc-addons-nh-login-popup__item:hover {
+  background: var(--g-color-private-black-50);
+}
+
+.pc-addons-nh-login-popup__title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  font-weight: 500;
+}
+
+.pc-addons-nh-login-popup__subtitle {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  font-weight: 500;
+  color: #9fb1bd;
+}

package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHLoginPopupData } from '../../models';
+import './NHLoginPopup.css';
+export declare const NHLoginPopup: ({ items }: NHLoginPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHLoginPopup/NHLoginPopup.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Grid, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHLoginPopup.css';
+const b = block('nh-login-popup');
+export const NHLoginPopup = ({ items }) => (React.createElement(Grid, { className: b(), containerClass: b('container') }, items.map((item) => (React.createElement("a", Object.assign({ href: item.url, className: b('item'), key: item.title }, getLinkProps(item.url || '')),
+    React.createElement("div", { className: b('title') }, item.title),
+    React.createElement("div", { className: b('subtitle') }, item.subtitle))))));

package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.css

@@ -0,0 +1,8 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-medium-popup {
+  max-height: calc(100vh - 64px - 64px);
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+}

package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHMediumPopupData } from '../../models';
+import './NHMediumPopup.css';
+export declare const NHMediumPopup: ({ groups }: NHMediumPopupData) => React.JSX.Element;

package/build/esm/components/NewHeader/components/NHMediumPopup/NHMediumPopup.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Col, Grid, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import { NHPopupItem } from '../NHPopupItem/NHPopupItem';
+import './NHMediumPopup.css';
+const b = block('nh-medium-popup');
+export const NHMediumPopup = ({ groups }) => (React.createElement(Grid, null,
+    React.createElement(Row, null,
+        React.createElement(Col, { className: b() }, groups.map((dataItem) => dataItem.items.map((item) => (React.createElement(NHPopupItem, Object.assign({}, item, { key: item.title, hover: true, imageSize: dataItem.imageSize, sizes: {
+                [GridColumnSize.Xl]: 3,
+                [GridColumnSize.Md]: 4,
+                [GridColumnSize.All]: 12,
+            } })))))))));

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.css

@@ -0,0 +1,47 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-mobile-navigation {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}
+
+.pc-addons-nh-mobile-navigation__icon {
+  display: none;
+}
+
+.pc-addons-nh-mobile-navigation__icon:hover:before {
+  background: none;
+}
+
+.pc-addons-nh-mobile-navigation__icon:hover .pc-addons-nh-mobile-navigation__icon {
+  color: var(--g-color-text-complementary);
+}
+
+.pc-addons-nh-mobile-navigation__icon-icon {
+  position: relative;
+  top: 3px;
+}
+
+.pc-addons-nh-mobile-navigation__icon_hidden {
+  display: none;
+}
+
+.pc-addons-nh-mobile-navigation__user {
+  margin-top: 24px;
+}
+
+.pc-addons-nh-mobile-navigation__buttons {
+  margin-top: 8px;
+}
+
+@media (max-width: 769px) {
+  .pc-addons-nh-mobile-navigation__icon {
+    display: block;
+  }
+  .pc-addons-nh-mobile-navigation__icon_hidden {
+    display: none;
+  }
+}

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NHMobileNavigationItemData } from '../../models';
+import './NHMobileNavigation.css';
+interface MobileNavigationProps {
+    isOpened: boolean;
+    toogleOpen: (isOpened: boolean) => void;
+    isSearchOpen: boolean;
+    data: NHMobileNavigationItemData[];
+    onMenuScroll: (scrollTop: number) => void;
+    popupClassName?: string;
+    buttons?: ButtonProps[];
+}
+export declare const NHMobileNavigation: ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }: MobileNavigationProps) => React.JSX.Element;
+export {};

package/build/esm/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button as PCButton } from '@doyourjob/gravity-ui-page-constructor';
+import { Bars, Xmark } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { NHMobileNavigationItem } from '../NHMobileNavigationItem/NHMobileNavigationItem';
+import { NHMobileNavigationPopup } from '../NHMobileNavigationPopup/NHMobileNavigationPopup';
+import './NHMobileNavigation.css';
+const b = block('nh-mobile-navigation');
+export const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (React.createElement("div", { className: b() },
+    React.createElement(Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+            e.stopPropagation();
+            toogleOpen(!isOpened);
+        } },
+        React.createElement(Icon, { data: isOpened ? Xmark : Bars, size: 24 })),
+    React.createElement(NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+        React.createElement("nav", null,
+            React.createElement("ul", { className: b() }, data.map((item) => (React.createElement("li", { className: b(), key: item.title },
+                React.createElement(NHMobileNavigationItem, Object.assign({}, item)))))),
+            buttons &&
+                (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => React.createElement(PCButton, Object.assign({}, button, { size: "l", key: button.text }))))))));

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.css

@@ -0,0 +1,75 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-mobile-navigation-item {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  padding: 12px 0;
+}
+
+.pc-addons-nh-mobile-navigation-item_type_link {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-nh-mobile-navigation-item__arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+}
+
+.pc-addons-nh-mobile-navigation-item__text {
+  padding-right: 20px;
+}
+
+.pc-addons-nh-mobile-navigation-item__list {
+  padding: 10px 20px;
+  background-color: var(--g-color-base-generic);
+  border-radius: var(--g-border-radius-l);
+}
+
+.pc-addons-nh-mobile-navigation-item__list:not(:first-child) {
+  margin-top: 12px;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-title {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  margin: 0;
+  padding: 10px 0;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-item {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+  color: var(--g-color-text-primary);
+  padding: 10px 0;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-item:hover, .pc-addons-nh-mobile-navigation-item__list-item:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+
+.pc-addons-nh-mobile-navigation-item__list-link {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+  display: block;
+  padding: 10px 0;
+}

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NHMobileNavigationItemData } from '../../models';
+import './NHMobileNavigationItem.css';
+export declare const NHMobileNavigationItem: (props: NHMobileNavigationItemData) => React.JSX.Element | null;

package/build/esm/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.js

@@ -0,0 +1,26 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import { Foldable, ToggleArrow, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import './NHMobileNavigationItem.css';
+const b = block('nh-mobile-navigation-item');
+export const NHMobileNavigationItem = (props) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const toggleOpen = useCallback(() => {
+        setIsOpened(!isOpened);
+    }, [isOpened]);
+    if ('link' in props) {
+        return (React.createElement("a", Object.assign({ href: props.link.url, className: b({ type: 'link' }) }, getLinkProps(props.link.url || '', undefined, props.link.target)), props.title));
+    }
+    if ('data' in props) {
+        return (React.createElement(Fragment, null,
+            React.createElement("div", { className: b({ opened: isOpened }), onClick: toggleOpen },
+                React.createElement("div", { className: b('text') }, props.title),
+                React.createElement("div", { className: b('arrow') },
+                    React.createElement(ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),
+            React.createElement(Foldable, { isOpened: isOpened }, props.data.map(({ title: itemTitle, items, }) => (React.createElement("div", { className: b('list'), key: items[0].title },
+                itemTitle && React.createElement("h5", { className: b('list-title') }, itemTitle),
+                React.createElement("ul", { className: b('list-items') }, items.map((linkItem) => (React.createElement("li", { className: b('li'), key: linkItem.title },
+                    React.createElement("a", Object.assign({ href: linkItem.url, className: b('list-item') }, getLinkProps(linkItem.url || '')), linkItem.title)))))))))));
+    }
+    return null;
+};