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

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

@@ -9,16 +9,30 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const constructor_items_1 = require("../../../constructor-items");
 const utils_1 = require("../../../utils");
-const data_1 = tslib_1.__importDefault(require("../../data"));
+const data_1 = require("../../data");
 const b = (0, utils_1.block)('add-block');
 const sortedBlockNames = Object.keys(constructor_items_1.blockMap).sort();
 const AddBlock = ({ onAdd, className }) => {
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [search, setSearch] = (0, react_1.useState)('');
+    const [editorBlocksData, setEditorBlocksData] = (0, react_1.useState)(null);
     const ref = (0, react_1.useRef)(null);
-    const blocks = (0, react_1.useMemo)(() => sortedBlockNames.filter((blockName) => data_1.default[blockName].meta.title
-        .toLocaleLowerCase()
-        .startsWith(search.toLocaleLowerCase())), [search]);
+    const blocks = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        const loadEditorBlocksData = async () => {
+            const data = await (0, data_1.getEditorBlocksData)();
+            setEditorBlocksData(data);
+        };
+        loadEditorBlocksData();
+    }, []);
     return (react_1.default.createElement("div", { className: b(null, className), ref: ref },
         react_1.default.createElement("button", { className: b('button'), type: "button", onClick: () => {
                 setIsOpened(!isOpened);
@@ -30,8 +44,11 @@ const AddBlock = ({ onAdd, className }) => {
                 react_1.default.createElement(uikit_1.TextInput, { placeholder: "search", type: "text", value: search, size: "l", onUpdate: (value) => setSearch(value) })),
             react_1.default.createElement("div", { className: b('blocks') }, blocks.map((blockName) => {
                 var _a;
-                const blockData = data_1.default[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_1.default.createElement("div", { key: blockName, className: b('block'), onClick: () => {
                         onAdd(blockData === null || blockData === void 0 ? void 0 : blockData.template);
                         setIsOpened(false);

package/build/cjs/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/cjs/editor/data/index.js

@@ -1,13 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEditorBlocksData = void 0;
 const tslib_1 = require("tslib");
 const models_1 = require("../../models");
 const utils_1 = require("../utils");
 const default_preview_1 = tslib_1.__importDefault(require("./previews/default-preview"));
-const getBlockTemplate = (blockType) => require(`./templates/${blockType}.json`);
+const header_block_1 = tslib_1.__importDefault(require("./previews/header-block"));
+const getBlockTemplate = (blockType) => { var _a; return (_a = `./templates/${blockType}.json`, Promise.resolve().then(() => tslib_1.__importStar(require(_a)))).then((data) => data.default); };
 const getBlockPreview = (blockType) => {
     try {
-        return require(`./previews/${blockType}.tsx`).default;
+        if (blockType === models_1.BlockType.HeaderBlock) {
+            return header_block_1.default;
+        }
+        return default_preview_1.default;
     }
     catch (err) {
         /*eslint-disable no-console */
@@ -15,13 +20,15 @@ const getBlockPreview = (blockType) => {
         return default_preview_1.default;
     }
 };
-const EditorBlocksData = Object.values(models_1.BlockType).reduce((previewData, blockType) => {
-    const template = getBlockTemplate(blockType);
-    const preview = getBlockPreview(blockType);
-    template.meta = template.meta || {};
-    template.meta.title = template.meta.title || (0, utils_1.formatBlockName)(blockType);
-    /* eslint-disable no-param-reassign */
-    previewData[blockType] = Object.assign(Object.assign({}, template), { preview });
-    return previewData;
-}, {});
-exports.default = EditorBlocksData;
+async function getEditorBlocksData() {
+    const EdiorBlockData = {};
+    for (const blockType of Object.values(models_1.BlockType)) {
+        const template = await getBlockTemplate(blockType);
+        const preview = getBlockPreview(blockType);
+        template.meta = template.meta || {};
+        template.meta.title = template.meta.title || (0, utils_1.formatBlockName)(blockType);
+        EdiorBlockData[blockType] = Object.assign(Object.assign({}, template), { preview });
+    }
+    return EdiorBlockData;
+}
+exports.getEditorBlocksData = getEditorBlocksData;

package/build/cjs/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/cjs/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/cjs/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/cjs/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/cjs/navigation/components/DesktopNavigation/DesktopNavigation.d.ts

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopNavigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
@@ -9,13 +10,17 @@ 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') },
+const DesktopNavigation = ({ logo, leftItemsWithIconSize, rightItemsWithIconSize, customMobileHeaderItems, 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') },
+        customMobileHeaderItems && (react_1.default.createElement("div", { className: b('mobile-navigation-container') },
+            react_1.default.createElement(OverflowScroller_1.default, { className: b('mobile-navigation'), onScrollStart: onActiveItemChange, arrowSize: 18 },
+                react_1.default.createElement(NavigationList_1.NavigationList, { items: customMobileHeaderItems, onActiveItemChange: onActiveItemChange, className: b('mobile-buttons'), itemClassName: b('item'), column: models_1.ItemColumnName.Left, activeItemId: activeItemId, menuLayout: models_1.NavigationLayout.Dropdown })))),
         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;
+exports.DesktopNavigation = DesktopNavigation;
+exports.default = exports.DesktopNavigation;

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

@@ -4,5 +4,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/cjs/navigation/components/Logo/Logo.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const components_1 = require("../../../components");
@@ -27,4 +28,5 @@ const Logo = (_a) => {
         react_1.default.createElement("span", { className: b('text') }, textData)));
     return (react_1.default.createElement(RouterLink_1.default, { href: url, passHref: true }, Link ? (react_1.default.createElement("span", { className: b(null, props.className) }, content)) : (react_1.default.createElement("a", Object.assign({ className: b(null, props.className), href: url, title: urlTitle }, linkExtraProps), content))));
 };
-exports.default = Logo;
+exports.Logo = Logo;
+exports.default = exports.Logo;

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
@@ -22,4 +23,5 @@ const MobileNavigation = (_a) => {
                 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;
+exports.MobileNavigation = MobileNavigation;
+exports.default = exports.MobileNavigation;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
-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/cjs/navigation/components/Navigation/Navigation.js

@@ -3,43 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const grid_1 = require("../../../grid");
 const utils_1 = require("../../../utils");
-const utils_2 = require("../../utils");
+const hooks_1 = require("../../hooks");
 const DesktopNavigation_1 = tslib_1.__importDefault(require("../DesktopNavigation/DesktopNavigation"));
 const MobileNavigation_1 = tslib_1.__importDefault(require("../MobileNavigation/MobileNavigation"));
 const b = (0, utils_1.block)('navigation');
 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] = (0, react_1.useState)(false);
-    const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
-    const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
-    const getNavigationItem = (0, utils_2.getNavigationItemWithIconSize)(iconSize);
-    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
-    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
-    const onActiveItemChange = (id) => {
-        setActiveItemId(id);
-    };
+    const [showBorder] = (0, hooks_1.useShowBorder)(withBorder, withBorderOnScroll);
+    const { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange } = (0, hooks_1.useActiveNavItem)(iconSize, leftItems, rightItems);
     const onSidebarOpenedChange = (isOpen) => setIsSidebarOpened(isOpen);
-    (0, react_1.useEffect)(() => {
-        if (!withBorderOnScroll)
-            return () => { };
-        const showBorderOnScroll = () => {
-            if (!withBorder) {
-                setShowBorder(window.scrollY > 0);
-            }
-        };
-        const scrollHandler = (0, debounce_1.default)(showBorderOnScroll, 20);
-        window.addEventListener('scroll', scrollHandler, { passive: true });
-        return () => window.removeEventListener('scroll', scrollHandler);
-    });
     return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': showBorder }, className) },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement("nav", null,
-                    react_1.default.createElement(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
+                    react_1.default.createElement(DesktopNavigation_1.default, { logo: logo, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange, leftItemsWithIconSize: leftItemsWithIconSize, rightItemsWithIconSize: rightItemsWithIconSize, customMobileHeaderItems: customMobileHeaderItems, isSidebarOpened: isSidebarOpened, onSidebarOpenedChange: onSidebarOpenedChange }),
                     react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
                         react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItemsWithIconSize, bottomItems: rightItemsWithIconSize, isOpened: isSidebarOpened, activeItemId: activeItemId, onActiveItemChange: onActiveItemChange })))))));
 };

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
@@ -28,4 +29,5 @@ const NavigationItem = (_a) => {
         react_1.default.createElement("li", { className: b({ 'menu-layout': menuLayout }, className) },
             react_1.default.createElement(Component, Object.assign({}, componentProps, { className: b('content', { type }) })))));
 };
-exports.default = NavigationItem;
+exports.NavigationItem = NavigationItem;
+exports.default = exports.NavigationItem;

package/build/cjs/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/cjs/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/cjs/navigation/components/NavigationListItem/NavigationListItem.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
@@ -16,4 +17,5 @@ const NavigationListItem = (_a) => {
     });
     return (react_1.default.createElement(NavigationItem_1.default, Object.assign({ isActive: isActive, onClick: onClick, hidePopup: onActiveItemChange }, props)));
 };
-exports.default = NavigationListItem;
+exports.NavigationListItem = NavigationListItem;
+exports.default = exports.NavigationListItem;

package/build/cjs/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;

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

@@ -6,6 +6,7 @@ const utils_1 = require("../../../utils");
 const Navigation_1 = tslib_1.__importDefault(require("../../components/Navigation/Navigation"));
 const b = (0, utils_1.block)('layout');
 const Layout = ({ children, navigation }) => (react_1.default.createElement("div", { className: b() },
-    navigation && (react_1.default.createElement(Navigation_1.default, { data: navigation.header, logo: navigation.logo, className: b('navigation') })),
+    navigation &&
+        (navigation.renderNavigation ? (navigation.renderNavigation()) : (react_1.default.createElement(Navigation_1.default, { data: navigation.header, logo: navigation.logo, className: b('navigation') }))),
     react_1.default.createElement("main", { className: b('content') }, children)));
 exports.default = Layout;

package/build/cjs/navigation/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useActiveNavItem } from './useActiveNavItem';
+export { default as useShowBorder } from './useShowBorder';

