@doyourjob/gravity-ui-page-constructor-addons 2.1.24 → 2.1.25-dev.0

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

@@ -4,8 +4,8 @@ import { NavigationSectionData, SetupRouteChangeHandler } from '../../models';
 interface NavigationProps {
     data: NavigationSectionData[];
     withBackground: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     headerRef?: RefObject<HTMLDivElement>;
     setupRouteChangeHandler?: SetupRouteChangeHandler;
 }

package/build/cjs/components/Navigation/components/Navigation/NavigationItem/NavigationItem.d.ts

@@ -4,8 +4,8 @@ interface NavigationItemOwnProps {
     index: number;
     item: NavigationSectionData;
     isActive: boolean;
-    handleOpenPopup: () => void;
-    handleClosePopup: () => void;
+    handleOpenPopup?: () => void;
+    handleClosePopup?: () => void;
     handleActiveTab: (currentIndex: number) => void;
     children?: ReactNode;
     tooltipId?: string;

package/build/cjs/components/Navigation/components/Navigation/NavigationItem/NavigationItem.js

@@ -24,12 +24,12 @@ const NavigationItem = ({ item, isActive, handleActiveTab, handleOpenPopup, hand
     const handleMouseEnter = (0, react_1.useCallback)(() => {
         handleActiveTab(index);
         if (isPopupExist) {
-            handleOpenPopup();
+            handleOpenPopup === null || handleOpenPopup === void 0 ? void 0 : handleOpenPopup();
         }
     }, [handleActiveTab, handleOpenPopup, index, isPopupExist]);
     const handleMouseLeave = (0, react_1.useCallback)(() => {
         if (isPopupExist) {
-            handleClosePopup();
+            handleClosePopup === null || handleClosePopup === void 0 ? void 0 : handleClosePopup();
         }
         handleActiveTab(constants_1.NO_MENU_TAB_SELECTED);
     }, [handleActiveTab, handleClosePopup, isPopupExist]);

package/build/cjs/components/Navigation/components/Navigation/NavigationItemsList/NavigationItemsList.js

@@ -6,6 +6,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
 const NavigationPopupItem_1 = require("../NavigationPopupItem/NavigationPopupItem");
 const NavigationItemsList = ({ items, itemClassName, className, sizes, }) => {
-    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: className }, items.map((item, index) => (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, Object.assign({}, item, { sizes: sizes, className: itemClassName, key: item.slug + index, hover: true }))))));
+    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: className }, items.map((item, index) => (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, Object.assign({}, item, { sizes: sizes, className: itemClassName, key: `${item.slug}-${index}`, hover: true }))))));
 };
 exports.NavigationItemsList = NavigationItemsList;

package/build/cjs/components/NewHeader/NewHeader.css

