@gravity-ui/page-constructor 2.0.0-beta.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [2.0.0](https://github.com/gravity-ui/page-constructor/compare/v1.25.2...v2.0.0) (2023-03-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* update uikit up to 4, update react up to 18([#134](https://github.com/gravity-ui/page-constructor/issues/134)) (#212)
+
+### Features
+
+* map-block changing the logic of zoom and center ([#219](https://github.com/gravity-ui/page-constructor/issues/219)) ([d332844](https://github.com/gravity-ui/page-constructor/commit/d33284425878cdbfacdf7813826d909e9ab696cb))
+* update uikit up to 4, update react up to 18([#134](https://github.com/gravity-ui/page-constructor/issues/134)) ([#212](https://github.com/gravity-ui/page-constructor/issues/212)) ([377b1f5](https://github.com/gravity-ui/page-constructor/commit/377b1f59c25d08458082232075e2e7bcfe84fe5c))
+
+## [1.25.2](https://github.com/gravity-ui/page-constructor/compare/v1.25.1...v1.25.2) (2023-03-21)
+
+
+### Bug Fixes
+
+* **ExtendedFeatures:** label position fixed ([#175](https://github.com/gravity-ui/page-constructor/issues/175)) ([fb8d206](https://github.com/gravity-ui/page-constructor/commit/fb8d206ad2378564a1dc7a7295f02da13ae66df1))
+
+## [1.25.1](https://github.com/gravity-ui/page-constructor/compare/v1.25.0...v1.25.1) (2023-03-20)
+
+
+### Bug Fixes
+
+* cannot read stopPropagation of undefined in navigation utils ([#221](https://github.com/gravity-ui/page-constructor/issues/221)) ([e20904a](https://github.com/gravity-ui/page-constructor/commit/e20904abfcc14339be777747a4c26187dba8cd58))
+
+## [1.25.0](https://github.com/gravity-ui/page-constructor/compare/v1.24.0...v1.25.0) (2023-03-14)
+
+
+### Features
+
+* update react-player version ([#217](https://github.com/gravity-ui/page-constructor/issues/217)) ([806dea6](https://github.com/gravity-ui/page-constructor/commit/806dea69c911c789782b8100a364187675ebf3d3))
+
+## [1.24.0](https://github.com/gravity-ui/page-constructor/compare/v1.23.0...v1.24.0) (2023-03-13)
+
+
+### Features
+
+* add dropdown item in right column of navigation ([#213](https://github.com/gravity-ui/page-constructor/issues/213)) ([71f23a8](https://github.com/gravity-ui/page-constructor/commit/71f23a8ff00948fa62b3bd5b7833b171b59176d6))
+
 ## [1.23.0](https://github.com/gravity-ui/page-constructor/compare/v1.22.1...v1.23.0) (2023-03-09)
 
 

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.css

@@ -21,7 +21,7 @@ unpredictable css rules order in build */
   line-height: var(--yc-text-header-1-line-height);
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
-  display: flex;
+  display: block;
   position: relative;
   margin-bottom: 8px;
 }
@@ -42,13 +42,13 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-caption-2-font-size);
   line-height: var(--yc-text-caption-2-line-height);
   position: relative;
-  top: 5px;
+  top: -3px;
   height: 16px;
   margin-left: 8px;
-  padding: 0 5px;
+  padding: 1.5px 5px 2px;
   color: var(--yc-color-base-background);
   background-color: var(--yc-my-color-brand-normal);
-  border-radius: 3px;
+  border-radius: 4px;
 }
 .pc-ExtendedFeaturesBlock__item-text, .pc-ExtendedFeaturesBlock__item-link {
   font-size: var(--yc-text-body-2-font-size);

package/build/cjs/blocks/ExtendedFeatures/ExtendedFeatures.js

@@ -33,7 +33,7 @@ const ExtendedFeaturesBlock = ({ title, description, items, colSizes = DEFAULT_S
                     react_1.default.createElement("div", { className: b('container') },
                         itemTitle && (react_1.default.createElement("h5", { className: b('item-title') },
                             react_1.default.createElement(components_1.HTML, null, itemTitle),
-                            label && (react_1.default.createElement("div", { className: b('item-label') }, label)))),
+                            label && (react_1.default.createElement("span", { className: b('item-label') }, label)))),
                         react_1.default.createElement(sub_blocks_1.Content, { text: text, links: itemLinks, size: "s", colSizes: { all: 12, md: 12 }, buttons: buttons, additionalInfo: additionalInfo }))));
             })))));
 };

package/build/cjs/blocks/Map/schema.d.ts

@@ -6,12 +6,6 @@ export declare const Map: {
         zoom: {
             type: string;
         };
-        center: {
-            type: string;
-            items: {
-                type: string;
-            };
-        };
         address: {
             type: string;
         };
@@ -70,12 +64,6 @@ export declare const MapBlock: {
                     zoom: {
                         type: string;
                     };
-                    center: {
-                        type: string;
-                        items: {
-                            type: string;
-                        };
-                    };
                     address: {
                         type: string;
                     };

package/build/cjs/components/HTML/HTML.d.ts

@@ -7,7 +7,7 @@ export interface HTMLProps {
 }
 declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
-        __html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
+        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
 }, HTMLElement> | null;

package/build/cjs/components/Map/GoogleMap.js

@@ -8,18 +8,20 @@ const mapsContext_1 = require("../../context/mapsContext/mapsContext");
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const helpers_1 = require("./helpers");
+const configure_1 = require("../../utils/configure");
 const b = (0, utils_1.block)('map');
-function getScriptSrc(apiKey, scriptSrc, address, lang) {
-    return `${scriptSrc}?key=${apiKey}&language=${lang}&q=${encodeURI(address)}`;
+function getScriptSrc(params) {
+    const { apiKey, scriptSrc, address, lang, zoom } = params;
+    return `${scriptSrc}?key=${apiKey}&language=${lang}${zoom ? '&zoom=' + zoom : ''}&q=${encodeURI(address)}`;
 }
 const GoogleMap = (props) => {
-    const { address } = props;
+    const { address, zoom } = props;
     const { apiKey, scriptSrc } = (0, react_1.useContext)(mapsContext_1.MapsContext);
-    const { lang = 'ru' } = (0, react_1.useContext)(localeContext_1.LocaleContext);
+    const { lang = configure_1.Lang.Ru } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const [height, setHeight] = (0, react_1.useState)(undefined);
     const ref = (0, react_1.useRef)(null);
-    const src = (0, react_1.useMemo)(() => getScriptSrc(apiKey, scriptSrc, address, lang), [apiKey, scriptSrc, address, lang]);
+    const src = (0, react_1.useMemo)(() => getScriptSrc({ apiKey, scriptSrc, address, lang, zoom }), [apiKey, scriptSrc, address, lang, zoom]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
             if (ref.current) {

package/build/cjs/components/Map/Map.css

@@ -7,9 +7,13 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
 }
+.pc-map_hidden {
+  opacity: 0;
+}
 .pc-map__spinner {
   margin: 0 auto;
   align-self: center;
+  position: absolute;
 }
 .pc-map__wrapper {
   min-height: 300px;
@@ -17,4 +21,5 @@ unpredictable css rules order in build */
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }

package/build/cjs/components/Map/YMap/YMap.d.ts

@@ -1,13 +1,15 @@
-import { YMapMarker } from '../../../models';
+import { YMapProps, YMapMarker } from '../../../models';
+type PlacemarksProps = Pick<YMapProps, 'zoom' | 'markers'>;
 export declare class YMap {
     private ymap;
     private mapRef;
     private coords;
     constructor(ymap: Ymaps.Map, mapRef: HTMLDivElement | null);
-    showPlacemarks(markers: YMapMarker[]): Promise<void>;
+    showPlacemarks(props: PlacemarksProps): Promise<void>;
     findAddress(marker: YMapMarker): Promise<void>;
     findCoordinate(marker: YMapMarker): void;
     private drawPlaceMarkStyle;
     private recalcZoomAndCenter;
     private clearOldPlacemarks;
 }
+export {};

package/build/cjs/components/Map/YMap/YMap.js

@@ -22,9 +22,9 @@ class YMap {
         this.ymap = ymap;
         this.mapRef = mapRef;
     }
-    async showPlacemarks(markers) {
+    async showPlacemarks(props) {
         this.clearOldPlacemarks();
-        for (const marker of markers) {
+        for (const marker of props.markers) {
             if (marker.address) {
                 await this.findAddress(marker);
             }
@@ -32,7 +32,7 @@ class YMap {
                 this.findCoordinate(marker);
             }
         }
-        this.recalcZoomAndCenter();
+        this.recalcZoomAndCenter(props);
     }
     async findAddress(marker) {
         try {
@@ -52,10 +52,7 @@ class YMap {
         this.ymap.geoObjects.add(geoObject);
     }
     drawPlaceMarkStyle(geoObject, marker) {
-        if (!marker.label) {
-            return;
-        }
-        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label;
+        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label || {};
         let localIconColor = iconColor;
         // You can set the preset option together with the iconColor option only if it not a 'Stretchy' preset
         if (!preset.includes('Stretchy') && !iconColor) {
@@ -68,9 +65,10 @@ class YMap {
             }
         });
     }
-    recalcZoomAndCenter() {
+    recalcZoomAndCenter(props) {
         var _a, _b;
         const coordsLength = this.coords.length;
+        const { zoom = 0 } = props;
         if (!coordsLength) {
             return;
         }
@@ -79,10 +77,20 @@ class YMap {
             leftBottom = [Math.min(leftBottom[0], point[0]), Math.min(leftBottom[1], point[1])];
             rightTop = [Math.max(rightTop[0], point[0]), Math.max(rightTop[1], point[1])];
         });
-        const newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        let newMapParams = {
+            zoom,
+            center: [],
+        };
+        if (zoom) {
+            // compute only the center
+            newMapParams.center = window.ymaps.util.bounds.getCenter([leftBottom, rightTop]);
+        }
+        else {
+            newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        }
         this.ymap.setCenter(newMapParams.center);
         // Use default zoom for one placemark
-        if (coordsLength > 1) {
+        if (coordsLength > 1 && !zoom) {
             this.ymap.setZoom(newMapParams.zoom);
         }
     }

package/build/cjs/components/Map/YMap/YandexMap.js

@@ -16,8 +16,12 @@ const helpers_1 = require("../helpers");
 const b = (0, utils_1.block)('map');
 const DEFAULT_CONTAINER_ID = 'ymap';
 const DEFAULT_ZOOM = 9;
+// Center - is a required parameter for creating a new map
+// We use this init center to create a map
+// The real center of the map will be calculated later, using the coordinates of the markers
+const INITIAL_CENTER = [0, 0];
 const YandexMap = (props) => {
-    const { markers, zoom, center, id } = props;
+    const { markers, zoom, id } = props;
     const { apiKey, scriptSrc, nonce } = (0, react_1.useContext)(mapsContext_1.MapsContext);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { lang = 'ru' } = (0, react_1.useContext)(localeContext_1.LocaleContext);
@@ -26,6 +30,7 @@ const YandexMap = (props) => {
     const [height, setHeight] = (0, react_1.useState)(undefined);
     const ref = (0, react_1.useRef)(null);
     const [loading, setLoading] = (0, react_1.useState)(false);
+    const [ready, setReady] = (0, react_1.useState)(false);
     const [attemptsIndex, setAttemptsIndex] = (0, react_1.useState)(0);
     const onTryAgain = (0, react_1.useCallback)(() => {
         setAttemptsIndex(attemptsIndex + 1);
@@ -33,20 +38,17 @@ const YandexMap = (props) => {
     (0, react_1.useEffect)(() => {
         (async function () {
             var _a;
-            if (!center) {
-                return;
-            }
             setLoading(true);
             await YandexMapApiLoader_1.YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
             (_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
                 setYmaps(new YMap_1.YMap(new window.ymaps.Map(containerId, {
-                    center,
+                    center: INITIAL_CENTER,
                     zoom: zoom || DEFAULT_ZOOM,
                 }, { autoFitToViewport: 'always' }), ref.current));
             });
             setLoading(false);
         })();
-    }, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
+    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
             if (ref.current) {
@@ -61,12 +63,19 @@ const YandexMap = (props) => {
     }, [markers, ymap, setYmaps, isMobile]);
     (0, react_1.useEffect)(() => {
         if (ymap) {
-            ymap.showPlacemarks(markers);
+            // show with computed center and placemarks
+            const showPlacemarks = async () => {
+                await ymap.showPlacemarks({ markers, zoom });
+                setReady(true);
+            };
+            showPlacemarks();
         }
     });
-    if (!center)
+    if (!markers)
         return null;
     return (react_1.default.createElement(ErrorWrapper_1.default, { isError: YandexMapApiLoader_1.YMapsApiLoader.status === YandexMapApiLoader_1.MapApiStatus.Error, text: (0, i18n_1.default)('map-load-error'), buttonText: (0, i18n_1.default)('map-try-again'), handler: onTryAgain, className: b('wrapper') },
-        react_1.default.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? react_1.default.createElement(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null)));
+        react_1.default.createElement("div", { className: b('wrapper') },
+            react_1.default.createElement("div", { id: containerId, className: b({ hidden: !ready }), ref: ref, style: { height } }),
+            loading ? react_1.default.createElement(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null)));
 };
 exports.default = YandexMap;

package/build/cjs/models/constructor-items/common.d.ts

@@ -189,7 +189,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +196,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;

package/build/cjs/navigation/components/Header/Header.css

@@ -41,6 +41,8 @@ unpredictable css rules order in build */
 .pc-header__right {
   flex: 0;
   justify-content: flex-end;
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }
 .pc-header__navigation-container {
   display: flex;
@@ -53,6 +55,9 @@ unpredictable css rules order in build */
 .pc-header__buttons {
   display: flex;
   align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 @media (max-width: 768px) {
   .pc-header__buttons {
@@ -62,6 +67,24 @@ unpredictable css rules order in build */
 .pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
+.pc-header__buttons-item {
+  position: relative;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .pc-header__buttons-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-header__buttons-item:hover, .pc-header__buttons-item:active {
+  color: var(--yc-color-text-link);
+}
+.pc-header__buttons-item:not(:last-child) {
+  margin-right: 20px;
+}
 .pc-header__button {
   margin-top: 0;
 }

package/build/cjs/navigation/components/Header/Header.js

@@ -7,11 +7,12 @@ const utils_1 = require("../../../utils");
 const grid_1 = require("../../../grid");
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
+const icons_1 = require("../../../icons");
+const constants_1 = require("../../constants");
 const Navigation_1 = tslib_1.__importDefault(require("../Navigation/Navigation"));
 const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const Logo_1 = tslib_1.__importDefault(require("../Logo/Logo"));
-const icons_1 = require("../../../icons");
+const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
 const b = (0, utils_1.block)('header');
 const ICON_SIZE = 36;
 const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
@@ -27,10 +28,13 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 const Header = ({ data, logo }) => {
     const { leftItems, rightItems } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
-    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
-    const onActiveItemChange = (0, react_1.useCallback)((index) => {
-        setActiveItemIndex(index);
+    const [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
+    const onActiveItemChange = (0, react_1.useCallback)((id) => {
+        setactiveItemId(id);
     }, []);
+    const hidePopup = (0, react_1.useCallback)(() => {
+        onActiveItemChange();
+    }, [onActiveItemChange]);
     const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
         setIsSidebarOpened(isOpen);
     }, []);
@@ -44,12 +48,12 @@ const Header = ({ data, logo }) => {
                     logo && (react_1.default.createElement("div", { className: b('left') },
                         react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') })))),
                     react_1.default.createElement("div", { className: b('navigation-container') },
-                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })),
+                        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })),
                     react_1.default.createElement("div", { className: b('right') },
                         react_1.default.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
-                        rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button })))))),
+                        rightItems && (react_1.default.createElement("ul", { className: b('buttons') }, rightItems.map((button, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('buttons-item'), item: button, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Right, onActiveItemChange: onActiveItemChange })))))),
                     react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
-                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
+                        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })))))));
 };
 exports.Header = Header;
 exports.default = exports.Header;