package/build/cjs/navigation/hooks/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useShowBorder = exports.useActiveNavItem = void 0;
+var useActiveNavItem_1 = require("./useActiveNavItem");
+Object.defineProperty(exports, "useActiveNavItem", { enumerable: true, get: function () { return __importDefault(useActiveNavItem_1).default; } });
+var useShowBorder_1 = require("./useShowBorder");
+Object.defineProperty(exports, "useShowBorder", { enumerable: true, get: function () { return __importDefault(useShowBorder_1).default; } });

package/build/cjs/navigation/hooks/useActiveNavItem.d.ts

@@ -0,0 +1,26 @@
+import { NavigationItemModel } from '../../models';
+declare const useActiveNavItem: (iconSize: number, leftItems: NavigationItemModel[], rightItems?: NavigationItemModel[]) => {
+    activeItemId: string | undefined;
+    leftItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[];
+    rightItemsWithIconSize: (import("../../models").NavigationButtonItem | import("../../models").NavigationDropdownItem | {
+        type: import("../../models").NavigationItemType.Link;
+        url: string;
+        urlTitle?: string | undefined;
+        arrow?: boolean | undefined;
+        target?: string | undefined;
+        text: string;
+        icon?: import("../../models").ImageProps | undefined;
+        iconSize?: number | undefined;
+    })[] | undefined;
+    onActiveItemChange: (id?: string) => void;
+};
+export default useActiveNavItem;