@@ -0,0 +1,162 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-new-header {
+  --g-scrollbar-width: 8px;
+  --g-color-scroll-handle: var(--g-color-base-generic);
+  --g-color-scroll-handle-hover: var(--g-color-line-generic);
+  position: relative;
+  max-width: 1328px;
+  margin: 0 auto;
+  width: 100%;
+  z-index: 100;
+}
+
+.pc-addons-new-header__container {
+  width: 100%;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  background: var(--pc-transparent);
+  border-radius: var(--pc-border-radius, 24px);
+}
+
+.pc-addons-new-header__container_with-background {
+  background: var(--g-color-base-background);
+  box-shadow: 0 4px 24px var(--g-color-base-generic);
+}
+
+.pc-addons-new-header__left, .pc-addons-new-header__right {
+  display: flex;
+  align-items: center;
+}
+
+.pc-addons-new-header__left {
+  margin-right: 32px;
+}
+
+.pc-addons-new-header__right {
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.pc-addons-new-header__icons-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.pc-addons-new-header__buttons {
+  display: flex;
+  margin-left: 8px;
+}
+
+.pc-addons-new-header__icon {
+  color: var(--g-color-text-hint);
+  transition: color 0.2s;
+}
+
+.pc-addons-new-header__user {
+  margin-left: 12px;
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__user {
+    display: none;
+  }
+}
+.pc-addons-new-header__back {
+  position: relative;
+  left: 2px;
+}
+
+.pc-addons-new-header__back-icon {
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__back {
+  display: none;
+}
+
+.pc-addons-new-header__back:hover:before {
+  background: none;
+}
+
+.pc-addons-new-header__back:hover .pc-addons-new-header__icon {
+  color: var(--g-color-text-complementary);
+}
+
+@media (max-width: 768px) {
+  .pc-addons-new-header__navigation {
+    display: none;
+  }
+}
+.pc-addons-new-header__popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--pc-border-radius, 24px);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+  --yc-popover-max-width: 1296px;
+  --yc-popover-padding: 20px;
+  width: var(--yc-popover-max-width);
+  left: 0;
+  box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
+}
+
+.pc-addons-new-header__popup_with-background {
+  border-radius: 0 0 var(--pc-border-radius, 24px) var(--pc-border-radius, 24px);
+}
+
+.pc-addons-new-header__scroll-arrow {
+  height: 20px;
+  color: var(--g-color-text-hint);
+}
+
+.pc-addons-new-header__user-popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--g-border-radius-m);
+  box-shadow: 0 3px 10px var(--g-color-base-generic-hover);
+}
+
+@media (max-width: 1081px) {
+  .pc-addons-new-header__left {
+    margin-right: 0;
+  }
+}
+@media (min-width: 769px) {
+  .pc-addons-new-header__logo-img {
+    height: 30px;
+  }
+}
+@media (max-width: 768px) {
+  .pc-addons-new-header {
+    max-width: 100%;
+    padding: 16px 40px 16px 48px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .pc-addons-new-header__left {
+    margin-right: 12px;
+  }
+  .pc-addons-new-header__icons-container {
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+  }
+  .pc-addons-new-header_search .pc-addons-new-header__logo {
+    display: none;
+  }
+  .pc-addons-new-header_search .pc-addons-new-header__back {
+    display: block;
+  }
+}
+@media (max-width: 576px) {
+  .pc-addons-new-header {
+    padding-left: 24px;
+    padding-right: 16px;
+  }
+  .pc-addons-new-header__container {
+    height: 64px;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationData, SetupRouteChangeHandler } from './models';
+export declare const MOBILE_ICON_SIZE = 24;
+export interface NewHeaderProps extends ClassNameProps {
+    data: NavigationData;
+    renderSearch?: (props: {
+        onActiveToggle: (isActive: boolean) => void;
+    }) => ReactNode;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+    scrollOffset?: number;
+}
+export declare const NewHeader: ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset, }: NewHeaderProps) => React.JSX.Element;

package/build/cjs/components/NewHeader/NewHeader.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewHeader = exports.MOBILE_ICON_SIZE = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../utils/cn");
+const LoginButton_1 = require("./components/LoginButton/LoginButton");
+const MobileNavigation_1 = require("./components/MobileNavigation/MobileNavigation");
+const Navigation_1 = require("./components/Navigation/Navigation");
+const route_change_1 = require("./contexts/route-change");
+const b = (0, cn_1.block)('new-header');
+exports.MOBILE_ICON_SIZE = 24;
+const NewHeader = ({ data, setupRouteChangeHandler, renderSearch, className, scrollOffset = 0, }) => {
+    const { logo, buttons, left, right, mobile, login } = data;
+    const headerRef = (0, react_1.useRef)(null);
+    const [withBackground, setWithBackground] = (0, react_1.useState)(false);
+    const [withShadow, setWithShadow] = (0, react_1.useState)(true);
+    const [isSearchMode, setIsSearchMode] = (0, react_1.useState)(false);
+    const [isMobileNavigationOpen, setIsMobileNavigationOpen] = (0, react_1.useState)(false);
+    const [pageHasScroll, setPageHasScroll] = (0, react_1.useState)(false);
+    const showButtonsContainer = Boolean(buttons);
+    const toggleSearch = (0, react_1.useCallback)((isActive) => setIsSearchMode(isActive), []);
+    const toggleMobileNavigationPopup = (0, react_1.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 = (0, react_1.useCallback)((scrollTop) => {
+        // enable header's shadow on mobile if mobile menu started to scroll
+        setWithShadow(scrollTop > 0);
+        if (!pageHasScroll) {
+            setWithBackground(scrollTop > 0);
+        }
+    }, [pageHasScroll]);
+    (0, react_1.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();
+    });
+    (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        setIsMobileNavigationOpen(false);
+    }), [setupRouteChangeHandler]);
+    return (react_1.default.createElement(route_change_1.RouteChangeHandlerContext.Provider, { value: setupRouteChangeHandler },
+        react_1.default.createElement("header", { className: b({
+                search: isSearchMode,
+            }, className), ref: headerRef },
+            react_1.default.createElement("div", { className: b('container', {
+                    'with-background': withBackground,
+                    'with-shadow': withShadow,
+                }) },
+                react_1.default.createElement("div", { className: b('left') },
+                    logo && (react_1.default.createElement("a", Object.assign({ href: logo.href, className: b('logo') }, (0, gravity_ui_page_constructor_1.getLinkProps)(logo.href || '')), logo.src && (react_1.default.createElement("img", { className: b('logo-img'), alt: logo.alt, src: logo.src })))),
+                    left ? (react_1.default.createElement("div", { className: b('navigation') },
+                        react_1.default.createElement(Navigation_1.Navigation, { data: left, headerRef: headerRef }))) : null),
+                react_1.default.createElement("div", { className: b('right') },
+                    right ? (react_1.default.createElement("div", { className: b('navigation') },
+                        react_1.default.createElement(Navigation_1.Navigation, { data: right, headerRef: headerRef }))) : null,
+                    react_1.default.createElement("div", { className: b('icons-container') }, renderSearch && renderSearch({ onActiveToggle: toggleSearch })),
+                    showButtonsContainer &&
+                        (buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (react_1.default.createElement(gravity_ui_page_constructor_1.Button, Object.assign({}, button, { size: "l", key: button.text }))))),
+                    login && react_1.default.createElement(LoginButton_1.LoginButton, { data: login, headerRef: headerRef }),
+                    mobile ? (react_1.default.createElement(MobileNavigation_1.MobileNavigation, { toogleOpen: toggleMobileNavigationPopup, isOpened: isMobileNavigationOpen, isSearchOpen: isSearchMode, data: mobile, buttons: buttons, onMenuScroll: onMenuScroll, popupClassName: b('user-popup') })) : null)))));
+};
+exports.NewHeader = NewHeader;