package/build/cjs/navigation/components/MobileNavigation/MobileNavigation.css

@@ -24,7 +24,10 @@ unpredictable css rules order in build */
 .pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.pc-mobile-navigation__links {
+.pc-mobile-navigation__nav {
+  margin-bottom: 24px;
+}
+.pc-mobile-navigation__rows {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,7 +36,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.pc-mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__rows-item:not(:last-child) {
   margin-bottom: 24px;
 }
 .pc-mobile-navigation__dropdown-item:not(:last-child) {

package/build/cjs/navigation/components/MobileNavigation/MobileNavigation.d.ts

@@ -5,9 +5,9 @@ export interface MobileNavigationProps {
     isOpened?: boolean;
     topItems?: NavigationItemModel[];
     bottomItems?: NavigationItemModel[];
-    activeItemIndex: number;
+    activeItemId?: string;
     onClose: () => void;
-    onActiveItemChange: (index: number) => void;
+    onActiveItemChange: (id?: string) => void;
 }
 declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

package/build/cjs/navigation/components/MobileNavigation/MobileNavigation.js

@@ -6,6 +6,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../../utils");
 const Foldable_1 = tslib_1.__importDefault(require("../../../components/Foldable/Foldable"));
 const models_1 = require("../../../models");
+const constants_1 = require("../../constants");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('mobile-navigation');
 const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
@@ -14,32 +15,31 @@ const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = fals
         react_1.default.createElement(NavigationItem_1.default, { data: data, onClick: onToggle, isOpened: isOpened }),
         isOpened && (react_1.default.createElement(uikit_1.Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
 };
-const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
+const MobileNavigationItem = ({ item, index, isOpened, activeItemId, onActiveItemChange, column, onClose, }) => {
+    const id = `${column}-${index}`;
+    const isActive = id === activeItemId && isOpened;
     const toggleActive = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (onActiveItemChange) {
-            onActiveItemChange(isActive ? -1 : index);
+            onActiveItemChange(isActive ? undefined : `${column}-${index}`);
         }
-    }, [isActive, index, onActiveItemChange]);
+    }, [onActiveItemChange, isActive, column, index]);
     const onItemClick = (0, react_1.useCallback)((e) => {
         toggleActive(e);
         onClose();
     }, [toggleActive, onClose]);
-    return (react_1.default.createElement("li", { key: index, className: b('links-item') }, link.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onItemClick }))));
+    return (react_1.default.createElement("li", { key: index, className: b('rows-item') }, item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(MobileNavigationDropdown, { data: item, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onItemClick }))));
 };
 const MobileNavigation = (props) => {
     if (typeof window === 'undefined') {
         return null;
     }
-    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
+    const { isOpened, topItems, bottomItems, activeItemId, onActiveItemChange, onClose } = props;
     return (react_1.default.createElement(uikit_1.Portal, null,
         react_1.default.createElement(Foldable_1.default, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
             react_1.default.createElement("div", { className: b('wrapper') },
-                react_1.default.createElement("nav", null,
-                    react_1.default.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
-                        const isActive = index === activeItemIndex;
-                        return (react_1.default.createElement(MobileNavigationItem, { key: index, link: link, index: index, isActive: isOpened && isActive, onClose: onClose, onActiveItemChange: onActiveItemChange }));
-                    }))), bottomItems === null || bottomItems === void 0 ? void 0 :
-                bottomItems.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, data: item, className: b('button') })))))));
+                react_1.default.createElement("nav", { className: b('nav') },
+                    react_1.default.createElement("ul", { className: b('rows') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => (react_1.default.createElement(MobileNavigationItem, { key: index, item: link, column: constants_1.ItemColumnName.Top, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))),
+                react_1.default.createElement("ul", { className: b('rows') }, bottomItems === null || bottomItems === void 0 ? void 0 : bottomItems.map((item, index) => (react_1.default.createElement(MobileNavigationItem, { key: index, item: item, column: constants_1.ItemColumnName.Bottom, index: index, isOpened: isOpened, activeItemId: activeItemId, onClose: onClose, onActiveItemChange: onActiveItemChange }))))))));
 };
 exports.default = MobileNavigation;

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

