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

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/{MobileNavigationItem/MobileNavigationItem.js → NHMobileNavigationItem/NHMobileNavigationItem.js}

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavigationItem = void 0;
+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)('mobile-navigation-item');
-const MobileNavigationItem = (props) => {
+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);
@@ -20,11 +20,11 @@ const MobileNavigationItem = (props) => {
                 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 },
+            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.MobileNavigationItem = MobileNavigationItem;
+exports.NHMobileNavigationItem = NHMobileNavigationItem;

package/build/{esm/components/NewHeader/components/MobileNavigationPopup/MobileNavigationPopup.css → cjs/components/NewHeader/components/NHMobileNavigationPopup/NHMobileNavigationPopup.css}

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

package/build/cjs/components/NewHeader/components/{MobileNavigationPopup/MobileNavigationPopup.d.ts → NHMobileNavigationPopup/NHMobileNavigationPopup.d.ts}

@@ -5,5 +5,5 @@ interface MobileNavigationPopupProps {
     children: React.ReactNode;
     onMenuScroll: (scrollTop: number) => void;
 }
-export declare const MobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
+export declare const NHMobileNavigationPopup: ({ isOpened, onClose, children, onMenuScroll, }: MobileNavigationPopupProps) => React.ReactPortal | null;
 export {};

package/build/cjs/components/NewHeader/components/{MobileNavigationPopup/MobileNavigationPopup.js → NHMobileNavigationPopup/NHMobileNavigationPopup.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileNavigationPopup = void 0;
+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");
@@ -8,11 +8,11 @@ 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)('mobile-navigation-popup');
+const b = (0, cn_1.block)('nh-mobile-navigation-popup');
 const TRANSITION_TIME = 400;
 const POPUP_MARGIN = 80;
 const HEADER_HEIGHT = 68;
-const MobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+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);
@@ -44,4 +44,4 @@ const MobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) =
         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.MobileNavigationPopup = MobileNavigationPopup;
+exports.NHMobileNavigationPopup = NHMobileNavigationPopup;

