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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationItem } from '../../../models';
+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/cjs/components/Navigation/components/Navigation/NavigationPopupItem/NavigationPopupItem.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationPopupItem = 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 useIsCurrentPage_1 = require("../../../../../hooks/useIsCurrentPage");
+const cn_1 = require("../../../../../utils/cn");
+const constants_1 = require("../../../constants");
+const analytics_1 = require("../../../contexts/analytics");
+const location_1 = require("../../../contexts/location");
+const navigation_section_1 = require("../../../contexts/navigation-section");
+const models_1 = require("../../../models");
+const Tag_1 = require("../../Tag/Tag");
+const b = (0, cn_1.block)('navigation-popup-item');
+const NavigationPopupItem = (props) => {
+    const { icon, url, target, title, tag, description, image, imageSize = 'm', hover, className, sizes = constants_1.DefaultCategorizedItemSizes, padding = 'default', } = props;
+    const navigationSection = (0, react_1.useContext)(navigation_section_1.NavigationSectionContext);
+    const { sendEvents } = (0, react_1.useContext)(analytics_1.AnalyticsContext) || {};
+    const { hostname } = (0, react_1.useContext)(location_1.LocationContext) || {};
+    const linkProps = url ? (0, gravity_ui_page_constructor_1.getLinkProps)(url, hostname, target) : {};
+    const handleOnClick = (0, react_1.useCallback)(() => {
+        sendEvents === null || sendEvents === void 0 ? void 0 : sendEvents([
+            {
+                name: models_1.AnalyticsEventType.PopupItemClick,
+                params: { url, section: navigationSection },
+            },
+        ]);
+    }, [sendEvents, navigationSection, url]);
+    const navigationTag = tag && react_1.default.createElement(Tag_1.NavigationTag, Object.assign({ className: b('tag'), size: "s" }, tag));
+    const isCurrentPage = (0, useIsCurrentPage_1.useIsCurrentPage)(url);
+    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 }, linkProps, { onClick: handleOnClick, "aria-current": isCurrentPage ? 'page' : undefined }),
+            icon && (react_1.default.createElement("div", { className: b('icon-container') },
+                react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icon, size: 16 }))),
+            image && (react_1.default.createElement("div", { className: b('image-container') },
+                react_1.default.createElement(gravity_ui_page_constructor_1.Image, { className: b('image', { size: imageSize }), src: image }))),
+            react_1.default.createElement("div", { className: b('container', { 'with-margin': Boolean(icon) }) },
+                react_1.default.createElement("div", { className: b('title-tag-wrapper') },
+                    react_1.default.createElement("span", { className: b('title') }, title),
+                    "\u00A0",
+                    navigationTag),
+                description && react_1.default.createElement(gravity_ui_page_constructor_1.HTML, { className: b('description') }, description)))));
+};
+exports.NavigationPopupItem = NavigationPopupItem;

package/build/cjs/components/Navigation/components/SearchNotFound/SearchNotFound.css

@@ -0,0 +1,7 @@
+.pc-addons-search-not-found .yfm {
+  display: block;
+}
+
+.pc-addons-search-not-found__title {
+  width: 100%;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TextSize } from '@doyourjob/gravity-ui-page-constructor';
+interface SearchNotFoundProps {
+    notFoundDescription?: string;
+    size?: TextSize;
+}
+export declare const SearchNotFound: (props: SearchNotFoundProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchNotFound = 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 i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, cn_1.block)('search-not-found');
+const SearchNotFound = (props) => {
+    const { notFoundDescription, size = 's' } = props;
+    const title = {
+        text: (0, i18n_1.default)('search-not-found-title'),
+        textSize: size,
+    };
+    return (react_1.default.createElement(gravity_ui_page_constructor_1.Row, { className: b() },
+        react_1.default.createElement(gravity_ui_page_constructor_1.Title, { colSizes: {
+                [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 9,
+                [gravity_ui_page_constructor_1.GridColumnSize.All]: 12,
+            }, title: title, subtitle: notFoundDescription || (0, i18n_1.default)('search-not-found-description'), className: b('title') })));
+};
+exports.SearchNotFound = SearchNotFound;

package/build/cjs/components/Navigation/components/SearchNotFound/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "search-not-found-title": "Nothing was found",
+  "search-not-found-description": "Please check the spelling or try another keyword."
+}

package/build/cjs/components/Navigation/components/SearchNotFound/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/Navigation/components/SearchNotFound/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'SearchFound';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Navigation/components/SearchNotFound/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "search-not-found-title": "По вашему запросу ничего не найдено",
+  "search-not-found-description": "Пожалуйста, проверьте правильность написания или попробуйте другие ключевые слова."
+}

package/build/cjs/components/Navigation/components/SearchResult/SearchResult.css

