@doyourjob/gravity-ui-page-constructor-addons 2.1.8

package/build/esm/components/Navigation/components/MobileNavigation/MobileNavigationItem/MobileNavigationItem.js

@@ -0,0 +1,41 @@
+import React, { Fragment, useCallback, useContext, useMemo, useState } from 'react';
+import { Foldable, ToggleArrow, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../utils/cn';
+import { LocationContext } from '../../../contexts/location';
+import { NavigationItemType, } from '../../../models';
+import './MobileNavigationItem.css';
+const b = block('mobile-navigation-item');
+export const MobileNavigationItem = ({ data }) => {
+    const { hostname } = useContext(LocationContext) || {};
+    const { type, link, title, links } = data;
+    const linkProps = link && getLinkProps(link === null || link === void 0 ? void 0 : link.url, hostname, link === null || link === void 0 ? void 0 : link.target);
+    const [isOpened, setIsOpened] = useState(false);
+    const toggleOpen = useCallback(() => {
+        setIsOpened(!isOpened);
+    }, [isOpened]);
+    const sectionItemsData = useMemo(() => !link && pickData(data), [data, link]);
+    return link ? (React.createElement("a", Object.assign({}, linkProps, { href: link.url, className: b({ type }) }), title)) : (React.createElement(Fragment, null,
+        React.createElement("div", { className: b({ opened: isOpened }), onClick: toggleOpen },
+            React.createElement("div", { className: b('text') }, title),
+            React.createElement("div", { className: b('arrow') },
+                React.createElement(ToggleArrow, { size: 12, type: "vertical", open: isOpened, iconType: "navigation" }))),
+        React.createElement(Foldable, { isOpened: isOpened }, sectionItemsData &&
+            sectionItemsData.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", { href: linkItem.url, className: b('list-item') }, linkItem.title))))), links === null || links === void 0 ? void 0 :
+                links.map((itemLink) => (React.createElement("a", { href: itemLink.url, className: b('list-link'), key: itemLink.url }, itemLink.text)))))))));
+};
+function pickData({ type, data }) {
+    if (type === NavigationItemType.LargePopup) {
+        return [
+            {
+                items: Object.values(data.categories).map(({ groups }) => ({
+                    title: groups[0].title,
+                    url: groups[0].url,
+                })),
+            },
+        ];
+    }
+    return data.groups;
+}

package/build/esm/components/Navigation/components/MobileNavigation/MobileNavigationPopup/MobileNavigationPopup.css

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

package/build/esm/components/Navigation/components/MobileNavigation/MobileNavigationPopup/MobileNavigationPopup.d.ts

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

package/build/esm/components/Navigation/components/MobileNavigation/MobileNavigationPopup/MobileNavigationPopup.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { OutsideClick } from '@doyourjob/gravity-ui-page-constructor';
+import { useBodyScrollLock } from '@gravity-ui/uikit';
+import ReactDOM from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+import { block } from '../../../../../utils/cn';
+import './MobileNavigationPopup.css';
+const b = block('mobile-navigation-popup');
+const TRANSITION_TIME = 400;
+const POPUP_MARGIN = 80;
+const HEADER_HEIGHT = 68;
+export const MobileNavigationPopup = ({ isOpened, onClose, children, onMenuScroll, }) => {
+    const [body, setBody] = useState();
+    const ref = useRef(null);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const handleScroll = 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]);
+    useBodyScrollLock({ enabled: isOpened });
+    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 ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpened, classNames: b('transition'), unmountOnExit: true, timeout: TRANSITION_TIME },
+        React.createElement(OutsideClick, { className: b(), onOutsideClick: onClose },
+            React.createElement("div", { ref: ref, className: b('container'), style: { maxHeight: `${containerHeight}px` } }, children))), body);
+};

package/build/esm/components/Navigation/components/Navigation/Navigation.css