@@ -29,15 +29,4 @@ unpredictable css rules order in build */
 }
 .pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
-}
-.pc-navigation__slider-container {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.pc-navigation__slider {
-  width: 100%;
-  height: 2px;
-  background-color: var(--yc-color-text-link);
 }

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

@@ -1,18 +1,11 @@
-import React, { MouseEventHandler } from 'react';
-import { NavigationDropdownItem, NavigationItemModel } from '../../../models/navigation';
+import React from 'react';
+import { NavigationItemModel } from '../../../models/navigation';
 export interface NavigationProps {
     links: NavigationItemModel[];
-    activeItemIndex: number;
-    onActiveItemChange: (index: number) => void;
+    activeItemId?: string;
     className?: string;
     highlightActiveItem?: boolean;
-}
-export interface NavigationDropdownProps {
-    data: NavigationDropdownItem;
-    onClick: MouseEventHandler;
-    isActive: boolean;
-    position: number;
-    hidePopup: () => void;
+    onActiveItemChange: (id?: string) => void;
 }
 declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;

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

@@ -5,29 +5,18 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../utils");
 const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
-const navigation_1 = require("../../../models/navigation");
-const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const locationContext_1 = require("../../../context/locationContext");
+const constants_1 = require("../../constants");
+const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
 const b = (0, utils_1.block)('navigation');
-const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
-    const { text, items } = data, popupProps = tslib_1.__rest(data, ["text", "items"]);
-    return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(NavigationItem_1.default, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: navigation_1.NavigationItemType.Dropdown } }),
-        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-};
-const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
+const Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
     const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const itemRefs = (0, react_1.useRef)([]);
     const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
     const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
     const hidePopup = (0, react_1.useCallback)(() => {
-        onActiveItemChange(-1);
+        onActiveItemChange();
     }, [onActiveItemChange]);