@@ -0,0 +1,8 @@
+.pc-addons-search-result__title {
+  margin-bottom: 8px;
+  padding: 8px 12px;
+}
+
+.pc-addons-search-result__container {
+  padding: 8px 12px;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NavigationItem } from '../../models';
+interface SearchResultProps {
+    value: string;
+    data: NavigationItem[];
+    section?: string;
+    className?: string;
+}
+export declare const SearchResult: ({ value, data, section, className }: SearchResultProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchResult = 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 utils_1 = require("../../utils");
+const NavigationItemsList_1 = require("../Navigation/NavigationItemsList/NavigationItemsList");
+const SearchNotFound_1 = require("../SearchNotFound/SearchNotFound");
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const b = (0, gravity_ui_page_constructor_1.block)('search-result');
+const SearchResult = ({ value, data, section, className }) => {
+    const result = (0, utils_1.applySearch)(value, data);
+    const title = {
+        text: (0, i18n_1.default)('search-found', { count: result.length }),
+        textSize: 'xs',
+    };
+    return (react_1.default.createElement("div", { className: b() }, result.length ? (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Title, { className: b('title'), title: title, colSizes: { all: 12 } })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(NavigationItemsList_1.NavigationItemsList, { items: result, section: section, className: className })))) : (react_1.default.createElement("div", { className: b('container') },
+        react_1.default.createElement(SearchNotFound_1.SearchNotFound, { notFoundDescription: (0, i18n_1.default)('search-not-found'), size: "xs" })))));
+};
+exports.SearchResult = SearchResult;

package/build/cjs/components/Navigation/components/SearchResult/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "search-found": [
+    "{{count}} item found",
+    "{{count}} items found",
+    "{{count}} items found",
+    "",
+    "",
+    ""
+  ],
+
+  "search-not-found": "Please check the spelling or try another keyword."
+}

package/build/cjs/components/Navigation/components/SearchResult/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/build/cjs/components/Navigation/components/SearchResult/i18n/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'SearchResult';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/components/Navigation/components/SearchResult/i18n/ru.json

@@ -0,0 +1,11 @@
+{
+  "search-found": [
+    "Найдено {{count}} элемента",
+    "Найдено {{count}} элемента",
+    "Найдено {{count}} элементов",
+    "",
+    "",
+    ""
+  ],
+  "search-not-found": "Пожалуйста, проверьте правильность написания или попробуйте другие ключевые слова."
+}

package/build/cjs/components/Navigation/components/Tag/Tag.css

@@ -0,0 +1,21 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-navigation-tag {
+  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: inline-block;
+  padding: 0 8px;
+  border-radius: 2px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.pc-addons-navigation-tag_size_s {
+  font-size: var(--g-text-caption-2-font-size, var(--pc-text-caption-2-font-size));
+  line-height: var(--g-text-caption-2-line-height, var(--pc-text-caption-2-line-height));
+  padding: 0 4px;
+  height: 16px;
+  line-height: 16px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ClassNameProps } from '@doyourjob/gravity-ui-page-constructor';
+import { NavigationTag as NavigationTagModel } from '../../models';
+export interface NavigationTagProps extends NavigationTagModel, ClassNameProps {
+}
+export declare const NavigationTag: ({ text, color, textColor, className, size, }: NavigationTagProps) => React.JSX.Element;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTag = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const models_1 = require("../../models");
+const b = (0, cn_1.block)('navigation-tag');
+const getColor = (color) => {
+    switch (color) {
+        case models_1.NavigationTagColor.Yellow:
+            return 'var(--pc-addons-navigation-color-tag-yellow)';
+        case models_1.NavigationTagColor.Blue:
+            return 'var(--pc-addons-navigation-color-tag-blue)';
+        case models_1.NavigationTagColor.Green:
+            return 'var(--pc-addons-navigation-color-tag-green)';
+        default:
+            return color;
+    }
+};
+const NavigationTag = ({ text, color = models_1.NavigationTagColor.Yellow, textColor, className, size = 'm', }) => (react_1.default.createElement("div", { className: b({ size }, className), style: { backgroundColor: getColor(color), color: textColor } }, text));
+exports.NavigationTag = NavigationTag;

package/build/cjs/components/Navigation/components/popups/LargePopup/LargePopup.css

@@ -0,0 +1,71 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+:root {
+  --pc-addons-navigation-header-height: 64px;
+  --pc-addons-navigation-search-input-indent: 10px;
+  --pc-addons-navigation-popup-padding: 7px;
+  --pc-addons-navigation-popup-z-index: 99;
+  --pc-addons-arrow-size: 20px;
+}
+
+.g-root {
+  --pc-addons-navigation-color-tag-yellow: var(--g-color-base-warning-light);
+  --pc-addons-navigation-color-tag-green: var(--g-color-base-positive-light);
+  --pc-addons-navigation-color-tag-blue: var(--g-color-base-info-light);
+  --pc-addons-navigation-border-radius: var(--pc-border-radius, 24px);
+}
+
+.pc-addons-large-popup__categories {
+  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));
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 224px);
+  overflow: auto;
+  width: 100%;
+}
+
+.pc-addons-large-popup__categories_with-scroll {
+  padding-right: 8px;
+}
+
+.pc-addons-large-popup__links {
+  margin-top: 24px;
+}
+
+.pc-addons-large-popup__link {
+  margin: 0 0 4px;
+  padding: 8px 12px;
+}
+
+.pc-addons-large-popup__search {
+  margin-top: 16px;
+}
+
+.pc-addons-large-popup__title {
+  margin-bottom: 8px;
+  padding: var(--pc-addons-navigation-popup-padding) 12px;
+}
+
+.pc-addons-large-popup__left {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  padding-right: 48px;
+}
+
+.pc-addons-large-popup__controls {
+  max-width: 100%;
+}
+
+.pc-addons-large-popup__right {
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 64px);
+  overflow: auto;
+  overflow-y: auto;
+  padding-left: 16px;
+}
+
+.pc-addons-large-popup__items.row.row {
+  margin-left: -16px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CategorizedPopupData, NavigationSectionData } from '../../../models';
+export interface LargePopupProps extends Omit<NavigationSectionData, 'data'> {
+    data: CategorizedPopupData;
+}
+export declare const LargePopup: (props: LargePopupProps) => React.JSX.Element;

