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

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { GridColumnSize, Row, Title } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../utils/cn';
+import i18n from './i18n';
+import './SearchNotFound.css';
+const b = block('search-not-found');
+export const SearchNotFound = (props) => {
+    const { notFoundDescription, size = 's' } = props;
+    const title = {
+        text: i18n('search-not-found-title'),
+        textSize: size,
+    };
+    return (React.createElement(Row, { className: b() },
+        React.createElement(Title, { colSizes: {
+                [GridColumnSize.Lg]: 9,
+                [GridColumnSize.All]: 12,
+            }, title: title, subtitle: notFoundDescription || i18n('search-not-found-description'), className: b('title') })));
+};

package/build/esm/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/esm/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/esm/components/Navigation/components/SearchNotFound/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'SearchFound';
+export default registerKeyset({ en, ru }, COMPONENT);

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NavigationItem } from '../../models';
+import './SearchResult.css';
+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/esm/components/Navigation/components/SearchResult/SearchResult.js

@@ -0,0 +1,21 @@
+import React, { Fragment } from 'react';
+import { Row, Title, block } from '@doyourjob/gravity-ui-page-constructor';
+import { applySearch } from '../../utils';
+import { NavigationItemsList } from '../Navigation/NavigationItemsList/NavigationItemsList';
+import { SearchNotFound } from '../SearchNotFound/SearchNotFound';
+import i18n from './i18n';
+import './SearchResult.css';
+const b = block('search-result');
+export const SearchResult = ({ value, data, section, className }) => {
+    const result = applySearch(value, data);
+    const title = {
+        text: i18n('search-found', { count: result.length }),
+        textSize: 'xs',
+    };
+    return (React.createElement("div", { className: b() }, result.length ? (React.createElement(Fragment, null,
+        React.createElement(Row, null,
+            React.createElement(Title, { className: b('title'), title: title, colSizes: { all: 12 } })),
+        React.createElement("div", null,
+            React.createElement(NavigationItemsList, { items: result, section: section, className: className })))) : (React.createElement("div", { className: b('container') },
+        React.createElement(SearchNotFound, { notFoundDescription: i18n('search-not-found'), size: "xs" })))));
+};

package/build/esm/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/esm/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/esm/components/Navigation/components/SearchResult/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'SearchResult';
+export default registerKeyset({ en, ru }, COMPONENT);

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

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

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { block } from '../../../../utils/cn';
+import { NavigationTagColor } from '../../models';
+import './Tag.css';
+const b = block('navigation-tag');
+const getColor = (color) => {
+    switch (color) {
+        case NavigationTagColor.Yellow:
+            return 'var(--pc-addons-navigation-color-tag-yellow)';
+        case NavigationTagColor.Blue:
+            return 'var(--pc-addons-navigation-color-tag-blue)';
+        case NavigationTagColor.Green:
+            return 'var(--pc-addons-navigation-color-tag-green)';
+        default:
+            return color;
+    }
+};
+export const NavigationTag = ({ text, color = NavigationTagColor.Yellow, textColor, className, size = 'm', }) => (React.createElement("div", { className: b({ size }, className), style: { backgroundColor: getColor(color), color: textColor } }, text));

package/build/esm/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/esm/components/Navigation/components/popups/LargePopup/LargePopup.d.ts

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

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

