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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHLoginPopup = 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)('nh-login-popup');
+const NHLoginPopup = ({ 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.NHLoginPopup = NHLoginPopup;

package/build/cjs/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/cjs/components/NewHeader/components/NHMediumPopup/NHMediumPopup.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHMediumPopup = 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 NHPopupItem_1 = require("../NHPopupItem/NHPopupItem");
+const b = (0, cn_1.block)('nh-medium-popup');
+const NHMediumPopup = ({ 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(NHPopupItem_1.NHPopupItem, 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.NHMediumPopup = NHMediumPopup;

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

@@ -0,0 +1,52 @@
+/* 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));
+}
+
+@media (min-width: 1081px) {
+  .pc-addons-nh-mobile-navigation {
+    display: none;
+  }
+}
+.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: 1081px) {
+  .pc-addons-nh-mobile-navigation__icon {
+    display: block;
+  }
+  .pc-addons-nh-mobile-navigation__icon_hidden {
+    display: none;
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ButtonProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NHMobileNavigationItemData } from '../../models';
+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/cjs/components/NewHeader/components/NHMobileNavigation/NHMobileNavigation.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHMobileNavigation = 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 icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const NHMobileNavigationItem_1 = require("../NHMobileNavigationItem/NHMobileNavigationItem");
+const NHMobileNavigationPopup_1 = require("../NHMobileNavigationPopup/NHMobileNavigationPopup");
+const b = (0, cn_1.block)('nh-mobile-navigation');
+const NHMobileNavigation = ({ isOpened, toogleOpen, isSearchOpen, data, buttons, onMenuScroll, }) => (react_1.default.createElement("div", { className: b() },
+    react_1.default.createElement(uikit_1.Button, { view: "flat", size: "l", className: b('icon', { hidden: isSearchOpen }), onClick: (e) => {
+            e.stopPropagation();
+            toogleOpen(!isOpened);
+        } },
+        react_1.default.createElement(uikit_1.Icon, { data: isOpened ? icons_1.Xmark : icons_1.Bars, size: 24 })),
+    react_1.default.createElement(NHMobileNavigationPopup_1.NHMobileNavigationPopup, { isOpened: isOpened, onClose: () => toogleOpen(false), onMenuScroll: onMenuScroll },
+        react_1.default.createElement("nav", null,
+            react_1.default.createElement("ul", { className: b() }, data.map((item) => (react_1.default.createElement("li", { className: b(), key: item.title },
+                react_1.default.createElement(NHMobileNavigationItem_1.NHMobileNavigationItem, Object.assign({}, item)))))),
+            buttons &&
+                (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 }))))))));
+exports.NHMobileNavigation = NHMobileNavigation;

package/build/cjs/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/cjs/components/NewHeader/components/NHMobileNavigationItem/NHMobileNavigationItem.d.ts

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

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHMobileNavigationItem = 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 b = (0, cn_1.block)('nh-mobile-navigation-item');
+const NHMobileNavigationItem = (props) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const toggleOpen = (0, react_1.useCallback)(() => {
+        setIsOpened(!isOpened);
+    }, [isOpened]);
+    if ('link' in props) {
+        return (react_1.default.createElement("a", Object.assign({ href: props.link.url, className: b({ type: 'link' }) }, (0, gravity_ui_page_constructor_1.getLinkProps)(props.link.url || '', undefined, props.link.target)), props.title));
+    }
+    if ('data' in props) {
+        return (react_1.default.createElement(react_1.Fragment, null,
+            react_1.default.createElement("div", { className: b({ opened: isOpened }), onClick: toggleOpen },
+                react_1.default.createElement("div", { className: b('text') }, props.title),
+                react_1.default.createElement("div", { className: b('arrow') },
+                    react_1.default.createElement(gravity_ui_page_constructor_1.ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),
+            react_1.default.createElement(gravity_ui_page_constructor_1.Foldable, { isOpened: isOpened }, props.data.map(({ title: itemTitle, items, }) => (react_1.default.createElement("div", { className: b('list'), key: items[0].title },
+                itemTitle && react_1.default.createElement("h5", { className: b('list-title') }, itemTitle),
+                react_1.default.createElement("ul", { className: b('list-items') }, items.map((linkItem) => (react_1.default.createElement("li", { className: b('li'), key: linkItem.title },
+                    react_1.default.createElement("a", Object.assign({ href: linkItem.url, className: b('list-item') }, (0, gravity_ui_page_constructor_1.getLinkProps)(linkItem.url || '')), linkItem.title)))))))))));
+    }
+    return null;
+};
+exports.NHMobileNavigationItem = NHMobileNavigationItem;

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

@@ -0,0 +1,55 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-mobile-navigation-popup {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 99;
+  padding: 48px 0 32px;
+  background-color: var(--g-color-base-background);
+  border-radius: 0 0 var(--pc-border-radius, 24px) var(--pc-border-radius, 24px);
+  box-shadow: 0 3px 10px var(--g-color-base-generic);
+}
+
+.pc-addons-nh-mobile-navigation-popup__transition-enter {
+  transform: translateY(-30px);
+  opacity: 0;
+}
+
+.pc-addons-nh-mobile-navigation-popup__transition-enter-active {
+  transform: translateY(0);
+  opacity: 1;
+  transition: transform 0.4s, opacity 0.4s;
+}
+
+.pc-addons-nh-mobile-navigation-popup__transition-exit {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.pc-addons-nh-mobile-navigation-popup__transition-exit .pc-addons-nh-mobile-navigation-popup__container {
+  opacity: 0;
+}
+
+.pc-addons-nh-mobile-navigation-popup__transition-exit-active {
+  transform: translateY(-30px);
+  opacity: 0;
+  transition: transform 0.4s, opacity 0.4s;
+}
+
+.pc-addons-nh-mobile-navigation-popup__no-scroll {
+  overflow: hidden;
+}
+
+.pc-addons-nh-mobile-navigation-popup__container {
+  padding: 4px 48px 0;
+  overflow: scroll;
+  height: 100%;
+}
+
+@media (max-width: 576px) {
+  .pc-addons-nh-mobile-navigation-popup__container {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface MobileNavigationPopupProps {
+    isOpened: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    onMenuScroll: (scrollTop: number) => void;
+}
+export declare const NHMobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
+export {};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHMobileNavigationPopup = 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 uikit_1 = require("@gravity-ui/uikit");
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const react_transition_group_1 = require("react-transition-group");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('nh-mobile-navigation-popup');
+const TRANSITION_TIME = 400;
+const POPUP_MARGIN = 80;
+const HEADER_HEIGHT = 68;
+const NHMobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+    const [body, setBody] = (0, react_1.useState)();
+    const ref = (0, react_1.useRef)(null);
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(0);
+    const handleScroll = (0, react_1.useCallback)(() => {
+        var _a;
+        const containerScrollTop = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
+        if (typeof containerScrollTop !== 'undefined') {
+            onMenuScroll(containerScrollTop);
+        }
+    }, [onMenuScroll]);
+    (0, uikit_1.useBodyScrollLock)({ enabled: isOpened });
+    (0, react_1.useEffect)(() => {
+        setBody(document.body);
+        setContainerHeight((window === null || window === void 0 ? void 0 : window.innerHeight) - POPUP_MARGIN - HEADER_HEIGHT);
+        const element = ref.current;
+        if (element) {
+            element.addEventListener('scroll', handleScroll);
+        }
+        return () => {
+            if (element) {
+                element.removeEventListener('scroll', handleScroll);
+            }
+        };
+    }, [handleScroll, isOpened]);
+    if (!body) {
+        return null;
+    }
+    return react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpened, classNames: b('transition'), unmountOnExit: true, timeout: TRANSITION_TIME },
+        react_1.default.createElement(gravity_ui_page_constructor_1.OutsideClick, { className: b(), onOutsideClick: onClose },
+            react_1.default.createElement("div", { ref: ref, className: b('container'), style: { maxHeight: `${containerHeight}px` } }, children))), body);
+};
+exports.NHMobileNavigationPopup = NHMobileNavigationPopup;

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

@@ -0,0 +1,23 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-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));
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+@media (max-width: 768px) {
+  .pc-addons-nh-navigation {
+    display: none;
+  }
+}
+@media (max-width: 1081px) {
+  .pc-addons-nh-navigation {
+    display: none;
+  }
+}

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

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

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHNavigation = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const constants_1 = require("../../constants");
+const models_1 = require("../../models");
+const NHCompanyPopup_1 = require("../NHCompanyPopup/NHCompanyPopup");
+const NHInvestorPopup_1 = require("../NHInvestorPopup/NHInvestorPopup");
+const NHMediumPopup_1 = require("../NHMediumPopup/NHMediumPopup");
+const NHNavigationItem_1 = require("../NHNavigationItem/NHNavigationItem");
+const NHNavigationPopup_1 = require("../NHNavigationPopup/NHNavigationPopup");
+const NHProductsPopup_1 = require("../NHProductsPopup/NHProductsPopup");
+const NHResourcesPopup_1 = require("../NHResourcesPopup/NHResourcesPopup");
+const NHSolutionsPopup_1 = require("../NHSolutionsPopup/NHSolutionsPopup");
+const NHWhyPopup_1 = require("../NHWhyPopup/NHWhyPopup");
+const b = (0, cn_1.block)('nh-navigation');
+const tooltipPrefixId = 'navigation-item-key';
+const getPopupContent = (sectionData) => {
+    const { type, data } = sectionData;
+    switch (type) {
+        case models_1.NHNavigationItemType.NHMediumPopup:
+            return react_1.default.createElement(NHMediumPopup_1.NHMediumPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHProductsPopup:
+            return react_1.default.createElement(NHProductsPopup_1.NHProductsPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHSolutionsPopup:
+            return react_1.default.createElement(NHSolutionsPopup_1.NHSolutionsPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHWhyPopup:
+            return react_1.default.createElement(NHWhyPopup_1.NHWhyPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHResourcesPopup:
+            return react_1.default.createElement(NHResourcesPopup_1.NHResourcesPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHCompanyPopup:
+            return react_1.default.createElement(NHCompanyPopup_1.NHCompanyPopup, Object.assign({}, data));
+        case models_1.NHNavigationItemType.NHInvestorPopup:
+            return react_1.default.createElement(NHInvestorPopup_1.NHInvestorPopup, Object.assign({}, data));
+        default:
+            return null;
+    }
+};
+const NHNavigation = ({ data, headerRef, setupRouteChangeHandler }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(constants_1.NO_MENU_TAB_SELECTED);
+    const [pretendentActiveTab, setPretendentAciveTab] = (0, react_1.useState)(constants_1.NO_MENU_TAB_SELECTED);
+    const [previouslyFocusedElement, setPreviouslyFocusedElement] = (0, react_1.useState)(null);
+    const handleActiveTab = (0, react_1.useCallback)((currentIndex) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(currentIndex);
+    }, []);
+    const onEscapeKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Escape') {
+            setActiveTab(constants_1.NO_MENU_TAB_SELECTED);
+            setPretendentAciveTab(constants_1.NO_MENU_TAB_SELECTED);
+            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus({ preventScroll: true });
+        }
+    }, [previouslyFocusedElement]);
+    (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleActiveTab(constants_1.NO_MENU_TAB_SELECTED);
+    }), [setupRouteChangeHandler, handleActiveTab]);
+    (0, react_1.useEffect)(() => {
+        const timerId = setTimeout(() => {
+            setActiveTab(pretendentActiveTab);
+        }, constants_1.SWITCH_MENU_TAB_TIMEOUT);
+        return () => clearTimeout(timerId);
+    }, [activeTab, pretendentActiveTab]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', onEscapeKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onEscapeKeyDown);
+        };
+    }, [onEscapeKeyDown]);
+    return (react_1.default.createElement("nav", null,
+        react_1.default.createElement("ul", { className: b() }, data.map((item, i) => (react_1.default.createElement(NHNavigationItem_1.NHNavigationItem, { key: item.title, item: item, handleActiveTab: handleActiveTab, index: i, isActive: activeTab === i, tooltipId: `${tooltipPrefixId}-${i}` }, activeTab === i && item.type !== models_1.NHNavigationItemType.Link && (react_1.default.createElement(NHNavigationPopup_1.NHNavigationPopup, { headerRef: headerRef, id: `${tooltipPrefixId}-${i}` }, getPopupContent(item)))))))));
+};
+exports.NHNavigation = NHNavigation;

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

@@ -0,0 +1,66 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-nh-navigation-item {
+  white-space: nowrap;
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-nh-navigation-item:hover .pc-addons-nh-navigation-item__text {
+  background-color: rgb(245, 246, 247);
+}
+
+.pc-addons-nh-navigation-item_disable {
+  pointer-events: none;
+}
+
+.pc-addons-nh-navigation-item__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);
+}
+
+@media (max-width: 1248px) {
+  .pc-addons-nh-navigation-item__icon {
+    display: none;
+  }
+}
+.pc-addons-nh-navigation-item__text {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  padding: 8px;
+  border-radius: 8px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  color: var(--g-color-text-primary);
+  position: relative;
+}
+
+.pc-addons-nh-navigation-item__text_cursor_default {
+  cursor: default;
+}
+
+.pc-addons-nh-navigation-item:first-child .pc-addons-nh-navigation-item__text {
+  margin-left: 0;
+}
+
+@media (max-width: 1296px) {
+  .pc-addons-nh-navigation-item__popup {
+    --yc-popover-max-width: calc(100% - 32px);
+  }
+}

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

@@ -0,0 +1,12 @@
+import type { FC, ReactNode } from 'react';
+import { NHNavigationItemData } from '../../models';
+interface NavigationItemOwnProps {
+    index: number;
+    item: NHNavigationItemData;
+    isActive: boolean;
+    handleActiveTab: (currentIndex: number) => void;
+    children?: ReactNode;
+    tooltipId?: string;
+}
+export declare const NHNavigationItem: FC<NavigationItemOwnProps>;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHNavigationItem = 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 uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const constants_1 = require("../../constants");
+const route_change_1 = require("../../contexts/route-change");
+const models_1 = require("../../models");
+const ChevronDown_1 = require("../ChevronDown");
+const ChevronUp_1 = require("../ChevronUp");
+const b = (0, cn_1.block)('nh-navigation-item');
+const NHNavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
+    var _a, _b, _c, _d;
+    const setupRouteChangeHandler = (0, react_1.useContext)(route_change_1.RouteChangeHandlerContext);
+    const handleMouseEnter = (0, react_1.useCallback)(() => handleActiveTab(index), [handleActiveTab, index]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => handleActiveTab(constants_1.NO_MENU_TAB_SELECTED), [handleActiveTab]);
+    (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleMouseLeave();
+    }), [handleMouseLeave, setupRouteChangeHandler]);
+    if (item.type === models_1.NHNavigationItemType.Link) {
+        return (react_1.default.createElement("li", { key: item.title, className: b({ disable: !((_a = item.data) === null || _a === void 0 ? void 0 : _a.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+            react_1.default.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: (_b = item.data) === null || _b === void 0 ? void 0 : _b.url }, (0, gravity_ui_page_constructor_1.getLinkProps)(((_c = item.data) === null || _c === void 0 ? void 0 : _c.url) || '', undefined, (_d = item.data) === null || _d === void 0 ? void 0 : _d.target)), item.title),
+            children));
+    }
+    return (react_1.default.createElement("li", { key: item.title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        react_1.default.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId },
+            item.title,
+            react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: isActive ? ChevronUp_1.ChevronUp : ChevronDown_1.ChevronDown, size: 16 })),
+        children));
+};
+exports.NHNavigationItem = NHNavigationItem;

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

@@ -0,0 +1,13 @@
+.pc-addons-nh-navigation-popup {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 1248px;
+  width: 100%;
+  z-index: 10;
+}
+
+.pc-addons-nh-navigation-popup:focus {
+  outline: 0;
+}

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

@@ -0,0 +1,9 @@
+import type { RefObject } from 'react';
+import React from 'react';
+interface NavigationPopupProps {
+    headerRef?: RefObject<HTMLDivElement>;
+    children: React.ReactNode;
+    id?: string;
+}
+export declare const NHNavigationPopup: ({ headerRef, children, id }: NavigationPopupProps) => React.ReactPortal | null;
+export {};

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NHNavigationPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const FocusTrap_1 = require("../../../../utils/FocusTrap");
+const cn_1 = require("../../../../utils/cn");
+const b = (0, cn_1.block)('nh-navigation-popup');
+const NHNavigationPopup = ({ headerRef, children, id }) => {
+    return (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)
+        ? react_dom_1.default.createPortal(react_1.default.createElement(FocusTrap_1.FocusTrap, { enabled: true },
+            react_1.default.createElement("div", { 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: b(), id: id }, children)), headerRef.current)
+        : null;
+};
+exports.NHNavigationPopup = NHNavigationPopup;