package/build/cjs/components/Navigation/components/popups/LargePopup/LargePopup.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LargePopup = 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 cn_1 = require("../../../../../utils/cn");
+const utils_1 = require("../../../utils");
+const SearchResult_1 = require("../../SearchResult/SearchResult");
+const PopupCategory_1 = require("../components/PopupCategory/PopupCategory");
+const PopupGroup_1 = require("../components/PopupGroup/PopupGroup");
+const PopupSecondaryGroup_1 = require("../components/PopupSecondaryGroup/PopupSecondaryGroup");
+const Search_1 = tslib_1.__importDefault(require("../components/Search/Search"));
+const b = (0, cn_1.block)('large-popup');
+const LARGE_POPUP_INDENT = 240;
+const LargePopup = (props) => {
+    const { data, section, placeholder, links } = props;
+    const { categories } = data;
+    const [currentCategory, setCurrentCategory] = (0, react_1.useState)(Object.values(categories)[0]);
+    const [search, setSearch] = (0, react_1.useState)('');
+    const categoriesRef = (0, react_1.useRef)(null);
+    const [maxHeightCategories, setMaxHeightCategories] = (0, react_1.useState)(0);
+    const [minHeightCategories, setMinHeightCategories] = (0, react_1.useState)(355);
+    const [categoriesWithScroll, setCategoriesWithScroll] = (0, react_1.useState)(false);
+    const rightSideRef = (0, react_1.useRef)(null);
+    const rightSideContentRef = (0, react_1.useRef)(null);
+    const controlsRef = (0, react_1.useRef)(null);
+    const currentCategoryData = categories[currentCategory.slug];
+    const flatList = (0, react_1.useMemo)(() => {
+        const searchableItems = Object.entries(categories).reduce((result, [slug, { groups }]) => {
+            // eslint-disable-next-line no-param-reassign
+            result[slug] = groups[0].items;
+            return result;
+        }, {});
+        return (0, utils_1.getFlatList)(searchableItems);
+    }, [categories]);
+    const onSearch = (0, react_1.useCallback)((value) => setSearch(value), []);
+    const changeCategory = (0, react_1.useCallback)((value) => {
+        const rightSideCurrent = rightSideRef === null || rightSideRef === void 0 ? void 0 : rightSideRef.current;
+        if (rightSideCurrent) {
+            rightSideCurrent.scrollTop = 0;
+        }
+        setCurrentCategory(value);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const maxHeight = window.innerHeight - (0, utils_1.getHeaderHeight)(false) - LARGE_POPUP_INDENT;
+        const rightColumnHeight = (_a = rightSideContentRef === null || rightSideContentRef === void 0 ? void 0 : rightSideContentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        const controlsHeight = (_b = controlsRef === null || controlsRef === void 0 ? void 0 : controlsRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        setMaxHeightCategories(maxHeight);
+        if (rightColumnHeight && controlsHeight) {
+            setMinHeightCategories(rightColumnHeight - controlsHeight);
+        }
+        if (categoriesRef.current) {
+            if (categoriesRef.current.scrollHeight > maxHeight) {
+                setCategoriesWithScroll(true);
+            }
+        }
+    }, []);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('left'), sizes: { [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 3, [gravity_ui_page_constructor_1.GridColumnSize.All]: 4 } },
+                react_1.default.createElement("ul", { className: b('categories', { 'with-scroll': categoriesWithScroll }), ref: categoriesRef, style: {
+                        maxHeight: `${maxHeightCategories}px`,
+                        minHeight: `${minHeightCategories}px`,
+                    } }, Object.values(categories).map((category) => (react_1.default.createElement(PopupCategory_1.PopupCategory, { data: category, onClick: changeCategory, key: category.slug, isActive: currentCategory.slug === category.slug })))),
+                react_1.default.createElement("div", { className: b('controls'), ref: controlsRef },
+                    react_1.default.createElement("div", { className: b('links') }, links &&
+                        links.map((link) => (react_1.default.createElement(gravity_ui_page_constructor_1.Link, { className: b('link'), url: link.url, text: link.text, textSize: "m", key: link.url, theme: "normal", arrow: true })))),
+                    placeholder && (react_1.default.createElement(Search_1.default, { initialValue: "", onSubmit: onSearch, className: b('search'), placeholder: placeholder, value: search, size: "s", customSearchIcon: icons_1.Magnifier })))),
+            react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b('right'), sizes: { [gravity_ui_page_constructor_1.GridColumnSize.Lg]: 9, [gravity_ui_page_constructor_1.GridColumnSize.All]: 8 }, ref: rightSideRef },
+                react_1.default.createElement("div", { className: b('right-content'), ref: rightSideContentRef }, search ? (react_1.default.createElement(SearchResult_1.SearchResult, { value: search, data: flatList, section: section, className: b('items') })) : (react_1.default.createElement(react_1.Fragment, null, currentCategoryData.groups.map((group, index) => {
+                    const key = group.title || group.url || index;
+                    return index ? (react_1.default.createElement(PopupSecondaryGroup_1.PopupSecondaryGroup, Object.assign({}, group, { key: key }))) : (react_1.default.createElement(PopupGroup_1.PopupGroup, Object.assign({}, group, { section: section, key: key })));
+                }))))))));
+};
+exports.LargePopup = LargePopup;