@@ -0,0 +1,28 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-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;
+  margin-left: 2px;
+}
+
+@media (max-width: 768px) {
+  .pc-addons-navigation {
+    display: none;
+  }
+}
+.pc-addons-navigation__popup_medium {
+  padding-left: 4px;
+  padding-right: 16px;
+}
+
+@media (max-width: 769px) {
+  .pc-addons-navigation {
+    display: none;
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { RefObject } from 'react';
+import React from 'react';
+import { NavigationSectionData, SetupRouteChangeHandler } from '../../models';
+import './Navigation.css';
+interface NavigationProps {
+    data: NavigationSectionData[];
+    withBackground: boolean;
+    handleOpenPopup: () => void;
+    handleClosePopup: () => void;
+    headerRef?: RefObject<HTMLDivElement>;
+    setupRouteChangeHandler?: SetupRouteChangeHandler;
+}
+export declare const Navigation: ({ data, headerRef, handleOpenPopup, handleClosePopup, withBackground, setupRouteChangeHandler, }: NavigationProps) => React.JSX.Element;
+export {};

package/build/esm/components/Navigation/components/Navigation/Navigation.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { block } from '../../../../utils/cn';
+import { NO_MENU_TAB_SELECTED, SWITCH_MENU_TAB_TIMEOUT } from '../../constants';
+import { NavigationSectionContext } from '../../contexts/navigation-section';
+import { NavigationItemType, } from '../../models';
+import { LargePopup } from '../popups/LargePopup/LargePopup';
+import { MediumPopup } from '../popups/MediumPopup/MediumPopup';
+import { MediumPopupWithCategories } from '../popups/MediumPopupWithCategories/MediumPopupWithCategories';
+import { MediumPopupWithFloors } from '../popups/MediumPopupWithFloors/MediumPopupWithFloors';
+import { NavigationItem } from './NavigationItem/NavigationItem';
+import { NavigationPopup } from './NavigationPopup/NavigationPopup';
+import './Navigation.css';
+const b = block('navigation');
+const tooltipPrefixId = 'navigation-item-key';
+const getPopupContent = (sectionData) => {
+    const { type, data } = sectionData;
+    switch (type) {
+        case NavigationItemType.LargePopup:
+            return React.createElement(LargePopup, Object.assign({}, sectionData));
+        case NavigationItemType.MediumPopup:
+            return React.createElement(MediumPopup, { data: data });
+        case NavigationItemType.MediumPopupWithCategories:
+            return React.createElement(MediumPopupWithCategories, { data: data });
+        case NavigationItemType.MediumPopupWithFloors:
+            return React.createElement(MediumPopupWithFloors, { data: data });
+        default:
+            return null;
+    }
+};
+export const Navigation = ({ data, headerRef, handleOpenPopup, handleClosePopup, withBackground, setupRouteChangeHandler, }) => {
+    const [activeTab, setActiveTab] = useState(NO_MENU_TAB_SELECTED);
+    const [pretendentActiveTab, setPretendentAciveTab] = useState(NO_MENU_TAB_SELECTED);
+    const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
+    const handleActiveTab = useCallback((currentIndex) => {
+        setPreviouslyFocusedElement(document.activeElement);
+        setPretendentAciveTab(currentIndex);
+    }, []);
+    const onEscapeKeyDown = useCallback((event) => {
+        if (event.key === 'Escape') {
+            setActiveTab(NO_MENU_TAB_SELECTED);
+            setPretendentAciveTab(NO_MENU_TAB_SELECTED);
+            previouslyFocusedElement === null || previouslyFocusedElement === void 0 ? void 0 : previouslyFocusedElement.focus();
+        }
+    }, [previouslyFocusedElement]);
+    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleActiveTab(NO_MENU_TAB_SELECTED);
+    }), [setupRouteChangeHandler, handleActiveTab]);
+    useEffect(() => {
+        const timerId = setTimeout(() => {
+            setActiveTab(pretendentActiveTab);
+        }, SWITCH_MENU_TAB_TIMEOUT);
+        return () => clearTimeout(timerId);
+    }, [activeTab, pretendentActiveTab]);
+    useEffect(() => {
+        document.addEventListener('keydown', onEscapeKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onEscapeKeyDown);
+        };
+    }, [onEscapeKeyDown]);
+    return (React.createElement("nav", null,
+        React.createElement("ul", { className: b() }, data.map((item, i) => {
+            const { type, section } = item;
+            const isMediumPopup = type === NavigationItemType.MediumPopup ||
+                type === NavigationItemType.MediumPopupWithCategories;
+            const popupClassName = isMediumPopup ? b('popup', { medium: true }) : undefined;
+            const uniqId = `${tooltipPrefixId}-${i}`;
+            return (React.createElement(NavigationSectionContext.Provider, { value: section, key: item.title },
+                React.createElement(NavigationItem, { item: item, handleActiveTab: handleActiveTab, handleClosePopup: handleClosePopup, handleOpenPopup: handleOpenPopup, index: i, isActive: activeTab === i, tooltipId: uniqId }, activeTab === i && type !== NavigationItemType.Link && (React.createElement(NavigationPopup, { withBackground: withBackground, headerRef: headerRef, className: popupClassName, id: uniqId }, getPopupContent(item))))));
+        }))));
+};

