@gravity-ui/page-constructor 1.7.0-alpha.8 → 1.7.0-alpha.9

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.header {
+.pc-header {
   position: sticky;
   z-index: 98;
   top: 0;
@@ -11,37 +11,37 @@ unpredictable css rules order in build */
   background-color: var(--yc-color-base-background);
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
-.header__wrapper {
+.pc-header__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .header__mobile-menu-button {
+  .pc-header__mobile-menu-button {
     display: none;
   }
 }
-.header__navigation, .header__left, .header__right {
+.pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;
 }
-.header__navigation {
+.pc-header__navigation {
   position: relative;
   margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
 }
 @media (max-width: 768px) {
-  .header__navigation {
+  .pc-header__navigation {
     display: none;
   }
 }
-.header__right {
+.pc-header__right {
   flex: 0;
   justify-content: flex-end;
 }
-.header__navigation-container {
+.pc-header__navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
@@ -49,37 +49,37 @@ unpredictable css rules order in build */
   align-items: center;
   margin-right: 20px;
 }
-.header__buttons {
+.pc-header__buttons {
   display: flex;
 }
 @media (max-width: 768px) {
-  .header__buttons {
+  .pc-header__buttons {
     display: none;
   }
 }
-.header__buttons > *:not(:last-child) {
+.pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
-.header__button {
+.pc-header__button {
   margin-top: 0;
 }
-.header__logo {
+.pc-header__logo {
   margin: 0 32px 0 0;
   cursor: pointer;
 }
 @media (max-width: 768px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     justify-content: flex-end;
   }
-  .header__left {
+  .pc-header__left {
     flex: 1 0 0;
   }
 }
 @media (max-width: 576px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     margin-right: 12px;
   }
-  .header__logo {
+  .pc-header__logo {
     margin-right: 0;
   }
 }

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const grid_1 = require("../../../../grid");
 const OutsideClick_1 = (0, tslib_1.__importDefault)(require("../../../OutsideClick/OutsideClick"));
 const Control_1 = (0, tslib_1.__importDefault)(require("../../../Control/Control"));
@@ -12,7 +12,7 @@ const MobileNavigation_1 = (0, tslib_1.__importDefault)(require("../MobileNaviga
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
 const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const icons_1 = require("../../../../icons");
-const b = (0, bem_cn_lite_1.default)('header');
+const b = (0, utils_1.block)('header');
 const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
     const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
     return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {

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

@@ -1,10 +1,10 @@
-.logo {
+.pc-logo {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.logo {
+.pc-logo {
   display: flex;
   align-items: center;
   font-weight: var(--yc-text-accent-font-weight);
@@ -13,11 +13,11 @@ unpredictable css rules order in build */
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
-.logo__icon {
+.pc-logo__icon {
   display: flex;
   margin-right: 8px;
   object-fit: contain;
 }
-.logo__text {
+.pc-logo__text {
   white-space: nowrap;
 }

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

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const RouterLink_1 = (0, tslib_1.__importDefault)(require("../../../RouterLink/RouterLink"));
-const utils_1 = require("../../../Media/Image/utils");
+const utils_2 = require("../../../Media/Image/utils");
 const index_1 = require("../../../index");
-const b = (0, bem_cn_lite_1.default)('logo');
+const b = (0, utils_1.block)('logo');
 const Logo = ({ icon, text, className }) => {
-    const imageData = (0, utils_1.getMediaImage)(icon);
+    const imageData = (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
         react_1.default.createElement("div", { className: b(null, className) },
             imageData && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, imageData)),

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.mobile-navigation {
+.pc-mobile-navigation {
   position: fixed;
   z-index: 100;
   top: var(--header-height);
@@ -14,17 +14,17 @@ unpredictable css rules order in build */
   line-height: var(--yc-text-body-2-line-height);
 }
 @media (min-width: 769px) {
-  .mobile-navigation {
+  .pc-mobile-navigation {
     display: none;
   }
 }
-.mobile-navigation__wrapper {
+.pc-mobile-navigation__wrapper {
   padding: 32px 20px;
 }
-.mobile-navigation__button {
+.pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.mobile-navigation__links {
+.pc-mobile-navigation__links {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,13 +33,13 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__links-item:not(:last-child) {
   margin-bottom: 24px;
 }
-.mobile-navigation__dropdown-item:not(:last-child) {
+.pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mobile-navigation__popup {
+.pc-mobile-navigation__popup {
   z-index: 101;
   display: flex;
   flex-direction: column;
@@ -52,7 +52,7 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (min-width: 769px) {
-  .mobile-navigation__popup {
+  .pc-mobile-navigation__popup {
     display: none;
   }
 }

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../utils");
 const Foldable_1 = (0, tslib_1.__importDefault)(require("../../../Foldable/Foldable"));
 const navigation_1 = require("../../../../models/navigation");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('mobile-navigation');
+const b = (0, utils_1.block)('mobile-navigation');
 const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
     const ref = (0, react_1.useRef)(null);
     return (react_1.default.createElement("div", { ref: ref, className: b('dropdown') },

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

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation {
+.pc-navigation {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
-.navigation__links {
+.pc-navigation__links {
   position: relative;
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.navigation__links-item {
+.pc-navigation__links-item {
   position: relative;
   height: var(--header-height);
   line-height: var(--header-height);
@@ -21,22 +21,22 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
 }
-.utilityfocus .navigation__links-item:focus {
+.utilityfocus .pc-navigation__links-item:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation__links-item:hover, .navigation__links-item:active {
+.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
   color: var(--yc-color-text-link);
 }
-.navigation__links-item:not(:last-child) {
+.pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
 }
-.navigation__slider-container {
+.pc-navigation__slider-container {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.navigation__slider {
+.pc-navigation__slider {
   width: 100%;
   height: 2px;
   background-color: var(--yc-color-text-link);

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

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
+const utils_1 = require("../../../../utils");
 const OverflowScroller_1 = (0, tslib_1.__importDefault)(require("../../../OverflowScroller/OverflowScroller"));
 const navigation_1 = require("../../../../models/navigation");
 const NavigationPopup_1 = (0, tslib_1.__importDefault)(require("../NavigationPopup/NavigationPopup"));
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
 const locationContext_1 = require("../../../../context/locationContext");
-const breakpointContext_1 = require("../../../../context/breakpointContext");
-const b = (0, bem_cn_lite_1.default)('navigation');
+const b = (0, utils_1.block)('navigation');
 const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
     const { text, items } = data, popupProps = (0, tslib_1.__rest)(data, ["text", "items"]);
     return (react_1.default.createElement(react_1.Fragment, null,
@@ -19,7 +18,6 @@ const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) =
 };
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const breakpoint = (0, react_1.useContext)(breakpointContext_1.BreakpointContext);
     const itemRefs = (0, react_1.useRef)([]);
     const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
     const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
@@ -56,7 +54,7 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     (0, react_1.useEffect)(() => {
         hidePopup();
-    }, [hidePopup, asPath, pathname, breakpoint]);
+    }, [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) => {

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

@@ -1,33 +1,33 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-item {
+.pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
 }
-.navigation-item_type_link {
+.pc-navigation-item_type_link {
   color: var(--yc-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
 }
-.utilityfocus .navigation-item_type_link:focus {
+.utilityfocus .pc-navigation-item_type_link:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
+.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
   color: var(--yc-color-text-link);
 }
-.navigation-item_type_button {
+.pc-navigation-item_type_button {
   display: inline-block;
 }
-.navigation-item__arrow {
+.pc-navigation-item__arrow {
   position: relative;
   top: -2px;
   width: 9px;
   height: 9px;
   margin-left: 5px;
 }
-.navigation-item__icon {
+.pc-navigation-item__icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -35,7 +35,7 @@ unpredictable css rules order in build */
   border-radius: 50%;
   object-fit: cover;
 }
-.navigation-item__dropdown {
+.pc-navigation-item__dropdown {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

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

@@ -1,7 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+import { NavigationItemData } from '../../../../models';
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

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

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const index_1 = require("../../../index");
 const utils_1 = require("../../../../utils");
+const index_1 = require("../../../index");
 const locationContext_1 = require("../../../../context/locationContext");
 const models_1 = require("../../../../models");
 const icons_1 = require("../../../../icons");
 const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
 const utils_2 = require("../../../Media/Image/utils");
-const b = (0, bem_cn_lite_1.default)('navigation-item');
+const b = (0, utils_1.block)('navigation-item');
 const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
     icon && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, icon)),
     react_1.default.createElement("span", { className: b('text') }, text)));

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-popup {
+.pc-navigation-popup {
   position: fixed;
   top: calc(var(--header-height) - 16px);
   padding-right: 4px;
@@ -18,16 +18,16 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (max-width: 768px) {
-  .navigation-popup {
+  .pc-navigation-popup {
     display: none;
   }
 }
-.navigation-popup__link {
+.pc-navigation-popup__link {
   height: 36px;
   padding: 8px 12px;
   border-radius: 8px;
 }
-.navigation-popup__link:hover {
+.pc-navigation-popup__link:hover {
   color: var(--yc-color-text-primary);
   background-color: var(--yc-color-base-simple-hover);
 }

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationPopup = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../utils");
 const index_1 = require("../../../index");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('navigation-popup');
+const b = (0, utils_1.block)('navigation-popup');
 const NavigationPopup = ({ items, left, onClose }) => {
     const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
     const popupRef = (0, react_1.useRef)(null);

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.social-icon {
+.pc-social-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,10 +11,10 @@ unpredictable css rules order in build */
   border-radius: 50%;
   background-color: var(--yc-color-base-generic);
 }
-.social-icon:hover {
+.pc-social-icon:hover {
   background-color: var(--yc-color-base-generic-hover);
 }
-.social-icon__icon {
+.pc-social-icon__icon {
   width: 16px;
   height: 16px;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationSocialItem } from '../../../../models/navigation';
+import { NavigationSocialItem } from '../../../../models';
 export interface NavigationSocialItemProps extends NavigationSocialItem {
     className?: string;
 }

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const index_1 = require("../../../index");
-const utils_1 = require("../../../Media/Image/utils");
-const b = (0, bem_cn_lite_1.default)('social-icon');
+const utils_2 = require("../../../Media/Image/utils");
+const b = (0, utils_1.block)('social-icon');
 const SocialIcon = ({ icon, url, className }) => {
-    const iconData = (0, utils_1.getMediaImage)(icon);
+    const iconData = (0, utils_2.getMediaImage)(icon);
     return (react_1.default.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
         react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, iconData))));
 };

package/build/cjs/components/navigation/containers/Layout/Layout.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationData } from '../../../../models';
 export interface LayoutProps {
     navigation?: NavigationData;
+    children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;
 export default Layout;

package/build/cjs/components/navigation/containers/Layout/Layout.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importDefault)(require("react"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
+const utils_1 = require("../../../../utils");
 const Header_1 = (0, tslib_1.__importDefault)(require("../../components/Header/Header"));
-const b = (0, bem_cn_lite_1.default)('layout');
+const b = (0, utils_1.block)('layout');
 const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
     navigation && react_1.default.createElement(Header_1.default, { data: navigation.header, logo: navigation.logo }),
     react_1.default.createElement("main", { className: b('content') }, children)));

package/build/cjs/models/navigation.d.ts

@@ -31,6 +31,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogo {
     icon: ImageProps;
     text?: string;

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.header {
+.pc-header {
   position: sticky;
   z-index: 98;
   top: 0;
@@ -11,37 +11,37 @@ unpredictable css rules order in build */
   background-color: var(--yc-color-base-background);
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
-.header__wrapper {
+.pc-header__wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .header__mobile-menu-button {
+  .pc-header__mobile-menu-button {
     display: none;
   }
 }
-.header__navigation, .header__left, .header__right {
+.pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;
 }
-.header__navigation {
+.pc-header__navigation {
   position: relative;
   margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
 }
 @media (max-width: 768px) {
-  .header__navigation {
+  .pc-header__navigation {
     display: none;
   }
 }
-.header__right {
+.pc-header__right {
   flex: 0;
   justify-content: flex-end;
 }
-.header__navigation-container {
+.pc-header__navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
@@ -49,37 +49,37 @@ unpredictable css rules order in build */
   align-items: center;
   margin-right: 20px;
 }
-.header__buttons {
+.pc-header__buttons {
   display: flex;
 }
 @media (max-width: 768px) {
-  .header__buttons {
+  .pc-header__buttons {
     display: none;
   }
 }
-.header__buttons > *:not(:last-child) {
+.pc-header__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
-.header__button {
+.pc-header__button {
   margin-top: 0;
 }
-.header__logo {
+.pc-header__logo {
   margin: 0 32px 0 0;
   cursor: pointer;
 }
 @media (max-width: 768px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     justify-content: flex-end;
   }
-  .header__left {
+  .pc-header__left {
     flex: 1 0 0;
   }
 }
 @media (max-width: 576px) {
-  .header__navigation-container {
+  .pc-header__navigation-container {
     margin-right: 12px;
   }
-  .header__logo {
+  .pc-header__logo {
     margin-right: 0;
   }
 }

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils';
 import { Col, Grid, Row } from '../../../../grid';
 import OutsideClick from '../../../OutsideClick/OutsideClick';
 import Control from '../../../Control/Control';

package/build/esm/components/navigation/components/Logo/Logo.css

@@ -1,10 +1,10 @@
-.logo {
+.pc-logo {
   margin: 0;
 }
 
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.logo {
+.pc-logo {
   display: flex;
   align-items: center;
   font-weight: var(--yc-text-accent-font-weight);
@@ -13,11 +13,11 @@ unpredictable css rules order in build */
   color: var(--pc-text-header-color);
   font-weight: var(--yc-text-accent-font-weight);
 }
-.logo__icon {
+.pc-logo__icon {
   display: flex;
   margin-right: 8px;
   object-fit: contain;
 }
-.logo__text {
+.pc-logo__text {
   white-space: nowrap;
 }

package/build/esm/components/navigation/components/Logo/Logo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils';
 import RouterLink from '../../../RouterLink/RouterLink';
 import { getMediaImage } from '../../../Media/Image/utils';
 import { Image } from '../../../index';

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.mobile-navigation {
+.pc-mobile-navigation {
   position: fixed;
   z-index: 100;
   top: var(--header-height);
@@ -14,17 +14,17 @@ unpredictable css rules order in build */
   line-height: var(--yc-text-body-2-line-height);
 }
 @media (min-width: 769px) {
-  .mobile-navigation {
+  .pc-mobile-navigation {
     display: none;
   }
 }
-.mobile-navigation__wrapper {
+.pc-mobile-navigation__wrapper {
   padding: 32px 20px;
 }
-.mobile-navigation__button {
+.pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.mobile-navigation__links {
+.pc-mobile-navigation__links {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -33,13 +33,13 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.mobile-navigation__links-item:not(:last-child) {
+.pc-mobile-navigation__links-item:not(:last-child) {
   margin-bottom: 24px;
 }
-.mobile-navigation__dropdown-item:not(:last-child) {
+.pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }
-.mobile-navigation__popup {
+.pc-mobile-navigation__popup {
   z-index: 101;
   display: flex;
   flex-direction: column;
@@ -52,7 +52,7 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (min-width: 769px) {
-  .mobile-navigation__popup {
+  .pc-mobile-navigation__popup {
     display: none;
   }
 }

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

@@ -1,6 +1,6 @@
-import block from 'bem-cn-lite';
 import React, { useRef, useCallback } from 'react';
 import { Popup, Portal } from '@gravity-ui/uikit';
+import { block } from '../../../../utils';
 import Foldable from '../../../Foldable/Foldable';
 import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationItem from '../NavigationItem/NavigationItem';

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

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation {
+.pc-navigation {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }
-.navigation__links {
+.pc-navigation__links {
   position: relative;
   display: flex;
   align-items: center;
@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   padding: 0;
   list-style: none;
 }
-.navigation__links-item {
+.pc-navigation__links-item {
   position: relative;
   height: var(--header-height);
   line-height: var(--header-height);
@@ -21,22 +21,22 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
 }
-.utilityfocus .navigation__links-item:focus {
+.utilityfocus .pc-navigation__links-item:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation__links-item:hover, .navigation__links-item:active {
+.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
   color: var(--yc-color-text-link);
 }
-.navigation__links-item:not(:last-child) {
+.pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;
 }
-.navigation__slider-container {
+.pc-navigation__slider-container {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.navigation__slider {
+.pc-navigation__slider {
   width: 100%;
   height: 2px;
   background-color: var(--yc-color-text-link);

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

@@ -1,13 +1,12 @@
 import { __rest } from "tslib";
 import _ from 'lodash';
-import block from 'bem-cn-lite';
 import React, { Fragment, useState, useEffect, useCallback, useContext, useRef, } from 'react';
+import { block } from '../../../../utils';
 import OverflowScroller from '../../../OverflowScroller/OverflowScroller';
 import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import { LocationContext } from '../../../../context/locationContext';
-import { BreakpointContext } from '../../../../context/breakpointContext';
 import './Navigation.css';
 const b = block('navigation');
 const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
@@ -18,7 +17,6 @@ const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) =
 };
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = useContext(LocationContext);
-    const breakpoint = useContext(BreakpointContext);
     const itemRefs = useRef([]);
     const [itemPositions, setItemPosition] = useState([]);
     const [lastLeftScroll, setLastLeftScroll] = useState(0);
@@ -55,7 +53,7 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     useEffect(() => {
         hidePopup();
-    }, [hidePopup, asPath, pathname, breakpoint]);
+    }, [hidePopup, asPath, pathname]);
     return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
         React.createElement("nav", null,
             React.createElement("ul", { className: b('links') }, links.map((link, index) => {

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

@@ -1,33 +1,33 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-item {
+.pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
 }
-.navigation-item_type_link {
+.pc-navigation-item_type_link {
   color: var(--yc-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
 }
-.utilityfocus .navigation-item_type_link:focus {
+.utilityfocus .pc-navigation-item_type_link:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
+.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
   color: var(--yc-color-text-link);
 }
-.navigation-item_type_button {
+.pc-navigation-item_type_button {
   display: inline-block;
 }
-.navigation-item__arrow {
+.pc-navigation-item__arrow {
   position: relative;
   top: -2px;
   width: 9px;
   height: 9px;
   margin-left: 5px;
 }
-.navigation-item__icon {
+.pc-navigation-item__icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -35,7 +35,7 @@ unpredictable css rules order in build */
   border-radius: 50%;
   object-fit: cover;
 }
-.navigation-item__dropdown {
+.pc-navigation-item__dropdown {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

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

@@ -1,8 +1,6 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
+import { NavigationItemData } from '../../../../models';
 import './NavigationItem.css';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

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

@@ -1,8 +1,7 @@
 import { __rest } from "tslib";
 import React, { Fragment, useContext, useMemo } from 'react';
-import block from 'bem-cn-lite';
+import { block, getLinkProps } from '../../../../utils';
 import { RouterLink, ToggleArrow, Button, Image } from '../../../index';
-import { getLinkProps } from '../../../../utils';
 import { LocationContext } from '../../../../context/locationContext';
 import { NavigationItemType, } from '../../../../models';
 import { NavigationArrow } from '../../../../icons';

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-popup {
+.pc-navigation-popup {
   position: fixed;
   top: calc(var(--header-height) - 16px);
   padding-right: 4px;
@@ -18,16 +18,16 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (max-width: 768px) {
-  .navigation-popup {
+  .pc-navigation-popup {
     display: none;
   }
 }
-.navigation-popup__link {
+.pc-navigation-popup__link {
   height: 36px;
   padding: 8px 12px;
   border-radius: 8px;
 }
-.navigation-popup__link:hover {
+.pc-navigation-popup__link:hover {
   color: var(--yc-color-text-primary);
   background-color: var(--yc-color-base-simple-hover);
 }

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import block from 'bem-cn-lite';
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Portal } from '@gravity-ui/uikit';
+import { block } from '../../../../utils';
 import { OutsideClick } from '../../../index';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationPopup.css';

package/build/esm/components/navigation/components/SocialIcon/SocialIcon.css

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.social-icon {
+.pc-social-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,10 +11,10 @@ unpredictable css rules order in build */
   border-radius: 50%;
   background-color: var(--yc-color-base-generic);
 }
-.social-icon:hover {
+.pc-social-icon:hover {
   background-color: var(--yc-color-base-generic-hover);
 }
-.social-icon__icon {
+.pc-social-icon__icon {
   width: 16px;
   height: 16px;
 }

package/build/esm/components/navigation/components/SocialIcon/SocialIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationSocialItem } from '../../../../models/navigation';
+import { NavigationSocialItem } from '../../../../models';
 import './SocialIcon.css';
 export interface NavigationSocialItemProps extends NavigationSocialItem {
     className?: string;

package/build/esm/components/navigation/components/SocialIcon/SocialIcon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils';
 import { Image } from '../../../index';
 import { getMediaImage } from '../../../Media/Image/utils';
 import './SocialIcon.css';

package/build/esm/components/navigation/containers/Layout/Layout.d.ts

@@ -3,6 +3,7 @@ import { NavigationData } from '../../../../models';
 import './Layout.css';
 export interface LayoutProps {
     navigation?: NavigationData;
+    children?: React.ReactNode;
 }
 declare const Layout: React.FC<LayoutProps>;
 export default Layout;

package/build/esm/components/navigation/containers/Layout/Layout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils';
 import Header from '../../components/Header/Header';
 import './Layout.css';
 const b = block('layout');

package/build/esm/models/navigation.d.ts

@@ -31,6 +31,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogo {
     icon: ImageProps;
     text?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.7.0-alpha.8",
+  "version": "1.7.0-alpha.9",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/navigation.d.ts

@@ -31,6 +31,8 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export interface NavigationLogo {
     icon: ImageProps;
     text?: string;