package/build/cjs/components/Navigation/components/popups/MediumPopup/MediumPopup.css

@@ -0,0 +1,6 @@
+.pc-addons-medium-popup {
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 64px);
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopupData } from '../../../models';
+interface MediumPopupProps {
+    data: PopupData;
+}
+export declare const MediumPopup: ({ data }: MediumPopupProps) => React.JSX.Element;
+export {};

package/build/cjs/components/Navigation/components/popups/MediumPopup/MediumPopup.js

@@ -0,0 +1,16 @@
+"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 NavigationPopupItem_1 = require("../../Navigation/NavigationPopupItem/NavigationPopupItem");
+const b = (0, cn_1.block)('medium-popup');
+const MediumPopup = ({ data }) => (react_1.default.createElement(gravity_ui_page_constructor_1.Row, null,
+    react_1.default.createElement(gravity_ui_page_constructor_1.Col, { className: b() }, data.groups.map((dataItem) => dataItem.items.map((item) => (react_1.default.createElement(NavigationPopupItem_1.NavigationPopupItem, 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;

package/build/cjs/components/Navigation/components/popups/MediumPopupWithCategories/MediumPopupWithCategories.css

@@ -0,0 +1,37 @@
+:root {
+  --pc-addons-navigation-header-height: 64px;
+  --pc-addons-navigation-search-input-indent: 10px;
+  --pc-addons-navigation-popup-padding: 7px;
+  --pc-addons-navigation-popup-z-index: 99;
+  --pc-addons-arrow-size: 20px;
+}
+
+.g-root {
+  --pc-addons-navigation-color-tag-yellow: var(--g-color-base-warning-light);
+  --pc-addons-navigation-color-tag-green: var(--g-color-base-positive-light);
+  --pc-addons-navigation-color-tag-blue: var(--g-color-base-info-light);
+  --pc-addons-navigation-border-radius: var(--pc-border-radius, 24px);
+}
+
+.pc-addons-medium-popup-with-categories {
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 64px);
+  overflow: auto;
+  display: flex;
+  padding: 0 8px;
+}
+
+.pc-addons-medium-popup-with-categories__title {
+  margin-bottom: 8px;
+  padding: var(--pc-addons-navigation-popup-padding) 20px;
+}
+
+.pc-addons-medium-popup-with-categories__items {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 1080px) {
+  .pc-addons-medium-popup-with-categories__col:not(:first-child) {
+    padding-top: 16px;
+  }
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { PopupData } from '../../../models';
+interface MediumPopupWithCategoriesProps {
+    data: PopupData;
+}
+export declare const MediumPopupWithCategories: ({ data }: MediumPopupWithCategoriesProps) => React.JSX.Element;
+export {};