package/build/esm/components/Navigation/components/Navigation/NavigationItem/NavigationItem.css

@@ -0,0 +1,81 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-navigation-item {
+  white-space: nowrap;
+  color: var(--g-color-text-primary);
+}
+
+.pc-addons-navigation-item:hover .pc-addons-navigation-item__text {
+  color: var(--g-color-text-link);
+}
+
+.pc-addons-navigation-item_disable {
+  pointer-events: none;
+}
+
+.pc-addons-navigation-item__popup {
+  --yc-popup-border-width: 0;
+  --yc-popup-border-color: none;
+  border-radius: var(--pc-addons-navigation-border-radius);
+  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-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;
+  display: block;
+  margin: 0 12px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid transparent;
+  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 {
+  color: var(--g-color-text-link);
+  border-color: var(--g-color-text-link);
+}
+
+.pc-addons-navigation-item__text_cursor_default {
+  cursor: default;
+}
+
+.pc-addons-navigation-item:first-child .pc-addons-navigation-item__text {
+  margin-left: 0;
+}
+
+@media (max-width: 1296px) {
+  .pc-addons-navigation-item__popup {
+    --yc-popover-max-width: calc(100% - 32px);
+  }
+}

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

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

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

@@ -0,0 +1,53 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import { getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { useIsCurrentPage } from '../../../../../hooks/useIsCurrentPage';
+import { block } from '../../../../../utils/cn';
+import { NO_MENU_TAB_SELECTED } from '../../../constants';
+import { AnalyticsContext } from '../../../contexts/analytics';
+import { LocationContext } from '../../../contexts/location';
+import { RouteChangeHandlerContext } from '../../../contexts/route-change';
+import { AnalyticsEventType, NavigationItemType } from '../../../models';
+import './NavigationItem.css';
+const b = block('navigation-item');
+export const NavigationItem = ({ item, isActive, handleActiveTab, handleOpenPopup, handleClosePopup, index, children, tooltipId, }) => {
+    const { type, title, link, section } = item;
+    const setupRouteChangeHandler = useContext(RouteChangeHandlerContext);
+    const { hostname } = useContext(LocationContext);
+    const linkProps = link && getLinkProps(link === null || link === void 0 ? void 0 : link.url, hostname, link === null || link === void 0 ? void 0 : link.target);
+    const isPopupExist = type === NavigationItemType.LargePopup ||
+        type === NavigationItemType.MediumPopup ||
+        type === NavigationItemType.MediumPopupWithCategories;
+    const { sendEvents } = useContext(AnalyticsContext) || {};
+    const handleMouseEnter = useCallback(() => {
+        handleActiveTab(index);
+        if (isPopupExist) {
+            handleOpenPopup();
+        }
+    }, [handleActiveTab, handleOpenPopup, index, isPopupExist]);
+    const handleMouseLeave = useCallback(() => {
+        if (isPopupExist) {
+            handleClosePopup();
+        }
+        handleActiveTab(NO_MENU_TAB_SELECTED);
+    }, [handleActiveTab, handleClosePopup, isPopupExist]);
+    const handleOnClick = useCallback(() => {
+        sendEvents === null || sendEvents === void 0 ? void 0 : sendEvents([
+            {
+                name: AnalyticsEventType.PopupItemClick,
+                params: { url: link === null || link === void 0 ? void 0 : link.url, section },
+            },
+        ]);
+    }, [link === null || link === void 0 ? void 0 : link.url, section, sendEvents]);
+    const isCurrentPage = useIsCurrentPage(link === null || link === void 0 ? void 0 : link.url);
+    useEffect(() => setupRouteChangeHandler === null || setupRouteChangeHandler === void 0 ? void 0 : setupRouteChangeHandler(() => {
+        handleMouseLeave();
+    }), [handleMouseLeave, setupRouteChangeHandler]);
+    if (type === NavigationItemType.Link) {
+        return (React.createElement("li", { key: title, className: b({ disable: !(link === null || link === void 0 ? void 0 : link.url) }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+            React.createElement("a", Object.assign({ className: b('text', { active: isActive }), href: link === null || link === void 0 ? void 0 : link.url }, linkProps, { onClick: handleOnClick, "aria-current": isCurrentPage ? 'page' : undefined }), title),
+            children));
+    }
+    return (React.createElement("li", { key: title, className: b({}), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+        React.createElement("button", { className: b('text', { active: isActive, cursor: 'default' }), onClick: handleMouseEnter, "aria-expanded": isActive, "aria-controls": tooltipId }, title),
+        children));
+};

package/build/esm/components/Navigation/components/Navigation/NavigationItemsList/NavigationItemsList.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationItem } from '../../../models';
+interface NavigationItemsListProps {
+    items: NavigationItem[];
+    section?: string;
+    sizes?: GridColumnSizesType;
+    itemClassName?: string;
+    className?: string;
+}
+export declare const NavigationItemsList: FC<NavigationItemsListProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Row } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationPopupItem } from '../NavigationPopupItem/NavigationPopupItem';
+export const NavigationItemsList = ({ items, itemClassName, className, sizes, }) => {
+    return (React.createElement(Row, { className: className }, items.map((item) => (React.createElement(NavigationPopupItem, Object.assign({}, item, { sizes: sizes, className: itemClassName, key: item.slug, hover: true }))))));
+};

package/build/esm/components/Navigation/components/Navigation/NavigationPopup/NavigationPopup.css

@@ -0,0 +1,20 @@
+.pc-addons-navigation-popup {
+  width: calc(100% + 64px);
+  margin: 0 -32px;
+  padding: 20px 24px 24px 12px;
+  border-radius: var(--pc-addons-navigation-border-radius);
+  background: var(--g-color-base-float);
+  z-index: 10;
+}
+
+.pc-addons-navigation-popup:not(.pc-addons-navigation-popup_with-background) {
+  box-shadow: 0 4px 24px var(--g-color-base-generic), 0 2px 8px var(--g-color-base-generic);
+}
+
+.pc-addons-navigation-popup__grid-container {
+  padding: 0;
+}
+
+.pc-addons-navigation-popup:focus {
+  outline: 0;
+}

package/build/esm/components/Navigation/components/Navigation/NavigationPopup/NavigationPopup.d.ts

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

package/build/esm/components/Navigation/components/Navigation/NavigationPopup/NavigationPopup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Grid } from '@doyourjob/gravity-ui-page-constructor';
+import ReactDOM from 'react-dom';
+import { FocusTrap } from '../../../../../utils/FocusTrap';
+import { block } from '../../../../../utils/cn';
+import './NavigationPopup.css';
+const b = block('navigation-popup');
+export const NavigationPopup = ({ withBackground, headerRef, children, className, id, }) => {
+    return (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)
+        ? ReactDOM.createPortal(React.createElement(FocusTrap, { enabled: true },
+            React.createElement("div", { 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: b({ ['with-background']: withBackground }, className), id: id },
+                React.createElement(Grid, { containerClass: b('grid-container') }, children))), headerRef.current)
+        : null;
+};

package/build/esm/components/Navigation/components/Navigation/NavigationPopupItem/NavigationPopupItem.css

@@ -0,0 +1,111 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-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 {
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  border-radius: var(--g-border-radius-xl);
+  height: 100%;
+}
+
+.utilityfocus .pc-addons-navigation-popup-item__content:focus {
+  outline: 2px solid #ffdb4d;
+}
+
+.pc-addons-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) {
+  outline: 0;
+}
+
+.pc-addons-navigation-popup-item__content_padding_default {
+  padding: 12px;
+}
+
+.pc-addons-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 {
+  color: inherit;
+}
+
+.pc-addons-navigation-popup-item__content_hover:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-navigation-popup-item__content_disable {
+  pointer-events: none;
+}
+
+.pc-addons-navigation-popup-item__icon {
+  color: var(--g-color-base-brand);
+}
+
+.pc-addons-navigation-popup-item__icon-container {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pc-addons-navigation-popup-item__container_with-margin {
+  margin-left: 28px;
+}
+
+.pc-addons-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;
+  margin-top: 2px;
+  color: var(--g-color-text-secondary);
+}
+
+.pc-addons-navigation-popup-item__tag {
+  position: relative;
+  top: -2px;
+}
+
+.pc-addons-navigation-popup-item__image {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+
+.pc-addons-navigation-popup-item__image_size_m {
+  width: 18px;
+  height: 18px;
+}
+
+.pc-addons-navigation-popup-item__image_size_xm {
+  width: 16px;
+  height: 16px;
+}
+
+.pc-addons-navigation-popup-item__image_size_s {
+  width: 14px;
+  height: 14px;
+}
+
+.pc-addons-navigation-popup-item__image-container {
+  display: flex;
+  justify-content: center;
+  min-width: 20px;
+  margin-right: 8px;
+}

package/build/esm/components/Navigation/components/Navigation/NavigationPopupItem/NavigationPopupItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationItem } from '../../../models';
+import './NavigationPopupItem.css';
+export interface NavigationPopupItemProps extends Partial<NavigationItem> {
+    hover?: boolean;
+    sizes?: GridColumnSizesType;
+    className?: string;
+    padding?: 'default' | 's';
+    imageSize?: 's' | 'xm' | 'm';
+    target?: string;
+}
+export declare const NavigationPopupItem: (props: NavigationPopupItemProps) => React.JSX.Element;