-    const getItemClickHandler = (0, react_1.useCallback)((index) => (e) => {
-        e.stopPropagation();
-        onActiveItemChange(index === activeItemIndex ? -1 : index);
-    }, [activeItemIndex, onActiveItemChange]);
     const calculateItemPositions = (0, react_1.useCallback)(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -57,13 +46,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [hidePopup, asPath, pathname]);
     return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
         react_1.default.createElement("nav", null,
-            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => {
-                const isActive = index === activeItemIndex;
-                const onClick = getItemClickHandler(index);
-                return (react_1.default.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                    link.type === navigation_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdown, { data: link, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: link, onClick: onClick })),
-                    highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
-                        react_1.default.createElement("div", { className: b('slider') })))));
-            })))));
+            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('links-item'), item: link, itemRefs: itemRefs, index: index, activeItemId: activeItemId, highlightActiveItem: highlightActiveItem, hidePopup: hidePopup, itemPositions: itemPositions, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
 };
 exports.default = Navigation;

package/build/cjs/navigation/components/NavigationDropdownItem/NavigationDropdownItem.d.ts

@@ -0,0 +1,11 @@
+import React, { MouseEventHandler } from 'react';
+import { NavigationDropdownItem } from '../../../models';
+export interface NavigationDropdownProps {
+    data: NavigationDropdownItem;
+    onClick: MouseEventHandler;
+    isActive: boolean;
+    position: number;
+    hidePopup: () => void;
+}
+declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
+export default NavigationDropdown;

package/build/cjs/navigation/components/NavigationDropdownItem/NavigationDropdownItem.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const models_1 = require("../../../models");
+const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, icon, items } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items"]);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(NavigationItem_1.default, { onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
+        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
+exports.default = NavigationDropdown;