package/build/cjs/components/NewHeader/components/{Navigation/Navigation.css → NHNavigation/NHNavigation.css}

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-navigation {
+.pc-addons-nh-navigation {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -8,16 +8,16 @@ unpredictable css rules order in build */
   line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
   display: flex;
   align-items: center;
-  margin-left: 2px;
+  gap: 20px;
 }
 
 @media (max-width: 768px) {
-  .pc-addons-navigation {
+  .pc-addons-nh-navigation {
     display: none;
   }
 }
 @media (max-width: 769px) {
-  .pc-addons-navigation {
+  .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/{esm/components/NewHeader/components/NavigationItem/NavigationItem.css → cjs/components/NewHeader/components/NHNavigationItem/NHNavigationItem.css}

@@ -1,19 +1,19 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-navigation-item {
+.pc-addons-nh-navigation-item {
   white-space: nowrap;
   color: var(--g-color-text-primary);
 }
 
-.pc-addons-navigation-item:hover .pc-addons-navigation-item__text {
+.pc-addons-nh-navigation-item:hover .pc-addons-nh-navigation-item__text {
   color: var(--g-color-text-link);
 }
 
-.pc-addons-navigation-item_disable {
+.pc-addons-nh-navigation-item_disable {
   pointer-events: none;
 }
 
-.pc-addons-navigation-item__popup {
+.pc-addons-nh-navigation-item__popup {
   --yc-popup-border-width: 0;
   --yc-popup-border-color: none;
   border-radius: var(--pc-border-radius, 24px);
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
   box-shadow: 0 4px 24px var(--g-color-base-generic-hover), 0 2px 8px var(--g-color-base-generic-hover);
 }
 
-.pc-addons-navigation-item__text {
+.pc-addons-nh-navigation-item__text {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -37,45 +37,27 @@ unpredictable css rules order in build */
   cursor: pointer;
   color: inherit;
   text-decoration: none;
-  display: block;
-  margin: 0 12px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid transparent;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   color: var(--g-color-text-primary);
   position: relative;
 }
 
-.pc-addons-navigation-item__text:focus::before {
-  content: "";
-  width: 100%;
-  height: calc(100% - 12px - 2px);
-  position: absolute;
-  outline: 2px solid var(--g-color-line-focus);
-  border-radius: var(--g-focus-border-radius);
-  left: 0;
-  right: 0;
-  top: 2px;
-}
-
-.pc-addons-navigation-item__text:focus:not(:focus-visible)::before {
-  display: none;
-}
-
-.pc-addons-navigation-item__text_active {
+.pc-addons-nh-navigation-item__text_active {
   color: var(--g-color-text-link);
-  border-color: var(--g-color-text-link);
 }
 
-.pc-addons-navigation-item__text_cursor_default {
+.pc-addons-nh-navigation-item__text_cursor_default {
   cursor: default;
 }
 
-.pc-addons-navigation-item:first-child .pc-addons-navigation-item__text {
+.pc-addons-nh-navigation-item:first-child .pc-addons-nh-navigation-item__text {
   margin-left: 0;
 }
 
 @media (max-width: 1296px) {
-  .pc-addons-navigation-item__popup {
+  .pc-addons-nh-navigation-item__popup {
     --yc-popover-max-width: calc(100% - 32px);
   }
 }

package/build/cjs/components/NewHeader/components/{NavigationItem/NavigationItem.d.ts → NHNavigationItem/NHNavigationItem.d.ts}

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

package/build/cjs/components/NewHeader/components/{NavigationItem/NavigationItem.js → NHNavigationItem/NHNavigationItem.js}

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationItem = void 0;
+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 icons_1 = require("@gravity-ui/icons");
+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 b = (0, cn_1.block)('navigation-item');
-const NavigationItem = ({ item, isActive, handleActiveTab, index, children, tooltipId, }) => {
+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]);
@@ -17,13 +19,15 @@ const NavigationItem = ({ item, isActive, handleActiveTab, index, children, tool
     (0, react_1.useEffect)(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
         handleMouseLeave();
     }), [handleMouseLeave, setupRouteChangeHandler]);
-    if (item.type === models_1.NavigationItemType.Link) {
+    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("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, { data: isActive ? icons_1.ChevronUp : icons_1.ChevronDown, size: 14 })),
         children));
 };
-exports.NavigationItem = NavigationItem;
+exports.NHNavigationItem = NHNavigationItem;

package/build/cjs/components/NewHeader/components/{NavigationPopup/NavigationPopup.css → NHNavigationPopup/NHNavigationPopup.css}

@@ -1,10 +1,10 @@
-.pc-addons-navigation-popup {
+.pc-addons-nh-navigation-popup {
   position: absolute;
   margin: 0 32px;
   width: calc(100% - 64px);
   z-index: 10;
 }
 
-.pc-addons-navigation-popup:focus {
+.pc-addons-nh-navigation-popup:focus {
   outline: 0;
 }

package/build/cjs/components/NewHeader/components/{NavigationPopup/NavigationPopup.d.ts → NHNavigationPopup/NHNavigationPopup.d.ts}

@@ -5,5 +5,5 @@ interface NavigationPopupProps {
     children: React.ReactNode;
     id?: string;
 }
-export declare const NavigationPopup: ({ headerRef, children, id }: NavigationPopupProps) => React.ReactPortal | null;
+export declare const NHNavigationPopup: ({ headerRef, children, id }: NavigationPopupProps) => React.ReactPortal | null;
 export {};

package/build/cjs/components/NewHeader/components/{NavigationPopup/NavigationPopup.js → NHNavigationPopup/NHNavigationPopup.js}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavigationPopup = void 0;
+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)('navigation-popup');
-const NavigationPopup = ({ headerRef, children, id }) => {
+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", { 
@@ -15,4 +15,4 @@ const NavigationPopup = ({ headerRef, children, id }) => {
                 tabIndex: 0, className: b(), id: id }, children)), headerRef.current)
         : null;
 };
-exports.NavigationPopup = NavigationPopup;
+exports.NHNavigationPopup = NHNavigationPopup;

package/build/cjs/components/NewHeader/components/{PopupItem/PopupItem.css → NHPopupItem/NHPopupItem.css}

@@ -1,12 +1,12 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-addons-navigation-popup-item {
+.pc-addons-nh-navigation-popup-item {
   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-bottom: 2px;
 }
 
-.pc-addons-navigation-popup-item__content {
+.pc-addons-nh-navigation-popup-item__content {
   outline: none;
   color: inherit;
   text-decoration: none;
@@ -15,48 +15,44 @@ unpredictable css rules order in build */
   height: 100%;
 }
 
-.utilityfocus .pc-addons-navigation-popup-item__content:focus {
+.utilityfocus .pc-addons-nh-navigation-popup-item__content:focus {
   outline: 2px solid #ffdb4d;
 }
 
-.pc-addons-navigation-popup-item__content:focus {
+.pc-addons-nh-navigation-popup-item__content:focus {
   outline: 2px solid var(--g-color-line-focus);
   outline-offset: -2px;
 }
 
-.pc-addons-navigation-popup-item__content:focus:not(:focus-visible) {
+.pc-addons-nh-navigation-popup-item__content:focus:not(:focus-visible) {
   outline: 0;
 }
 
-.pc-addons-navigation-popup-item__content_padding_default {
+.pc-addons-nh-navigation-popup-item__content_padding_default {
   padding: 12px;
 }
 
-.pc-addons-navigation-popup-item__content_padding_s {
+.pc-addons-nh-navigation-popup-item__content_padding_s {
   padding: 6px 12px;
 }
 
-.pc-addons-navigation-popup-item__content:hover, .pc-addons-navigation-popup-item__content:active {
-  color: var(--g-color-base-brand);
-}
-
-.pc-addons-navigation-popup-item__content_hover:hover, .pc-addons-navigation-popup-item__content_hover:active {
+.pc-addons-nh-navigation-popup-item__content_hover:hover, .pc-addons-nh-navigation-popup-item__content_hover:active {
   color: inherit;
 }
 
-.pc-addons-navigation-popup-item__content_hover:hover {
+.pc-addons-nh-navigation-popup-item__content_hover:hover {
   background-color: var(--g-color-base-simple-hover);
 }
 
-.pc-addons-navigation-popup-item__content_disable {
+.pc-addons-nh-navigation-popup-item__content_disable {
   pointer-events: none;
 }
 
-.pc-addons-navigation-popup-item__icon {
+.pc-addons-nh-navigation-popup-item__icon {
   color: var(--g-color-base-brand);
 }
 
-.pc-addons-navigation-popup-item__icon-container {
+.pc-addons-nh-navigation-popup-item__icon-container {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -65,11 +61,11 @@ unpredictable css rules order in build */
   align-items: center;
 }
 
-.pc-addons-navigation-popup-item__container_with-margin {
+.pc-addons-nh-navigation-popup-item__container_with-margin {
   margin-left: 28px;
 }
 
-.pc-addons-navigation-popup-item__description {
+.pc-addons-nh-navigation-popup-item__description {
   font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
   line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
   display: block;
@@ -77,33 +73,33 @@ unpredictable css rules order in build */
   color: var(--g-color-text-secondary);
 }
 
-.pc-addons-navigation-popup-item__tag {
+.pc-addons-nh-navigation-popup-item__tag {
   position: relative;
   top: -2px;
 }
 
-.pc-addons-navigation-popup-item__image {
+.pc-addons-nh-navigation-popup-item__image {
   display: block;
   position: relative;
   top: 2px;
 }
 
-.pc-addons-navigation-popup-item__image_size_m {
+.pc-addons-nh-navigation-popup-item__image_size_m {
   width: 18px;
   height: 18px;
 }
 
-.pc-addons-navigation-popup-item__image_size_xm {
+.pc-addons-nh-navigation-popup-item__image_size_xm {
   width: 16px;
   height: 16px;
 }
 
-.pc-addons-navigation-popup-item__image_size_s {
+.pc-addons-nh-navigation-popup-item__image_size_s {
   width: 14px;
   height: 14px;
 }
 
-.pc-addons-navigation-popup-item__image-container {
+.pc-addons-nh-navigation-popup-item__image-container {
   display: flex;
   justify-content: center;
   min-width: 20px;

package/build/cjs/components/NewHeader/components/{PopupItem/PopupItem.d.ts → NHPopupItem/NHPopupItem.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
-import { PopupItemData } from '../../models';
-export interface PopupItemProps extends Partial<PopupItemData> {
+import { NHPopupItemData } from '../../models';
+export interface NHPopupItemProps extends Partial<NHPopupItemData> {
     hover?: boolean;
     sizes?: GridColumnSizesType;
     className?: string;
@@ -9,4 +9,4 @@ export interface PopupItemProps extends Partial<PopupItemData> {
     imageSize?: 's' | 'xm' | 'm';
     target?: string;
 }
-export declare const PopupItem: (props: PopupItemProps) => React.JSX.Element;
+export declare const NHPopupItem: (props: NHPopupItemProps) => React.JSX.Element;

package/build/cjs/components/NewHeader/components/{PopupItem/PopupItem.js → NHPopupItem/NHPopupItem.js}

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupItem = void 0;
+exports.NHPopupItem = 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 uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn");
 const constants_1 = require("../../constants");
-const Tag_1 = require("../Tag/Tag");
-const b = (0, cn_1.block)('navigation-popup-item');
-const PopupItem = (props) => {
+const NHTag_1 = require("../NHTag/NHTag");
+const b = (0, cn_1.block)('nh-navigation-popup-item');
+const NHPopupItem = (props) => {
     const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = constants_1.DefaultCategorizedItemSizes, padding = 'default', } = props;
-    const navigationTag = tag && react_1.default.createElement(Tag_1.NavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
+    const navigationTag = tag && react_1.default.createElement(NHTag_1.NHNavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
     return (react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b(null, className), sizes: sizes },
         react_1.default.createElement("a", Object.assign({ className: b('content', { hover, padding, disable: !url }), href: url }, (0, gravity_ui_page_constructor_1.getLinkProps)(url || '', undefined, target)),
             icon && (react_1.default.createElement("div", { className: b('icon-container') },
@@ -25,4 +25,4 @@ const PopupItem = (props) => {
                     navigationTag),
                 description && react_1.default.createElement(gravity_ui_page_constructor_1.HTML, { className: b('description') }, description)))));
 };
-exports.PopupItem = PopupItem;
+exports.NHPopupItem = NHPopupItem;