@gravity-ui/page-constructor 4.36.0 → 4.37.0

package/README.md

@@ -162,6 +162,16 @@ const Page: React.FC<PageProps> = ({children}) => (
 );
 ```
 
+### Navigation
+
+Page navigation can also be used separately from the constructor:
+
+```jsx
+import {Navigation} from '@gravity-ui/page-constructor';
+
+const Page: React.FC<PageProps> = ({data, logo}) => <Navigation data={data} logo={logo} />;
+```
+
 ### Blocks
 
 Each block is an atomic top-level component. They're stored in the `src/units/constructor/blocks` directory.

package/build/cjs/blocks/Icons/Icons.d.ts

@@ -1,3 +1,3 @@
 import { IconsBlockProps } from '../../models';
-declare const Icons: ({ title, size, items }: IconsBlockProps) => JSX.Element;
+declare const Icons: ({ title, description, size, items }: IconsBlockProps) => JSX.Element;
 export default Icons;

package/build/cjs/blocks/Icons/Icons.js

@@ -10,14 +10,14 @@ const b = (0, utils_1.block)('icons-block');
 const getItemContent = (item) => (react_1.default.createElement(react_1.Fragment, null,
     react_1.default.createElement(components_1.Image, { className: b('image'), src: item.src }),
     react_1.default.createElement("p", { className: b('text') }, item.text)));
-const Icons = ({ title, size = 's', items }) => {
+const Icons = ({ title, description, size = 's', items }) => {
     const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const handleAnalytics = (0, hooks_1.useAnalytics)();
     const onClick = (0, react_1.useCallback)(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
     return (react_1.default.createElement("div", { className: b({ size }) },
-        title && react_1.default.createElement(components_1.Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
+        (title || description) && (react_1.default.createElement(components_1.Title, { className: b('header'), title: title, subtitle: description, colSizes: { all: 12 } })),
         items.map((item) => {
             const itemContent = getItemContent(item);
             const { url, text } = item;

package/build/cjs/components/RootCn/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../models';
+declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+export default RootCn;

package/build/cjs/components/RootCn/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("../../context/theme");
+const utils_1 = require("../../utils");
+const RootCn = ({ className, children }) => {
+    const theme = (0, theme_1.useTheme)();
+    return react_1.default.createElement("div", { className: (0, utils_1.rootCn)({ theme }, className) }, children);
+};
+exports.default = RootCn;

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

@@ -10,7 +10,7 @@ export declare const blockMap: {
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
     "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
-    "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
+    "icons-block": ({ title, description, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
     "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 require("@doc-tools/transform/dist/js/yfm");
 const BackgroundMedia_1 = tslib_1.__importDefault(require("../../components/BackgroundMedia/BackgroundMedia"));
-const constants_1 = require("../../components/constants");
+const RootCn_1 = tslib_1.__importDefault(require("../../components/RootCn"));
 const constructor_items_1 = require("../../constructor-items");
 const animateContext_1 = require("../../context/animateContext");
 const innerContext_1 = require("../../context/innerContext");
@@ -18,7 +18,6 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
-const ycr = (0, utils_1.cn)(constants_1.UIKIT_ROOT_CLASS);
 const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
@@ -44,7 +43,7 @@ const Constructor = (props) => {
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);
     const themedBackground = (0, utils_1.getThemedValue)(background, theme);
     return (react_1.default.createElement(innerContext_1.InnerContext.Provider, { value: context },
-        react_1.default.createElement("div", { className: b(null, ycr({ theme })) },
+        react_1.default.createElement(RootCn_1.default, null,
             react_1.default.createElement("div", { className: b('wrapper') },
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },

package/build/cjs/index.d.ts

@@ -10,4 +10,5 @@ export * from './utils';
 export * from './schema';
 export * from './hooks';
 export * from './icons';
+export * from './navigation';
 export { BREAKPOINTS } from './constants';

package/build/cjs/index.js

@@ -15,5 +15,6 @@ tslib_1.__exportStar(require("./utils"), exports);
 tslib_1.__exportStar(require("./schema"), exports);
 tslib_1.__exportStar(require("./hooks"), exports);
 tslib_1.__exportStar(require("./icons"), exports);
+tslib_1.__exportStar(require("./navigation"), exports);
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "BREAKPOINTS", { enumerable: true, get: function () { return constants_1.BREAKPOINTS; } });

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

@@ -255,6 +255,7 @@ export interface IconsBlockItemProps extends AnalyticsEventsBase {
 }
 export interface IconsBlockProps {
     title?: string;
+    description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
 }

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

@@ -1,9 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation {
-  position: sticky;
-  z-index: 98;
-  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { HeaderData, ThemedNavigationLogoData } from '../../../models';
-export interface NavigationProps {
+import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
+export interface NavigationProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }

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

@@ -11,7 +11,7 @@ const utils_2 = require("../../utils");
 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 }) => {
+const Navigation = ({ data, logo, className }) => {
     const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setActiveItemId] = (0, react_1.useState)(undefined);
@@ -33,7 +33,7 @@ const Navigation = ({ data, logo }) => {
         window.addEventListener('scroll', scrollHandler, { passive: true });
         return () => window.removeEventListener('scroll', scrollHandler);
     });
-    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': showBorder }) },
+    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,

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

@@ -4,15 +4,15 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
 const blockIdContext_1 = require("../../../context/blockIdContext");
-const innerContext_1 = require("../../../context/innerContext");
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
+const useNavigationItemMap_1 = require("./hooks/useNavigationItemMap");
 const b = (0, utils_1.block)('navigation-item');
 const ANALYTICS_ID = 'navigation';
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = tslib_1.__rest(_a, ["data", "className", "menuLayout"]);
     const { type = models_1.NavigationItemType.Link } = data;
-    const { navItemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    const navItemMap = (0, useNavigationItemMap_1.useNavigationItemMap)();
     const Component = navItemMap[type];
     const componentProps = (0, react_1.useMemo)(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);

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

@@ -0,0 +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;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigationItemMap = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
+const constructor_items_1 = require("../../../../constructor-items");
+const innerContext_1 = require("../../../../context/innerContext");
+const useNavigationItemMap = () => {
+    const { navItemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
+    return (0, isEmpty_1.default)(navItemMap) ? constructor_items_1.navItemMap : navItemMap;
+};
+exports.useNavigationItemMap = useNavigationItemMap;

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

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

package/build/cjs/navigation/components/Standalone/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const RootCn_1 = tslib_1.__importDefault(require("../../../components/RootCn"));
+const Navigation_1 = tslib_1.__importDefault(require("./../../components/Navigation/Navigation"));
+const Standalone = (props) => (react_1.default.createElement(RootCn_1.default, null,
+    react_1.default.createElement(Navigation_1.default, Object.assign({}, props))));
+exports.default = Standalone;

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

@@ -1,10 +1,15 @@
-.layout {
+.pc-layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
-.layout__content {
+.pc-layout__content {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+}
+.pc-layout__navigation {
+  position: sticky;
+  z-index: 98;
+  top: 0;
 }

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

@@ -6,6 +6,6 @@ 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 }),
+    navigation && (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/index.d.ts

@@ -0,0 +1 @@
+export { default as Navigation } from './components/Standalone';

package/build/cjs/navigation/index.js

@@ -0,0 +1,8 @@
+"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;
+var Standalone_1 = require("./components/Standalone");
+Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return __importDefault(Standalone_1).default; } });

package/build/cjs/text-transform/config.js

@@ -302,11 +302,5 @@ exports.config = {
         },
     ],
     [models_1.BlockType.CardLayoutBlock]: exports.blockHeaderTransformer,
-    [models_1.BlockType.IconsBlock]: [
-        {
-            fields: ['title'],
-            transformer: common_1.typografTransformer,
-            parser: parseTitle,
-        },
-    ],
+    [models_1.BlockType.IconsBlock]: exports.blockHeaderTransformer,
 };

package/build/cjs/utils/cn.d.ts

@@ -1,4 +1,5 @@
 export declare const NAMESPACE = "pc-";
 export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
 export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export declare const rootCn: import("@bem-react/classname").ClassNameFormatter;
 export type CnBlock = ReturnType<typeof cn>;

package/build/cjs/utils/cn.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.block = exports.cn = exports.NAMESPACE = void 0;
+exports.rootCn = exports.block = exports.cn = exports.NAMESPACE = void 0;
 const classname_1 = require("@bem-react/classname");
+const constants_1 = require("../components/constants");
 exports.NAMESPACE = 'pc-';
 exports.cn = (0, classname_1.withNaming)({ e: '__', m: '_' });
 exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });
+exports.rootCn = (0, exports.cn)(constants_1.UIKIT_ROOT_CLASS);

package/build/esm/blocks/Icons/Icons.d.ts

@@ -1,4 +1,4 @@
 import { IconsBlockProps } from '../../models';
 import './Icons.css';
-declare const Icons: ({ title, size, items }: IconsBlockProps) => JSX.Element;
+declare const Icons: ({ title, description, size, items }: IconsBlockProps) => JSX.Element;
 export default Icons;

package/build/esm/blocks/Icons/Icons.js

@@ -8,14 +8,14 @@ const b = block('icons-block');
 const getItemContent = (item) => (React.createElement(Fragment, null,
     React.createElement(Image, { className: b('image'), src: item.src }),
     React.createElement("p", { className: b('text') }, item.text)));
-const Icons = ({ title, size = 's', items }) => {
+const Icons = ({ title, description, size = 's', items }) => {
     const { hostname } = useContext(LocationContext);
     const handleAnalytics = useAnalytics();
     const onClick = useCallback(({ analyticsEvents, url }) => {
         handleAnalytics(analyticsEvents, { url });
     }, [handleAnalytics]);
     return (React.createElement("div", { className: b({ size }) },
-        title && React.createElement(Title, { className: b('header'), title: title, colSizes: { all: 12 } }),
+        (title || description) && (React.createElement(Title, { className: b('header'), title: title, subtitle: description, colSizes: { all: 12 } })),
         items.map((item) => {
             const itemContent = getItemContent(item);
             const { url, text } = item;

package/build/esm/components/RootCn/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ClassNameProps } from '../../models';
+declare const RootCn: ({ className, children }: PropsWithChildren<ClassNameProps>) => JSX.Element;
+export default RootCn;

package/build/esm/components/RootCn/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useTheme } from '../../context/theme';
+import { rootCn } from '../../utils';
+const RootCn = ({ className, children }) => {
+    const theme = useTheme();
+    return React.createElement("div", { className: rootCn({ theme }, className) }, children);
+};
+export default RootCn;

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

@@ -10,7 +10,7 @@ export declare const blockMap: {
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
     "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
-    "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
+    "icons-block": ({ title, description, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
     "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;

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

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
-import { UIKIT_ROOT_CLASS } from '../../components/constants';
+import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
@@ -10,13 +10,12 @@ import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
-import { cn as blockOrigin, block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
+import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
-const ycr = blockOrigin(UIKIT_ROOT_CLASS);
 export const Constructor = (props) => {
     const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
     const { context } = useMemo(() => ({
@@ -42,7 +41,7 @@ export const Constructor = (props) => {
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);
     const themedBackground = getThemedValue(background, theme);
     return (React.createElement(InnerContext.Provider, { value: context },
-        React.createElement("div", { className: b(null, ycr({ theme })) },
+        React.createElement(RootCn, null,
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },

package/build/esm/index.d.ts

@@ -10,4 +10,5 @@ export * from './utils';
 export * from './schema';
 export * from './hooks';
 export * from './icons';
+export * from './navigation';
 export { BREAKPOINTS } from './constants';

package/build/esm/index.js

@@ -11,4 +11,5 @@ export * from './utils';
 export * from './schema';
 export * from './hooks';
 export * from './icons';
+export * from './navigation';
 export { BREAKPOINTS } from './constants';

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

@@ -255,6 +255,7 @@ export interface IconsBlockItemProps extends AnalyticsEventsBase {
 }
 export interface IconsBlockProps {
     title?: string;
+    description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
 }

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

@@ -1,9 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation {
-  position: sticky;
-  z-index: 98;
-  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { HeaderData, ThemedNavigationLogoData } from '../../../models';
+import { ClassNameProps, HeaderData, ThemedNavigationLogoData } from '../../../models';
 import './Navigation.css';
-export interface NavigationProps {
+export interface NavigationProps extends ClassNameProps {
     logo: ThemedNavigationLogoData;
     data: HeaderData;
 }

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

@@ -8,7 +8,7 @@ import DesktopNavigation from '../DesktopNavigation/DesktopNavigation';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import './Navigation.css';
 const b = block('navigation');
-export const Navigation = ({ data, logo }) => {
+export const Navigation = ({ data, logo, className }) => {
     const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setActiveItemId] = useState(undefined);
@@ -30,7 +30,7 @@ export const Navigation = ({ data, logo }) => {
         window.addEventListener('scroll', scrollHandler, { passive: true });
         return () => window.removeEventListener('scroll', scrollHandler);
     });
-    return (React.createElement(Grid, { className: b({ 'with-border': showBorder }) },
+    return (React.createElement(Grid, { className: b({ 'with-border': showBorder }, className) },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("nav", null,

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

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
-import React, { useContext, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import omit from 'lodash/omit';
 import { BlockIdContext } from '../../../context/blockIdContext';
-import { InnerContext } from '../../../context/innerContext';
 import { NavigationItemType } from '../../../models';
 import { block } from '../../../utils';
+import { useNavigationItemMap } from './hooks/useNavigationItemMap';
 import './NavigationItem.css';
 const b = block('navigation-item');
 const ANALYTICS_ID = 'navigation';
 const NavigationItem = (_a) => {
     var { data, className, menuLayout } = _a, props = __rest(_a, ["data", "className", "menuLayout"]);
     const { type = NavigationItemType.Link } = data;
-    const { navItemMap } = useContext(InnerContext);
+    const navItemMap = useNavigationItemMap();
     const Component = navItemMap[type];
     const componentProps = useMemo(() => {
         const componentProperties = Object.assign(Object.assign({}, data), props);

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

@@ -0,0 +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;
+};

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

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { navItemMap as NavItemMapDefault } from '../../../../constructor-items';
+import { InnerContext } from '../../../../context/innerContext';
+export const useNavigationItemMap = () => {
+    const { navItemMap } = useContext(InnerContext);
+    return isEmpty(navItemMap) ? NavItemMapDefault : navItemMap;
+};

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

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

package/build/esm/navigation/components/Standalone/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import RootCn from '../../../components/RootCn';
+import Navigation from './../../components/Navigation/Navigation';
+const Standalone = (props) => (React.createElement(RootCn, null,
+    React.createElement(Navigation, Object.assign({}, props))));
+export default Standalone;

package/build/esm/navigation/containers/Layout/Layout.css

@@ -1,10 +1,15 @@
-.layout {
+.pc-layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
-.layout__content {
+.pc-layout__content {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
+}
+.pc-layout__navigation {
+  position: sticky;
+  z-index: 98;
+  top: 0;
 }

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

@@ -4,6 +4,6 @@ import Navigation from '../../components/Navigation/Navigation';
 import './Layout.css';
 const b = block('layout');
 const Layout = ({ children, navigation }) => (React.createElement("div", { className: b() },
-    navigation && React.createElement(Navigation, { data: navigation.header, logo: navigation.logo }),
+    navigation && (React.createElement(Navigation, { data: navigation.header, logo: navigation.logo, className: b('navigation') })),
     React.createElement("main", { className: b('content') }, children)));
 export default Layout;

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

@@ -0,0 +1 @@
+export { default as Navigation } from './components/Standalone';

package/build/esm/navigation/index.js

@@ -0,0 +1 @@
+export { default as Navigation } from './components/Standalone';

package/build/esm/text-transform/config.js

@@ -299,11 +299,5 @@ export const config = {
         },
     ],
     [BlockType.CardLayoutBlock]: blockHeaderTransformer,
-    [BlockType.IconsBlock]: [
-        {
-            fields: ['title'],
-            transformer: typografTransformer,
-            parser: parseTitle,
-        },
-    ],
+    [BlockType.IconsBlock]: blockHeaderTransformer,
 };

package/build/esm/utils/cn.d.ts

@@ -1,4 +1,5 @@
 export declare const NAMESPACE = "pc-";
 export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
 export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export declare const rootCn: import("@bem-react/classname").ClassNameFormatter;
 export type CnBlock = ReturnType<typeof cn>;

package/build/esm/utils/cn.js

@@ -1,4 +1,6 @@
 import { withNaming } from '@bem-react/classname';
+import { UIKIT_ROOT_CLASS } from '../components/constants';
 export const NAMESPACE = 'pc-';
 export const cn = withNaming({ e: '__', m: '_' });
 export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
+export const rootCn = cn(UIKIT_ROOT_CLASS);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.36.0",
+  "version": "4.37.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/constructor-items/blocks.d.ts

@@ -255,6 +255,7 @@ export interface IconsBlockItemProps extends AnalyticsEventsBase {
 }
 export interface IconsBlockProps {
     title?: string;
+    description?: string;
     size?: 's' | 'm' | 'l';
     items: IconsBlockItemProps[];
 }

package/server/text-transform/config.js

@@ -312,11 +312,5 @@ exports.config = {
         },
     ],
     [models_1.BlockType.CardLayoutBlock]: exports.blockHeaderTransformer,
-    [models_1.BlockType.IconsBlock]: [
-        {
-            fields: ['title'],
-            transformer: common_1.typografTransformer,
-            parser: parseTitle,
-        },
-    ],
+    [models_1.BlockType.IconsBlock]: exports.blockHeaderTransformer,
 };

package/server/utils/cn.d.ts

@@ -1,4 +1,5 @@
 export declare const NAMESPACE = "pc-";
 export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
 export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export declare const rootCn: import("@bem-react/classname").ClassNameFormatter;
 export type CnBlock = ReturnType<typeof cn>;