@gravity-ui/page-constructor 5.21.0 → 5.22.0

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

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

@@ -44,6 +44,7 @@ export interface DesktopNavigationProps extends MobileMenuButtonProps, ActiveIte
     logo: ThemedNavigationLogoData;
     leftItemsWithIconSize: NavigationItemModel[];
     rightItemsWithIconSize?: NavigationItemModel[];
+    customMobileHeaderItems?: NavigationItemModel[];
 }
 export interface MobileNavigationProps extends ClassNameProps, ActiveItemProps {
     isOpened?: boolean;

package/build/cjs/sub-blocks/ImageCard/ImageCard.css

@@ -1,4 +1,4 @@
-.pc-image-card_border_shadow {
+a.pc-image-card_border_shadow, .pc-image-card_border_shadow {
   box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
 }
 
@@ -58,4 +58,37 @@ unpredictable css rules order in build */
 }
 .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
   padding-bottom: 24px;
+}
+
+a.pc-image-card {
+  color: inherit;
+  text-decoration: none;
+  min-height: 248px;
+  height: 100%;
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  background-color: var(--g-color-base-float);
+  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+a.pc-image-card:hover, a.pc-image-card:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+a.pc-image-card_border_line {
+  border: 1px solid var(--g-color-line-generic);
+}
+a.pc-image-card_border_line, a.pc-image-card_border_none {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_line:hover, a.pc-image-card_border_none:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow {
+  transition: transform 0.3s ease-out;
+}
+a.pc-image-card_border_shadow:hover {
+  transform: translateY(-8px);
+}
+a.pc-image-card_border_shadow:hover {
+  background-color: var(--pc-color-base-float-hover);
 }

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/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;
 }