package/build/cjs/navigation/hooks/useActiveNavItem.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useActiveNavItem = (iconSize, leftItems, rightItems) => {
+    const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
+    const getNavigationItem = (0, utils_1.getNavigationItemWithIconSize)(iconSize);
+    const leftItemsWithIconSize = (0, react_1.useMemo)(() => leftItems.map(getNavigationItem), [getNavigationItem, leftItems]);
+    const rightItemsWithIconSize = (0, react_1.useMemo)(() => rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(getNavigationItem), [getNavigationItem, rightItems]);
+    const onActiveItemChange = (id) => {
+        setActiveItemId(id);
+    };
+    return { activeItemId, leftItemsWithIconSize, rightItemsWithIconSize, onActiveItemChange };
+};
+exports.default = useActiveNavItem;

package/build/cjs/navigation/hooks/useShowBorder.d.ts

@@ -0,0 +1,2 @@
+declare const useShowBorder: (withBorder: boolean, withBorderOnScroll: boolean) => boolean[];
+export default useShowBorder;

package/build/cjs/navigation/hooks/useShowBorder.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const lodash_1 = require("lodash");
+const useShowBorder = (withBorder, withBorderOnScroll) => {
+    const [showBorder, setShowBorder] = (0, react_1.useState)(withBorder);
+    (0, react_1.useEffect)(() => {
+        if (!withBorderOnScroll)
+            return () => { };
+        const showBorderOnScroll = () => {
+            if (!withBorder) {
+                setShowBorder(window.scrollY > 0);
+            }
+        };
+        const scrollHandler = (0, lodash_1.debounce)(showBorderOnScroll, 20);
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        return () => window.removeEventListener('scroll', scrollHandler);
+    });
+    return [showBorder];
+};
+exports.default = useShowBorder;

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