package/build/esm/components/Navigation/components/Navigation/NavigationPopupItem/NavigationPopupItem.js

@@ -0,0 +1,42 @@
+import React, { useCallback, useContext } from 'react';
+import { Col, HTML, Image, getLinkProps } from '@doyourjob/gravity-ui-page-constructor';
+import { Icon } from '@gravity-ui/uikit';
+import { useIsCurrentPage } from '../../../../../hooks/useIsCurrentPage';
+import { block } from '../../../../../utils/cn';
+import { DefaultCategorizedItemSizes } from '../../../constants';
+import { AnalyticsContext } from '../../../contexts/analytics';
+import { LocationContext } from '../../../contexts/location';
+import { NavigationSectionContext } from '../../../contexts/navigation-section';
+import { AnalyticsEventType } from '../../../models';
+import { NavigationTag } from '../../Tag/Tag';
+import './NavigationPopupItem.css';
+const b = block('navigation-popup-item');
+export const NavigationPopupItem = (props) => {
+    const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = DefaultCategorizedItemSizes, padding = 'default', } = props;
+    const navigationSection = useContext(NavigationSectionContext);
+    const { sendEvents } = useContext(AnalyticsContext) || {};
+    const { hostname } = useContext(LocationContext) || {};
+    const linkProps = url ? getLinkProps(url, hostname, target) : {};
+    const handleOnClick = useCallback(() => {
+        sendEvents === null || sendEvents === void 0 ? void 0 : sendEvents([
+            {
+                name: AnalyticsEventType.PopupItemClick,
+                params: { url, section: navigationSection },
+            },
+        ]);
+    }, [sendEvents, navigationSection, url]);
+    const navigationTag = tag && React.createElement(NavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
+    const isCurrentPage = useIsCurrentPage(url);
+    return (React.createElement(Col, { className: b(null, className), sizes: sizes },
+        React.createElement("a", Object.assign({ className: b('content', { hover, padding, disable: !url }), href: url }, linkProps, { onClick: handleOnClick, "aria-current": isCurrentPage ? 'page' : undefined }),
+            icon && (React.createElement("div", { className: b('icon-container') },
+                React.createElement(Icon, { className: b('icon'), data: icon, size: 16 }))),
+            image && (React.createElement("div", { className: b('image-container') },
+                React.createElement(Image, { className: b('image', { size: imageSize }), src: image }))),
+            React.createElement("div", { className: b('container', { 'with-margin': Boolean(icon) }) },
+                React.createElement("div", { className: b('title-tag-wrapper') },
+                    React.createElement("span", { className: b('title') }, title),
+                    "\u00A0",
+                    navigationTag),
+                description && React.createElement(HTML, { className: b('description') }, description)))));
+};