@@ -0,0 +1,74 @@
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Col, GridColumnSize, Link, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { Magnifier } from '@gravity-ui/icons';
+import { block } from '../../../../../utils/cn';
+import { getFlatList, getHeaderHeight } from '../../../utils';
+import { SearchResult } from '../../SearchResult/SearchResult';
+import { PopupCategory } from '../components/PopupCategory/PopupCategory';
+import { PopupGroup } from '../components/PopupGroup/PopupGroup';
+import { PopupSecondaryGroup } from '../components/PopupSecondaryGroup/PopupSecondaryGroup';
+import Search from '../components/Search/Search';
+import './LargePopup.css';
+const b = block('large-popup');
+const LARGE_POPUP_INDENT = 240;
+export const LargePopup = (props) => {
+    const { data, section, placeholder, links } = props;
+    const { categories } = data;
+    const [currentCategory, setCurrentCategory] = useState(Object.values(categories)[0]);
+    const [search, setSearch] = useState('');
+    const categoriesRef = useRef(null);
+    const [maxHeightCategories, setMaxHeightCategories] = useState(0);
+    const [minHeightCategories, setMinHeightCategories] = useState(355);
+    const [categoriesWithScroll, setCategoriesWithScroll] = useState(false);
+    const rightSideRef = useRef(null);
+    const rightSideContentRef = useRef(null);
+    const controlsRef = useRef(null);
+    const currentCategoryData = categories[currentCategory.slug];
+    const flatList = 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 getFlatList(searchableItems);
+    }, [categories]);
+    const onSearch = useCallback((value) => setSearch(value), []);
+    const changeCategory = useCallback((value) => {
+        const rightSideCurrent = rightSideRef === null || rightSideRef === void 0 ? void 0 : rightSideRef.current;
+        if (rightSideCurrent) {
+            rightSideCurrent.scrollTop = 0;
+        }
+        setCurrentCategory(value);
+    }, []);
+    useEffect(() => {
+        var _a, _b;
+        const maxHeight = window.innerHeight - 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.createElement(Fragment, null,
+        React.createElement(Row, null,
+            React.createElement(Col, { className: b('left'), sizes: { [GridColumnSize.Lg]: 3, [GridColumnSize.All]: 4 } },
+                React.createElement("ul", { className: b('categories', { 'with-scroll': categoriesWithScroll }), ref: categoriesRef, style: {
+                        maxHeight: `${maxHeightCategories}px`,
+                        minHeight: `${minHeightCategories}px`,
+                    } }, Object.values(categories).map((category) => (React.createElement(PopupCategory, { data: category, onClick: changeCategory, key: category.slug, isActive: currentCategory.slug === category.slug })))),
+                React.createElement("div", { className: b('controls'), ref: controlsRef },
+                    React.createElement("div", { className: b('links') }, links &&
+                        links.map((link) => (React.createElement(Link, { className: b('link'), url: link.url, text: link.text, textSize: "m", key: link.url, theme: "normal", arrow: true })))),
+                    placeholder && (React.createElement(Search, { initialValue: "", onSubmit: onSearch, className: b('search'), placeholder: placeholder, value: search, size: "s", customSearchIcon: Magnifier })))),
+            React.createElement(Col, { className: b('right'), sizes: { [GridColumnSize.Lg]: 9, [GridColumnSize.All]: 8 }, ref: rightSideRef },
+                React.createElement("div", { className: b('right-content'), ref: rightSideContentRef }, search ? (React.createElement(SearchResult, { value: search, data: flatList, section: section, className: b('items') })) : (React.createElement(Fragment, null, currentCategoryData.groups.map((group, index) => {
+                    const key = group.title || group.url || index;
+                    return index ? (React.createElement(PopupSecondaryGroup, Object.assign({}, group, { key: key }))) : (React.createElement(PopupGroup, Object.assign({}, group, { section: section, key: key })));
+                }))))))));
+};

package/build/esm/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/esm/components/Navigation/components/popups/MediumPopup/MediumPopup.d.ts

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Col, GridColumnSize, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../utils/cn';
+import { NavigationPopupItem } from '../../Navigation/NavigationPopupItem/NavigationPopupItem';
+import './MediumPopup.css';
+const b = block('medium-popup');
+export const MediumPopup = ({ data }) => (React.createElement(Row, null,
+    React.createElement(Col, { className: b() }, data.groups.map((dataItem) => dataItem.items.map((item) => (React.createElement(NavigationPopupItem, Object.assign({}, item, { key: item.title, hover: true, imageSize: dataItem.imageSize, sizes: {
+            [GridColumnSize.Xl]: 3,
+            [GridColumnSize.Md]: 4,
+            [GridColumnSize.All]: 12,
+        } }))))))));