@@ -1 +1,15 @@
+export * from './components/Navigation/Navigation';
+export * from './components/DesktopNavigation/DesktopNavigation';
+export * from './components/MobileNavigation/MobileNavigation';
+export * from './components/MobileMenuButton/MobileMenuButton';
+export * from './components/NavigationList/NavigationList';
+export * from './components/NavigationListItem/NavigationListItem';
+export * from './components/NavigationItem/';
+export * from './components/NavigationItem/NavigationItem';
+export * from './components/NavigationPopup/NavigationPopup';
+export * from './components/SocialIcon/SocialIcon';
+export * from './components/Logo/Logo';
+export * from './hooks';
+export * from './models';
+export * from './utils';
 export { default as Navigation } from './components/Standalone';

package/build/cjs/navigation/index.js

@@ -1,8 +1,20 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Navigation = void 0;
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components/Navigation/Navigation"), exports);
+tslib_1.__exportStar(require("./components/DesktopNavigation/DesktopNavigation"), exports);
+tslib_1.__exportStar(require("./components/MobileNavigation/MobileNavigation"), exports);
+tslib_1.__exportStar(require("./components/MobileMenuButton/MobileMenuButton"), exports);
+tslib_1.__exportStar(require("./components/NavigationList/NavigationList"), exports);
+tslib_1.__exportStar(require("./components/NavigationListItem/NavigationListItem"), exports);
+tslib_1.__exportStar(require("./components/NavigationItem/"), exports);
+tslib_1.__exportStar(require("./components/NavigationItem/NavigationItem"), exports);
+tslib_1.__exportStar(require("./components/NavigationPopup/NavigationPopup"), exports);
+tslib_1.__exportStar(require("./components/SocialIcon/SocialIcon"), exports);
+tslib_1.__exportStar(require("./components/Logo/Logo"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
+tslib_1.__exportStar(require("./models"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
 var Standalone_1 = require("./components/Standalone");
-Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return __importDefault(Standalone_1).default; } });
+Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return tslib_1.__importDefault(Standalone_1).default; } });