package/build/cjs/components/NewHeader/components/CompanyPopup/CompanyPopup.css

@@ -0,0 +1,30 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-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-company-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-company-popup__container {
+  padding: 20px;
+  display: flex;
+}
+
+.pc-addons-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/cjs/components/NewHeader/components/CompanyPopup/CompanyPopup.d.ts

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

package/build/cjs/components/NewHeader/components/CompanyPopup/CompanyPopup.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompanyPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const PopupItem_1 = require("../PopupItem/PopupItem");
+const b = (0, cn_1.block)('company-popup');
+const CompanyPopup = ({ sections }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') },
+    react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, sections.map((section, index) => (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { key: section.title, sizes: index === 0
+            ? { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12, [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4 }
+            : { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12, [gravity_ui_page_constructor_1.GridColumnSize.Md]: 8 } },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
+                react_1.default.createElement("div", { className: b('title') }, section.title))),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, section.items.map((item) => (react_1.default.createElement(PopupItem_1.PopupItem, Object.assign({ key: item.title }, item, { sizes: index === 0
+                ? { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12 }
+                : { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12, [gravity_ui_page_constructor_1.GridColumnSize.Md]: 6 } })))))))))));
+exports.CompanyPopup = CompanyPopup;

package/build/cjs/components/NewHeader/components/InvestorPopup/InvestorPopup.css

@@ -0,0 +1,79 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-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-investor-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-investor-popup__container {
+  padding: 32px;
+  display: flex;
+}
+
+.pc-addons-investor-popup__wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0;
+  flex: 1;
+}
+
+.pc-addons-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));
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.pc-addons-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-investor-popup__card {
+  background-color: #f2f4f5;
+  border-radius: 8px;
+  width: 268px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.pc-addons-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-investor-popup__card-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pc-addons-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-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/cjs/components/NewHeader/components/InvestorPopup/InvestorPopup.d.ts

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

package/build/cjs/components/NewHeader/components/InvestorPopup/InvestorPopup.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvestorPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const PopupItem_1 = require("../PopupItem/PopupItem");
+const b = (0, cn_1.block)('investor-popup');
+const InvestorPopup = ({ title, subtitle, url, items, stock }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') },
+    react_1.default.createElement("div", { className: b('wrap') },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, null,
+                react_1.default.createElement("a", Object.assign({ href: url, className: b('title') }, (0, gravity_ui_page_constructor_1.getLinkProps)(url)), title),
+                react_1.default.createElement("div", { className: b('subtitle') }, subtitle))),
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null, items.map((item) => (react_1.default.createElement(PopupItem_1.PopupItem, Object.assign({ key: item.title }, item, { sizes: { [gravity_ui_page_constructor_1.GridColumnSize.All]: 12, [gravity_ui_page_constructor_1.GridColumnSize.Md]: 6 } })))))),
+    stock && (react_1.default.createElement("div", { className: b('card') },
+        react_1.default.createElement("div", { className: b('card-title') }, stock.title),
+        react_1.default.createElement("div", { className: b('card-wrap') },
+            react_1.default.createElement("div", { className: b('card-price') }, stock.price),
+            react_1.default.createElement("div", { className: b('card-date') }, stock.date))))));
+exports.InvestorPopup = InvestorPopup;

