@gravity-ui/page-constructor 5.18.1-alpha.2 → 5.18.1-alpha.3

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 // TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PlayFill } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
@@ -21,8 +21,11 @@ export const AUTOPLAY_ATTRIBUTES = {
     autoplay: 1,
     mute: 1,
 };
+const NO_AUTOPLAY_ATTRIBUTES = {
+    autoplay: 0,
+};
 const b = block('VideoBlock');
-function getVideoSrc(stream, record) {
+function getYoutubeVideoSrc(stream, record) {
     if (!stream && !record) {
         return null;
     }
@@ -40,22 +43,22 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
-    const src = getVideoSrc(stream, record);
+    const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
     const ref = useRef(null);
-    const iframeRef = useRef();
     const [hidePreview, setHidePreview] = useState(false);
-    const norender = (!stream && !record) || !src;
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
-    const fullId = id || uuidv4();
+    const fullId = useMemo(() => id || uuidv4(), [id]);
+    const [isPlaying, setIsPlaying] = useState(!previewImg);
+    const iframeSrc = src && isPlaying
+        ? `${src}?${getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES)))}`
+        : undefined;
     const onPreviewClick = useCallback(() => {
         handleAnalytics(analyticsEvents);
-        if (iframeRef.current) {
-            iframeRef.current.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
-        }
+        setIsPlaying(true);
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
-    }, [handleAnalytics, analyticsEvents, src, attributes]);
+    }, [handleAnalytics, analyticsEvents]);
     useEffect(() => {
         const updateSize = debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
@@ -66,36 +69,20 @@ const VideoBlock = (props) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [height]);
-    useEffect(() => {
-        if (norender) {
-            return;
-        }
-        if (ref.current && !iframeRef.current) {
-            const iframe = document.createElement('iframe');
-            iframe.id = fullId;
-            if (!previewImg) {
-                iframe.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (autoplay ? AUTOPLAY_ATTRIBUTES : {})))}`;
-            }
-            iframe.width = '100%';
-            iframe.height = '100%';
-            iframe.title = i18n('iframe-title');
-            iframe.frameBorder = '0';
-            iframe.setAttribute('allowfullscreen', 'true');
-            iframe.setAttribute('allow', 'autoplay');
-            iframe.setAttribute('loading', 'lazy');
-            ref.current.appendChild(iframe);
-            iframeRef.current = iframe;
-        }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
+    const iframeContent = useMemo(() => {
+        return (React.createElement("iframe", { id: fullId, src: iframeSrc, width: "100%", height: "100%", title: i18n('iframe-title'), frameBorder: "0", allowFullScreen: true, allow: "autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock", loading: "lazy" }));
+    }, [fullId, iframeSrc]);
     useEffect(() => {
         setHidePreview(false);
-    }, [src, setHidePreview]);
-    if (norender) {
+    }, [src]);
+    if (!src) {
         return null;
     }
-    return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
-        React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
-        playButton || (React.createElement("button", { title: "Play", className: b('button') },
-            React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 })))))));
+    return (React.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
+        iframeContent,
+        previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+            React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
+            playButton || (React.createElement("button", { title: "Play", className: b('button') },
+                React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 })))))));
 };
 export default VideoBlock;

package/build/esm/constructor-items.d.ts

@@ -34,9 +34,9 @@ export declare const subBlockMap: {
     "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
-    button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
+    button: import("react").FC<Pick<import("./navigation").NavigationItemProps, "className"> & import("./models").ButtonProps>;
     social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
-    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
-    link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("./navigation").NavigationItemProps & import("./models").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("./navigation").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
 };

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
@@ -51,7 +52,8 @@ export const Constructor = (props) => {
                         React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
 };
 export const PageConstructor = (props) => {
-    const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
+    const { isAnimationEnabled = true } = useContext(ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = __rest(props, ["content"]);
     return (React.createElement(AnimateContext.Provider, { value: { animated } },
         React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
 };

package/build/esm/context/imageContext/imageContext.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ImageBaseProps } from '../../components';
-export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
+import type { ImageBaseProps } from '../../components';
 export type ImageContextProps = {
-    Image?: Image;
+    Image?: React.ComponentType<ImageBaseProps>;
 };
 export declare const ImageContext: React.Context<ImageContextProps>;

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
+    isAnimationEnabled?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

package/build/esm/editor/components/AddBlock/AddBlock.js

@@ -1,22 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 // TODO fix in https://github.com/gravity-ui/page-constructor/issues/965
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Plus } from '@gravity-ui/icons';
 import { Popup, TextInput } from '@gravity-ui/uikit';
 import { blockMap } from '../../../constructor-items';
 import { block } from '../../../utils';
-import EditorBlocksData from '../../data';
+import { getEditorBlocksData } from '../../data';
 import './AddBlock.css';
 const b = block('add-block');
 const sortedBlockNames = Object.keys(blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = useState(false);
     const [search, setSearch] = useState('');
+    const [editorBlocksData, setEditorBlocksData] = useState(null);
     const ref = useRef(null);
-    const blocks = useMemo(() => sortedBlockNames.filter((blockName) => EditorBlocksData[blockName].meta.title
-        .toLocaleLowerCase()
-        .startsWith(search.toLocaleLowerCase())), [search]);
+    const blocks = useMemo(() => {
+        if (!editorBlocksData) {
+            return [];
+        }
+        return sortedBlockNames.filter((blockName) => {
+            var _a;
+            return (_a = editorBlocksData[blockName]) === null || _a === void 0 ? void 0 : _a.meta.title.toLocaleLowerCase().startsWith(search.toLocaleLowerCase());
+        });
+    }, [editorBlocksData, search]);
+    useEffect(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await getEditorBlocksData();
+            setEditorBlocksData(data);
+        };
+        loadEditorBlocksData();
+    }, []);
     return (React.createElement("div", { className: b(null, className), ref: ref },
         React.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
@@ -28,8 +42,11 @@ const AddBlock = ({ onAdd, className }) => {
                 React.createElement(TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             React.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
                 var _a;
-                const blockData = EditorBlocksData[blockName];
-                const Preview = blockData === null || blockData === void 0 ? void 0 : blockData.preview;
+                const blockData = editorBlocksData === null || editorBlocksData === void 0 ? void 0 : editorBlocksData[blockName];
+                if (!blockData) {
+                    return null;
+                }
+                const Preview = blockData.preview;
                 return (React.createElement("div", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);

package/build/esm/editor/data/index.d.ts

@@ -9,5 +9,6 @@ export interface EdiorBlockData {
         description?: string;
     };
 }
-declare const EditorBlocksData: Record<BlockType, EdiorBlockData>;
-export default EditorBlocksData;
+type EditorBlocksData = Partial<Record<BlockType, EdiorBlockData>>;
+declare function getEditorBlocksData(): Promise<EditorBlocksData>;
+export { EditorBlocksData, getEditorBlocksData };

package/build/esm/editor/data/index.js

@@ -1,10 +1,14 @@
 import { BlockType } from '../../models';
 import { formatBlockName } from '../utils';
 import DefaultPreview from './previews/default-preview';
-const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+import HeaderBlock from './previews/header-block';
+const getBlockTemplate = (blockType) => import(`./templates/${blockType}.json`).then((data) => data.default);
 const getBlockPreview = (blockType) => {
     try {
-        return require(`./previews/${blockType}.tsx`).default;
+        if (blockType === BlockType.HeaderBlock) {
+            return HeaderBlock;
+        }
+        return DefaultPreview;
     }
     catch (err) {
         /*eslint-disable no-console */
@@ -12,13 +16,15 @@ const getBlockPreview = (blockType) => {
         return DefaultPreview;
     }
 };
-const EditorBlocksData = Object.values(BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || formatBlockName(blockType);
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
-    return previewData;
-}, {});
-export default EditorBlocksData;
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || formatBlockName(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+export { getEditorBlocksData };

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
+import React, { CSSProperties, DetailedHTMLProps, HTMLProps, ImgHTMLAttributes, ReactNode } from 'react';
 import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase, AnalyticsEventsProp, ClassNameProps, QAProps } from '../common';
@@ -96,8 +96,9 @@ interface LoopProps {
     start: number;
     end?: number;
 }
-export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
+export interface ImageInfoProps extends Pick<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'aria-describedby' | 'loading'> {
     alt?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
 }
 export interface ImageObjectProps extends ImageInfoProps {
@@ -126,6 +127,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase {
     controls?: MediaVideoControlsType;
     customControlsOptions?: CustomControlsOptions;
     ariaLabel?: string;
+    contain?: boolean;
 }
 export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     url: string;
@@ -178,9 +180,12 @@ export type ThemedMediaVideoProps = ThemeSupporting<MediaVideoProps>;
 export interface MediaComponentVideoProps extends AnalyticsEventsBase {
     video: MediaVideoProps;
     height?: number;
-    ratio?: number;
+    ratio?: number | 'auto';
     previewImg?: string;
 }
+export interface MediaComponentVideoIframeProps {
+    videoIframe: string;
+}
 export interface MediaComponentYoutubeProps {
     youtube: string;
     previewImg?: string;
@@ -200,7 +205,7 @@ export interface MediaComponentIframeProps {
     iframe: IframeProps;
     margins?: boolean;
 }
-export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
+export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ThemeSupporting } from '../utils';
 import { ButtonProps, ImageProps } from './constructor-items';
 export declare enum NavigationItemType {
@@ -69,6 +70,12 @@ export type ThemedNavigationLogoData = NavigationLogoData & ThemeSupporting<Navi
 export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
+    /**
+     * Items for the navigation header on mobile devices.
+     * They are located to the right of the Logo and to the left of the MobileMenuButton.
+     * @type {NavigationItemModel[]}
+     */
+    customMobileHeaderItems?: NavigationItemModel[];
     iconSize?: number;
     withBorder?: boolean;
     withBorderOnScroll?: boolean;
@@ -90,4 +97,5 @@ export interface NavigationData {
     logo: ThemedNavigationLogoData;
     header: HeaderData;
     footer?: FooterData;
+    renderNavigation?: () => React.ReactNode;
 }

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

@@ -27,18 +27,43 @@ unpredictable css rules order in build */
   }
 }
 
+.pc-desktop-navigation__mobile-navigation.pc-desktop-navigation__mobile-navigation {
+  justify-content: flex-end;
+}
+@media (min-width: 769px) {
+  .pc-desktop-navigation__mobile-navigation.pc-desktop-navigation__mobile-navigation {
+    display: none;
+  }
+}
+
+.pc-desktop-navigation__mobile-navigation-container {
+  padding-right: 8px;
+}
+.pc-desktop-navigation__mobile-navigation-container:has(.pc-overflow-scroller__arrow) .pc-desktop-navigation__mobile-navigation {
+  justify-content: flex-start;
+}
+.pc-desktop-navigation__mobile-navigation-container:has(.pc-overflow-scroller__arrow_type_right) {
+  padding-right: 16px;
+}
 .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 {
+@media (max-width: 768px) {
+  .pc-desktop-navigation__right {
+    flex: 3 0 0;
+    max-width: 50%;
+  }
+}
+.pc-desktop-navigation__navigation-container, .pc-desktop-navigation__mobile-navigation-container {
   display: flex;
   overflow-x: hidden;
   flex: 1 0 0;
   justify-content: space-between;
   align-items: center;
+}
+.pc-desktop-navigation__navigation-container {
   margin-right: 32px;
 }
 .pc-desktop-navigation__button {
@@ -48,7 +73,7 @@ unpredictable css rules order in build */
   margin: 0 32px 0 0;
   cursor: pointer;
 }
-.pc-desktop-navigation__buttons, .pc-desktop-navigation__links {
+.pc-desktop-navigation__links, .pc-desktop-navigation__buttons, .pc-desktop-navigation__mobile-buttons {
   display: flex;
   align-items: center;
   margin: 0;
@@ -63,6 +88,14 @@ unpredictable css rules order in build */
 .pc-desktop-navigation__buttons > *:not(:last-child) {
   margin-right: 16px;
 }
+@media (min-width: 769px) {
+  .pc-desktop-navigation__mobile-buttons {
+    display: none;
+  }
+}
+.pc-desktop-navigation__mobile-buttons .pc-desktop-navigation__item:not(:last-child) {
+  margin-right: 0;
+}
 .pc-desktop-navigation__links {
   position: relative;
   font-size: var(--g-text-body-2-font-size);
@@ -78,6 +111,12 @@ unpredictable css rules order in build */
   .pc-desktop-navigation__navigation-container {
     justify-content: flex-end;
   }
+  .pc-desktop-navigation__navigation-container, .pc-desktop-navigation__mobile-navigation-container {
+    justify-content: flex-end;
+  }
+  .pc-desktop-navigation__navigation-container {
+    flex: 0 0 0;
+  }
   .pc-desktop-navigation__left {
     flex: 1 0 0;
   }

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

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

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

@@ -7,13 +7,16 @@ import { MobileMenuButton } from '../MobileMenuButton/MobileMenuButton';
 import { NavigationList } from '../NavigationList/NavigationList';
 import './DesktopNavigation.css';
 const b = block('desktop-navigation');
-const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (React.createElement("div", { className: b('wrapper') },
+export const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, customMobileHeaderItems, isSidebarOpened, onSidebarOpenedChange, onActiveItemChange, activeItemId, }) => (React.createElement("div", { className: b('wrapper') },
     logo && (React.createElement("div", { className: b('left') },
         React.createElement(Logo, Object.assign({}, logo, { className: b('logo') })))),
     React.createElement("div", { className: b('navigation-container') },
         React.createElement(OverflowScroller, { className: b('navigation'), onScrollStart: onActiveItemChange },
             React.createElement(NavigationList, { items: leftItemsWithIconSize, onActiveItemChange: onActiveItemChange, className: b('links'), itemClassName: b('item'), column: ItemColumnName.Left, activeItemId: activeItemId, menuLayout: NavigationLayout.Desktop }))),
     React.createElement("div", { className: b('right') },
+        customMobileHeaderItems && (React.createElement("div", { className: b('mobile-navigation-container') },
+            React.createElement(OverflowScroller, { className: b('mobile-navigation'), onScrollStart: onActiveItemChange, arrowSize: 18 },
+                React.createElement(NavigationList, { items: customMobileHeaderItems, onActiveItemChange: onActiveItemChange, className: b('mobile-buttons'), itemClassName: b('item'), column: ItemColumnName.Left, activeItemId: activeItemId, menuLayout: NavigationLayout.Dropdown })))),
         React.createElement(MobileMenuButton, { isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
         rightItemsWithIconSize && (React.createElement(NavigationList, { onActiveItemChange: onActiveItemChange, column: ItemColumnName.Right, items: rightItemsWithIconSize, activeItemId: activeItemId, className: b('buttons'), itemClassName: b('item'), menuLayout: NavigationLayout.Desktop })))));
 export default DesktopNavigation;

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

@@ -5,5 +5,5 @@ export type LogoProps = ThemedNavigationLogoData & {
     className?: string;
     alt?: string;
 };
-declare const Logo: React.FC<LogoProps>;
+export declare const Logo: React.FC<LogoProps>;
 export default Logo;

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

@@ -9,7 +9,7 @@ import { block, getLinkProps, getThemedValue } from '../../../utils';
 import { i18n } from './i18n';
 import './Logo.css';
 const b = block('logo');
-const Logo = (_a) => {
+export const Logo = (_a) => {
     var { alt = i18n('image-alt') } = _a, restProps = __rest(_a, ["alt"]);
     const props = Object.assign(Object.assign({}, restProps), { alt });
     const { hostname, Link } = useContext(LocationContext);

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { MobileNavigationProps } from '../../models';
 import './MobileNavigation.css';
-declare const MobileNavigation: React.FC<MobileNavigationProps>;
+export declare const MobileNavigation: React.FC<MobileNavigationProps>;
 export default MobileNavigation;

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

@@ -8,7 +8,7 @@ import { ItemColumnName, NavigationLayout } from '../../models';
 import { NavigationList } from '../NavigationList/NavigationList';
 import './MobileNavigation.css';
 const b = block('mobile-navigation');
-const MobileNavigation = (_a) => {
+export const MobileNavigation = (_a) => {
     var { isOpened, topItems, bottomItems } = _a, props = __rest(_a, ["isOpened", "topItems", "bottomItems"]);
     const [isMounted, setIsMounted] = React.useState(false);
     useMount(() => setIsMounted(true));

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
 import './Navigation.css';
-export interface NavigationProps extends ClassNameProps {
+export interface NavigationComponentProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }
-export declare const Navigation: React.FC<NavigationProps>;
+export declare const Navigation: React.FC<NavigationComponentProps>;
 export default Navigation;

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

@@ -1,42 +1,23 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useState } from 'react';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import { Col, Grid, Row } from '../../../grid';
 import { block } from '../../../utils';
-import { getNavigationItemWithIconSize } from '../../utils';
+import { useActiveNavItem, useShowBorder } from '../../hooks';
 import DesktopNavigation from '../DesktopNavigation/DesktopNavigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import './Navigation.css';
 const b = block('navigation');
 export const Navigation = ({ data, logo, className }) => {
-    const { leftItems, rightItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
+    const { leftItems, rightItems, customMobileHeaderItems, iconSize = 20, withBorder = false, withBorderOnScroll = true, } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
-    const [activeItemId, setActiveItemId] = useState(undefined);
-    const [showBorder, setShowBorder] = useState(withBorder);
-    const getNavigationItem = getNavigationItemWithIconSize(iconSize);
-    const leftItemsWithIconSize = useMemo(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
-    const rightItemsWithIconSize = useMemo(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
-    const onActiveItemChange = (id) => {
-        setActiveItemId(id);
-    };
+    const [showBorder] = useShowBorder(withBorder, withBorderOnScroll);
+    const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = useActiveNavItem(iconSize, leftItems, rightItems);
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
-    useEffect(() => {
-        if (!withBorderOnScroll)
-            return () => { };
-        const showBorderOnScroll = () => {
-            if (!withBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        const scrollHandler = debounce(showBorderOnScroll, 20);
-        window.addEventListener('scroll', scrollHandler, { passive: true });
-        return () => window.removeEventListener('scroll', scrollHandler);
-    });
     return (React.createElement(Grid, { className: b({ 'with-border': showBorder }, className) },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("nav", null,
-                    React.createElement(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                    React.createElement(DesktopNavigation, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
                     React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         React.createElement(MobileNavigation, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })))))));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { NavigationItemProps } from '../../models';
 import './NavigationItem.css';
-declare const NavigationItem: React.FC<NavigationItemProps>;
+export declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

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

@@ -9,7 +9,7 @@ import './NavigationItem.css';
 const b = block('navigation-item');
 const ANALYTICS_ID = 'navigation';
 const nonComplexNavigationItemTypes = NavigationItemTypes.filter((type) => type !== NavigationItemType.Dropdown);
-const NavigationItem = (_a) => {
+export const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
     const navItemMap = useNavigationItemMap();

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

@@ -1,7 +1,7 @@
 export declare const useNavigationItemMap: () => {
-    button: import("react").FC<Pick<import("../../../models").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
-    social: import("react").FC<import("../../SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
-    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../../models").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
-    link: import("react").FC<import("../../../models").NavigationItemProps & import("../../../..").NavigationLinkItem>;
-    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../../models").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
+    button: import("react").FC<Pick<import("../../..").NavigationItemProps, "className"> & import("../../../..").ButtonProps>;
+    social: import("react").FC<import("../../..").NavigationSocialItemOwnProps>;
+    dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("../../..").NavigationItemProps & import("../../../..").NavigationDropdownItem) => JSX.Element;
+    link: import("react").FC<import("../../..").NavigationItemProps & import("../../../..").NavigationLinkItem>;
+    "github-button": ({ text, url, className, label, size, icon, urlTitle, }: import("../../..").NavigationItemProps & import("../../../..").NavigationGithubButton) => JSX.Element;
 };

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

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

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

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React from 'react';
 import { getItemClickHandler } from '../../utils';
 import NavigationItem from '../NavigationItem';
-const NavigationListItem = (_a) => {
+export const NavigationListItem = (_a) => {
     var { column, index, activeItemId, onActiveItemChange } = _a, props = __rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;

package/build/esm/navigation/components/Standalone/index.d.ts

@@ -1,3 +1,3 @@
-import { NavigationProps } from './../../components/Navigation/Navigation';
-declare const Standalone: (props: NavigationProps) => JSX.Element;
+import { NavigationComponentProps } from './../../components/Navigation/Navigation';
+declare const Standalone: (props: NavigationComponentProps) => JSX.Element;
 export default Standalone;