@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

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

@@ -7,6 +7,7 @@ export declare enum Theme {
     Light = "light",
     Dark = "dark"
 }
+export declare const themeNames: Record<Theme, string>;
 /**
  * @deprecated Pixel will be deleted
  */
@@ -63,6 +64,9 @@ export interface Metrika {
 export interface ClassNameProps {
     className?: string;
 }
+export interface QAProps {
+    qa?: string;
+}
 export type Timeout = ReturnType<typeof setTimeout> | undefined;
 export declare enum PredefinedEventTypes {
     Default = "default-event",
@@ -79,7 +83,8 @@ export declare enum DefaultEventNames {
     HubspotFormSubmit = "hubspot-form-submit",
     QuoteButton = "quote-button-click",
     BackLink = "back-link-click",
-    Breadcrumb = "breadcrumb-click"
+    Breadcrumb = "breadcrumb-click",
+    VideoPreview = "video-preview-click"
 }
 export type AnalyticsCounters = {
     include?: string[];

package/build/cjs/models/common.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.Theme = void 0;
+exports.DefaultEventNames = exports.PredefinedEventTypes = exports.PixelEventType = exports.themeNames = exports.Theme = void 0;
 var Theme;
 (function (Theme) {
     Theme["Light"] = "light";
     Theme["Dark"] = "dark";
 })(Theme = exports.Theme || (exports.Theme = {}));
+exports.themeNames = {
+    [Theme.Light]: 'Light',
+    [Theme.Dark]: 'Dark',
+};
 /**
  * @deprecated Pixel will be deleted from package
  */
@@ -48,4 +52,5 @@ var DefaultEventNames;
     DefaultEventNames["QuoteButton"] = "quote-button-click";
     DefaultEventNames["BackLink"] = "back-link-click";
     DefaultEventNames["Breadcrumb"] = "breadcrumb-click";
+    DefaultEventNames["VideoPreview"] = "video-preview-click";
 })(DefaultEventNames = exports.DefaultEventNames || (exports.DefaultEventNames = {}));

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

@@ -154,14 +154,11 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     disableShadow?: boolean;
 }