package/build/cjs/components/NewHeader/components/LoginButton/LoginButton.d.ts

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

package/build/cjs/components/NewHeader/components/LoginButton/LoginButton.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const constants_1 = require("../../constants");
+const LoginPopup_1 = require("../LoginPopup/LoginPopup");
+const NavigationPopup_1 = require("../NavigationPopup/NavigationPopup");
+const LoginButton = ({ data, headerRef, setupRouteChangeHandler }) => {
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    const [pretendentActiveTab, setPretendentAciveTab] = (0, react_1.useState)(false);
+    const [previouslyFocusedElement, setPreviouslyFocusedElement] = (0, react_1.useState)(null);
+    const handleActiveTab = (0, react_1.useCallback)((val) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(val);
+    }, []);
+    const onEscapeKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Escape') {
+            setIsActive(false);
+            setPretendentAciveTab(false);
+            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+        }
+    }, [previouslyFocusedElement]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => handleActiveTab(true), [handleActiveTab]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => handleActiveTab(false), [handleActiveTab]);
+    (0, react_1.useEffect)(() => {
+        const timerId = setTimeout(() => {
+            setIsActive(pretendentActiveTab);
+        }, constants_1.SWITCH_MENU_TAB_TIMEOUT);
+        return () => clearTimeout(timerId);
+    }, [pretendentActiveTab]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', onEscapeKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onEscapeKeyDown);
+        };
+    }, [onEscapeKeyDown]);
+    (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleMouseLeave();
+    }), [handleMouseLeave, setupRouteChangeHandler]);
+    return (react_1.default.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        data.text,
+        isActive && (react_1.default.createElement(NavigationPopup_1.NavigationPopup, { headerRef: headerRef },
+            react_1.default.createElement(LoginPopup_1.LoginPopup, Object.assign({}, data))))));
+};
+exports.LoginButton = LoginButton;

package/build/cjs/components/NewHeader/components/LoginPopup/LoginPopup.css

@@ -0,0 +1,45 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-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-login-popup::-webkit-scrollbar {
+  display: none;
+}
+
+.pc-addons-login-popup__container {
+  padding: 8px;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.pc-addons-login-popup__item {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.pc-addons-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-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/cjs/components/NewHeader/components/LoginPopup/LoginPopup.d.ts

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

package/build/cjs/components/NewHeader/components/LoginPopup/LoginPopup.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('login-popup');
+const LoginPopup = ({ items }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, { className: b(), containerClass: b('container') }, items.map((item) => (react_1.default.createElement("a", Object.assign({ href: item.url, className: b('item'), key: item.title }, (0, gravity_ui_page_constructor_1.getLinkProps)(item.url || '')),
+    react_1.default.createElement("div", { className: b('title') }, item.title),
+    react_1.default.createElement("div", { className: b('subtitle') }, item.subtitle))))));
+exports.LoginPopup = LoginPopup;

package/build/cjs/components/NewHeader/components/MediumPopup/MediumPopup.css

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

package/build/cjs/components/NewHeader/components/MediumPopup/MediumPopup.d.ts

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

package/build/cjs/components/NewHeader/components/MediumPopup/MediumPopup.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediumPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gravity_ui_page_constructor_1 = require("@doyourjob/gravity-ui-page-constructor");
+const cn_1 = require("../../../../utils/cn");
+const PopupItem_1 = require("../PopupItem/PopupItem");
+const b = (0, cn_1.block)('medium-popup');
+const MediumPopup = ({ groups }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Grid, null,
+    react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+        react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b() }, groups.map((dataItem) => dataItem.items.map((item) => (react_1.default.createElement(PopupItem_1.PopupItem, Object.assign({}, item, { key: item.title, hover: true, imageSize: dataItem.imageSize, sizes: {
+                [gravity_ui_page_constructor_1.GridColumnSize.Xl]: 3,
+                [gravity_ui_page_constructor_1.GridColumnSize.Md]: 4,
+                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+            } })))))))));
+exports.MediumPopup = MediumPopup;