package/build/esm/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/esm/components/Navigation/components/popups/MediumPopupWithCategories/MediumPopupWithCategories.d.ts

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

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

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { BREAKPOINTS, Col, GridColumnSize, Row, Title, useWindowBreakpoint, } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../utils/cn';
+import { NavigationPopupItem, } from '../../Navigation/NavigationPopupItem/NavigationPopupItem';
+import './MediumPopupWithCategories.css';
+const b = block('medium-popup-with-categories');
+export const MediumPopupWithCategories = ({ data }) => {
+    const breakpoint = useWindowBreakpoint();
+    const itemsArrays = data.groups.map((dataItem) => dataItem.items.map((item) => (Object.assign(Object.assign({}, item), { imageSize: dataItem.imageSize }))));
+    const isDesktop = breakpoint > BREAKPOINTS.lg;
+    const maxLength = Math.max(...itemsArrays.map((item) => item.length));
+    const desktopItemsArray = useMemo(() => {
+        const itemsArray = [];
+        for (let i = 0; i < maxLength; i += 2) {
+            for (let j = 0; j < 2; j++) {
+                itemsArray.push(itemsArrays[j][i]);
+                itemsArray.push(itemsArrays[j][i + 1]);
+            }
+        }
+        return itemsArray;
+    }, [itemsArrays, maxLength]);
+    return (React.createElement(Row, { className: b() },
+        data.groups.map(({ title, items, imageSize }) => (React.createElement(Col, { key: title, className: b('col'), sizes: {
+                [GridColumnSize.Xl]: 6,
+                [GridColumnSize.Lg]: 12,
+                [GridColumnSize.All]: 12,
+            } },
+            title && (React.createElement(Row, null,
+                React.createElement(Col, { className: b('title') },
+                    React.createElement(Title, { title: { text: title, textSize: 'xs' } })))),
+            !isDesktop && (React.createElement("div", null,
+                React.createElement(Row, null, items.map((item) => (React.createElement(NavigationPopupItem, Object.assign({}, item, { hover: true, imageSize: imageSize, sizes: {
+                        [GridColumnSize.Lg]: 6,
+                        [GridColumnSize.Md]: 4,
+                        [GridColumnSize.All]: 4,
+                    }, key: item.title })))))))))),
+        isDesktop && (React.createElement(Col, { className: b('items') },
+            React.createElement("div", null,
+                React.createElement(Row, null, desktopItemsArray.map((item, index) => {
+                    return typeof item === 'undefined' ? (React.createElement(Col, { sizes: {
+                            [GridColumnSize.Xl]: 3,
+                            [GridColumnSize.Md]: 4,
+                            [GridColumnSize.All]: 12,
+                        }, key: index })) : (React.createElement(NavigationPopupItem, Object.assign({}, item, { key: item.title, hover: true, sizes: {
+                            [GridColumnSize.Xl]: 3,
+                            [GridColumnSize.Md]: 4,
+                            [GridColumnSize.All]: 12,
+                        } })));
+                })))))));
+};

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

@@ -0,0 +1,7 @@
+.pc-addons-medium-popup-with-floors {
+  max-height: calc(100vh - var(--pc-addons-navigation-header-height) - 64px);
+  overflow: auto;
+  overflow-y: auto;
+  padding-left: 12px;
+  margin-right: -12px;
+}

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { GridColumnSize } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../utils/cn';
+import { PopupGroup } from '../components/PopupGroup/PopupGroup';
+import './MediumPopupWithFloors.css';
+const b = block('medium-popup-with-floors');
+const DefaultItemSizes = {
+    [GridColumnSize.Lg]: 3,
+    [GridColumnSize.Sm]: 4,
+    [GridColumnSize.All]: 12,
+};
+export const MediumPopupWithFloors = ({ data }) => {
+    return (React.createElement("div", { className: b() }, data.groups.map((group, index) => (React.createElement(PopupGroup, Object.assign({}, group, { key: group.title || group.url || index, sizes: DefaultItemSizes, withFixItems: true, withPadding: true }))))));
+};

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