-export interface MediaContentProps {
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
     title: string;
     description?: string;
-    additionalInfo?: string;
+    /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
-    links?: LinkProps[];
-    buttons?: ButtonProps[];
-    size?: ContentSize;
 }
 export interface MediaBlockProps extends MediaBaseBlockProps {
     media: ThemeSupporting<MediaProps>;
@@ -210,6 +207,7 @@ export interface TabsBlockProps extends Animatable {
     centered?: boolean;
     direction?: MediaDirection;
     items: TabsBlockItem[];
+    contentSize?: ContentSize;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
     title?: TitleItemProps | string;
@@ -243,17 +241,22 @@ export interface IconsBlockProps {
         src: string;
     }[];
 }
-export interface ContentLayoutBlockProps {
-    properties?: {
-        size?: ContentSize;
-        background?: BackgroundImageProps;
-        centered?: boolean;
-        theme?: ContentTheme;
-        textWidth?: ContentTextSize;
-    };
+interface ContentLayoutBlockParams {
+    size?: ContentSize;
+    background?: BackgroundImageProps;
+    centered?: boolean;
+    theme?: ContentTheme;
+    textWidth?: ContentTextSize;
+}
+export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }
+export interface ContentItemProps {
+    title?: string;
+    text?: string;
+    icon: ThemedImage;
+}
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     text?: string;
@@ -264,6 +267,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    list?: ContentItemProps[];
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",

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

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils/theme';
-import { AnalyticsEventsBase, ClassNameProps, PixelEventType } from '../common';
+import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
 export declare enum AuthorType {
     Column = "column",
     Line = "line"
@@ -90,11 +90,10 @@ export interface ImageDeviceProps extends ImageInfoProps {
 }
 export type ImageProps = string | ImageObjectProps | ImageDeviceProps;
 export type ThemedImage = ThemeSupporting<ImageProps>;
-export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps> {
+export interface BackgroundImageProps extends React.HTMLProps<HTMLDivElement>, Partial<ImageDeviceProps>, Partial<ImageObjectProps>, QAProps {
     style?: CSSProperties;
     imageClassName?: string;
     hide?: boolean;
-    qa?: string;
 }
 export interface MediaVideoProps extends AnalyticsEventsBase {
     src: string[];
@@ -327,12 +326,11 @@ export interface PriceDetailedProps extends CardBaseProps {
     foldable?: PriceFoldableDetailsProps;
     labelsDefaultText?: Record<PriceLabelColor, string>;
 }
-export interface AuthorProps {
+export interface AuthorProps extends QAProps {
     author: AuthorItem;
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
-    dataQa?: string;
 }
 export interface TitleProps {
     title?: TitleItemProps | string;

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

@@ -1,13 +1,14 @@
 import React, { PropsWithChildren } from 'react';
-import { Animatable, Block, BlockDecoratorProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
+import { Animatable, BlockDecorationProps, ConstructorItem, ThemedMediaProps, WithChildren } from './';
 export interface PageData {
     content: PageContent;
 }
 export interface Menu {
     title: string;
 }
+export type ConstructorBlock = ConstructorItem | CustomBlock;
 export interface PageContent extends Animatable {
-    blocks: Block[];
+    blocks: ConstructorBlock[];
     menu?: Menu;
     background?: ThemedMediaProps;
 }
@@ -18,7 +19,6 @@ export interface CustomBlock {
     type: string;
     [key: string]: unknown;
 }
-export type ConstructorBlock = ConstructorItem | CustomBlock;
 export type LoadableData = any;
 export type FetchLoadableDataParams = {
     blockKey: string;
@@ -41,7 +41,7 @@ export interface CustomConfig {
     headers?: CustomItems;
     loadable?: LoadableConfig;
     decorators?: {
-        block?: ((props: BlockDecoratorProps) => React.ReactElement)[];
+        block?: ((props: BlockDecorationProps) => React.ReactElement)[];
     };
 }
 export {};

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

@@ -1,9 +1,7 @@
 import { PropsWithChildren } from 'react';
-export interface BlockDecorationProps extends PropsWithChildren {
-    id?: string;
+import { BlockBaseProps, BlockType } from './constructor-items';
+export interface BlockDecorationProps extends PropsWithChildren, BlockBaseProps {
+    type: BlockType | string;
+    index?: number;
 }
-export interface BlockDecoratorProps extends PropsWithChildren {
-    id: string | number;
-    isHeader?: boolean;
-}
-export type BlockDecorator = (props: BlockDecoratorProps) => React.ReactElement;
+export type BlockDecorator = (props: BlockDecorationProps) => React.ReactElement;

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

@@ -44,6 +44,8 @@ export interface NavigationButtonItem extends ButtonProps {
 export interface NavigationDropdownItem extends NavigationItemBase {
     type: NavigationItemType.Dropdown;
     items: NavigationLinkItem[];
+    hidePopup: () => void;
+    isActive: boolean;
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
@@ -51,8 +53,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     url: string;
 }
 export type NavigationItemModel = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
-export type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | NavigationDropdownItem;
 export interface NavigationLogoData {
     icon: ImageProps;
     text?: string;
@@ -63,6 +64,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

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

@@ -0,0 +1,92 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-desktop-navigation__wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--header-height);
+}
+@media (min-width: 769px) {
+  .pc-desktop-navigation__mobile-menu-button.pc-desktop-navigation__mobile-menu-button {
+    display: none;
+  }
+}
+
+.pc-desktop-navigation__navigation, .pc-desktop-navigation__left, .pc-desktop-navigation__right {
+  display: flex;
+  align-items: center;
+}
+.pc-desktop-navigation__navigation.pc-desktop-navigation__navigation {
+  position: relative;
+  flex: 1 0 0;
+  justify-content: flex-start;
+}
+@media (max-width: 768px) {
+  .pc-desktop-navigation__navigation.pc-desktop-navigation__navigation {
+    display: none;
+  }
+}
+
+.pc-desktop-navigation__right {
+  flex: 0;
+  justify-content: flex-end;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-desktop-navigation__navigation-container {
+  display: flex;
+  overflow-x: hidden;
+  flex: 1 0 0;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 32px;
+}
+.pc-desktop-navigation__button {
+  margin-top: 0;
+}
+.pc-desktop-navigation__logo {
+  margin: 0 32px 0 0;
+  cursor: pointer;
+}
+.pc-desktop-navigation__buttons, .pc-desktop-navigation__links {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+@media (max-width: 768px) {
+  .pc-desktop-navigation__buttons {
+    display: none;
+  }
+}
+.pc-desktop-navigation__buttons > *:not(:last-child) {
+  margin-right: 16px;
+}
+.pc-desktop-navigation__links {
+  position: relative;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-desktop-navigation__item {
+  position: relative;
+}
+.pc-desktop-navigation__item:not(:last-child) {
+  margin-right: 20px;
+}
+@media (max-width: 768px) {
+  .pc-desktop-navigation__navigation-container {
+    justify-content: flex-end;
+  }
+  .pc-desktop-navigation__left {
+    flex: 1 0 0;
+  }
+}
+@media (max-width: 576px) {
+  .pc-desktop-navigation__navigation-container {
+    margin-right: 12px;
+  }
+  .pc-desktop-navigation__logo {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DesktopNavigationProps } from '../../models';
+declare const DesktopNavigation: React.FC<DesktopNavigationProps>;
+export default DesktopNavigation;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
+const utils_1 = require("../../../utils");
+const models_1 = require("../../models");
+const Logo_1 = tslib_1.__importDefault(require("../Logo/Logo"));
+const MobileMenuButton_1 = require("../MobileMenuButton/MobileMenuButton");
+const NavigationList_1 = require("../NavigationList/NavigationList");
+const b = (0, utils_1.block)('desktop-navigation');
+const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (react_1.default.createElement("div", { className: b('wrapper') },
+    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(OverflowScroller_1.default, { className: b('navigation'), onScrollStart: onActiveItemChange },
+            react_1.default.createElement(NavigationList_1.NavigationList, { items: leftItemsWithIconSize, onActiveItemChange: onActiveItemChange, className: b('links'), itemClassName: b('item'), column: models_1.ItemColumnName.Left, activeItemId: activeItemId, menuLayout: models_1.NavigationLayout.Desktop }))),
+    react_1.default.createElement("div", { className: b('right') },
+        react_1.default.createElement(MobileMenuButton_1.MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+        rightItemsWithIconSize && (react_1.default.createElement(NavigationList_1.NavigationList, { onActiveItemChange: onActiveItemChange, column: models_1.ItemColumnName.Right, items: rightItemsWithIconSize, activeItemId: activeItemId, className: b('buttons'), itemClassName: b('item'), menuLayout: models_1.NavigationLayout.Desktop })))));
+exports.default = DesktopNavigation;

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

@@ -14,9 +14,9 @@ unpredictable css rules order in build */
   object-fit: contain;
 }
 .pc-logo__text {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   white-space: nowrap;
 }

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

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const components_1 = require("../../../components");
 const utils_1 = require("../../../components/Media/Image/utils");
 const RouterLink_1 = tslib_1.__importDefault(require("../../../components/RouterLink/RouterLink"));
-const ThemeValueContext_1 = require("../../../context/theme/ThemeValueContext");
+const theme_1 = require("../../../context/theme");
 const utils_2 = require("../../../utils");
 const b = (0, utils_2.block)('logo');
 const Logo = (props) => {
-    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const theme = (0, theme_1.useTheme)();
     const themedLogoProps = (0, utils_2.getThemedValue)(props, theme) || props;
     const imageData = (0, utils_1.getMediaImage)(themedLogoProps.icon || props.icon);
     const textData = themedLogoProps.text || props.text;

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

@@ -0,0 +1,7 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-mobile-menu-button.pc-mobile-menu-button {
+    display: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MobileMenuButtonProps } from '../../models';
+export declare const MobileMenuButton: React.FC<MobileMenuButtonProps>;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileMenuButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../../components");
+const icons_1 = require("../../../icons");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('mobile-menu-button');
+const ICON_SIZE = 36;
+const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (react_1.default.createElement(components_1.Control, { className: b(), onClick: (e) => {
+        e.stopPropagation();
+        onSidebarOpenedChange(!isSidebarOpened);
+    }, size: "l", icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: ICON_SIZE }));
+exports.MobileMenuButton = MobileMenuButton;

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

@@ -8,10 +8,17 @@ unpredictable css rules order in build */
   width: 100%;
   border-bottom-right-radius: var(--pc-border-radius);
   border-bottom-left-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-background);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  background-color: var(--g-color-base-background);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
+  max-height: calc(100vh - 2 * var(--header-height));
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+}
+.pc-mobile-navigation::-webkit-scrollbar {
+  display: none;
 }
 @media (min-width: 769px) {
   .pc-mobile-navigation {
@@ -24,9 +31,6 @@ unpredictable css rules order in build */
 .pc-mobile-navigation__button {
   margin-top: 24px;
 }
-.pc-mobile-navigation__nav {
-  margin-bottom: 24px;
-}
 .pc-mobile-navigation__rows {
   position: relative;
   display: flex;
@@ -35,10 +39,11 @@ unpredictable css rules order in build */
   margin: 0;
   padding: 0;
   list-style: none;
-}
-.pc-mobile-navigation__rows-item:not(:last-child) {
   margin-bottom: 24px;
 }
+.pc-mobile-navigation__rows:last-child {
+  margin-bottom: 0;
+}
 .pc-mobile-navigation__dropdown-item:not(:last-child) {
   margin-bottom: 16px;
 }
@@ -48,11 +53,11 @@ unpredictable css rules order in build */
   flex-direction: column;
   min-width: 220px;
   padding: 16px;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
   border-top-width: 0;
   border-radius: calc(var(--pc-border-radius) / 2);
-  background: var(--yc-color-base-float);
-  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+  background: var(--g-color-base-float);
+  box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
 }
 @media (min-width: 769px) {
   .pc-mobile-navigation__popup {

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

@@ -1,13 +1,4 @@
 import React from 'react';
-import { NavigationItemModel } from '../../../models';
-export interface MobileNavigationProps {
-    className?: string;
-    isOpened?: boolean;
-    topItems?: NavigationItemModel[];
-    bottomItems?: NavigationItemModel[];
-    activeItemId?: string;
-    onClose: () => void;
-    onActiveItemChange: (id?: string) => void;
-}
+import { MobileNavigationProps } from '../../models';
 declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

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

@@ -1,45 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const Foldable_1 = tslib_1.__importDefault(require("../../../components/Foldable/Foldable"));
-const models_1 = require("../../../models");
+const hooks_1 = require("../../../hooks");
 const utils_1 = require("../../../utils");
-const constants_1 = require("../../constants");
-const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
+const models_1 = require("../../models");
+const NavigationList_1 = require("../NavigationList/NavigationList");
 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') },
-        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 = ({ 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 ? undefined : `${column}-${index}`);
-        }
-    }, [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('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') {
+const MobileNavigation = (_a) => {
+    var { isOpened, topItems, bottomItems } = _a, props = tslib_1.__rest(_a, ["isOpened", "topItems", "bottomItems"]);
+    const [isMounted, setIsMounted] = react_1.default.useState(false);
+    (0, hooks_1.useMount)(() => setIsMounted(true));
+    if (!isMounted) {
         return null;
     }
-    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", { 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 }))))))));
+                topItems && (react_1.default.createElement(NavigationList_1.NavigationList, Object.assign({ className: b('rows'), items: topItems, column: models_1.ItemColumnName.Top, menuLayout: models_1.NavigationLayout.Mobile }, props))),
+                bottomItems && (react_1.default.createElement(NavigationList_1.NavigationList, Object.assign({ className: b('rows'), items: bottomItems, column: models_1.ItemColumnName.Bottom, menuLayout: models_1.NavigationLayout.Mobile }, props)))))));
 };
 exports.default = MobileNavigation;

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

@@ -1,20 +1,15 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-}
-.pc-navigation__links {
-  position: relative;
+  position: sticky;
+  z-index: 98;
+  top: 0;
   display: flex;
+  justify-content: center;
   align-items: center;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.pc-navigation__links-item {
-  position: relative;
+  height: var(--header-height);
+  background-color: var(--g-color-base-background);
 }
-.pc-navigation__links-item:not(:last-child) {
-  margin-right: 20px;
+.pc-navigation_with-border {
+  box-shadow: inset 0 -1px 0 var(--g-color-line-generic);
 }

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import { NavigationItemModel } from '../../../models/navigation';
+import { HeaderData, ThemedNavigationLogoData } from '../../../models';
 export interface NavigationProps {
-    links: NavigationItemModel[];
-    activeItemId?: string;
-    className?: string;
-    highlightActiveItem?: boolean;
-    onActiveItemChange: (id?: string) => void;
+    logo: ThemedNavigationLogoData;
+    data: HeaderData;
 }
-declare const Navigation: React.FC<NavigationProps>;
+export declare const Navigation: React.FC<NavigationProps>;
 export default Navigation;