@@ -0,0 +1,43 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-addons-popup-category {
+  margin-bottom: 4px;
+}
+
+.pc-addons-popup-category__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  padding: 8px 12px;
+  width: 100%;
+  text-align: initial;
+  cursor: pointer;
+  border-radius: var(--g-border-radius-l);
+}
+
+.pc-addons-popup-category__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: -2px;
+}
+
+.pc-addons-popup-category__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.pc-addons-popup-category__button:hover {
+  background-color: var(--g-color-base-simple-hover);
+}
+
+.pc-addons-popup-category__button_active {
+  background-color: var(--g-color-base-selection);
+}
+
+.pc-addons-popup-category__button_active:hover {
+  background-color: var(--g-color-base-selection-hover);
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CategoryData } from '../../../../models';
+import './PopupCategory.css';
+interface ExtraPopupCategoryProps {
+    data: CategoryData;
+    onClick: (category: CategoryData) => void;
+    isActive: boolean;
+}
+export declare const PopupCategory: ({ data, onClick, isActive }: ExtraPopupCategoryProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { block } from '../../../../../../utils/cn';
+import './PopupCategory.css';
+const b = block('popup-category');
+export const PopupCategory = ({ data, onClick, isActive }) => {
+    const { title } = data;
+    return (React.createElement("li", { className: b(), key: title, "aria-current": isActive || undefined },
+        React.createElement("button", { className: b('button', { active: isActive }), onClick: () => onClick(data) }, title)));
+};

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

@@ -0,0 +1,27 @@
+.pc-addons-popup-group {
+  margin-left: -12px;
+  padding-left: 12px;
+  border-radius: var(--g-border-radius-xl);
+}
+
+.pc-addons-popup-group + .pc-addons-popup-group {
+  margin-top: 12px;
+}
+
+.pc-addons-popup-group__title {
+  margin-bottom: 8px;
+  padding: var(--pc-addons-navigation-popup-padding) 12px;
+}
+
+.pc-addons-popup-group__items.row.row.row {
+  margin-left: -16px;
+}
+
+.pc-addons-popup-group__items_fix.row.row.row {
+  margin-left: -12px;
+}
+
+.pc-addons-popup-group__padding {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GridColumnSizesType } from '@doyourjob/gravity-ui-page-constructor';
+import { CategoryGroupData } from '../../../../models';
+import './PopupGroup.css';
+type PopupGroupProps = CategoryGroupData & {
+    section?: string;
+    sizes?: GridColumnSizesType;
+    withFixItems?: boolean;
+    withPadding?: boolean;
+};
+export declare const PopupGroup: ({ sizes, section, withFixItems, withPadding, ...group }: PopupGroupProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { Col, Row } from '@doyourjob/gravity-ui-page-constructor';
+import { block } from '../../../../../../utils/cn';
+import { NavigationItemsList } from '../../../Navigation/NavigationItemsList/NavigationItemsList';
+import { PopupTitle } from '../PopupTitle/PopupTitle';
+import './PopupGroup.css';
+const b = block('popup-group');
+export const PopupGroup = (_a) => {
+    var { sizes, section, withFixItems, withPadding } = _a, group = __rest(_a, ["sizes", "section", "withFixItems", "withPadding"]);
+    const items = useMemo(() => group.items.map((item) => (Object.assign(Object.assign({}, item), { description: group.showItemDescriptions === 'no' ? undefined : item.description, icon: group.showItemIcons === 'no' ? undefined : item.icon, image: group.showItemIcons === 'no' ? undefined : item.image }))), [group.items, group.showItemDescriptions, group.showItemIcons]);
+    return (React.createElement("div", { className: withPadding ? [b(), b('padding')].join(' ') : b(), style: { backgroundColor: group.backgroundColor } },
+        group.title && (React.createElement(Row, null,
+            React.createElement(Col, { className: b('title') },
+                React.createElement(PopupTitle, Object.assign({}, group))))),
+        React.createElement("div", null,
+            React.createElement(NavigationItemsList, { items: items, section: section, sizes: sizes, className: withFixItems ? [b('items'), b('items_fix')].join(' ') : b('items') }))));
+};