@gravity-ui/page-constructor 1.7.0-alpha.0 → 1.7.0-alpha.10

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import _ from 'lodash';
-import block from 'bem-cn-lite';
 import React, { Fragment, useState, useEffect, useCallback, useContext, useRef, } from 'react';
+import { block } from '../../../../utils';
 import OverflowScroller from '../../../OverflowScroller/OverflowScroller';
 import { NavigationItemType, } from '../../../../models/navigation';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
@@ -9,6 +9,12 @@ import NavigationItem from '../NavigationItem/NavigationItem';
 import { LocationContext } from '../../../../context/locationContext';
 import './Navigation.css';
 const b = block('navigation');
+const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+    const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
+    return (React.createElement(Fragment, null,
+        React.createElement(NavigationItem, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
+        isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+};
 const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
     const { asPath, pathname } = useContext(LocationContext);
     const itemRefs = useRef([]);
@@ -21,22 +27,6 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
         e.stopPropagation();
         onActiveItemChange(index === activeItemIndex ? -1 : index);
     }, [activeItemIndex, onActiveItemChange]);
-    const renderNavDropdown = (data, onClick, isActive, position) => {
-        const { text, items } = data, popupProps = __rest(data, ["text", "items"]);
-        return (React.createElement(Fragment, null,
-            React.createElement(NavigationItem, { className: b('link'), onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown } }),
-            isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
-    };
-    const slider = (React.createElement("div", { className: b('slider-container') },
-        React.createElement("div", { className: b('slider') })));
-    const content = (React.createElement("nav", null,
-        React.createElement("ul", { className: b('links') }, links.map((link, index) => {
-            const isActive = index === activeItemIndex;
-            const onClick = getItemClickHandler(index);
-            return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
-                link.type === NavigationItemType.Dropdown ? (renderNavDropdown(link, onClick, isActive, itemPositions[index])) : (React.createElement(NavigationItem, { data: link, onClick: onClick })),
-                highlightActiveItem && isActive && slider));
-        }))));
     const calculateItemPositions = useCallback(() => {
         if (itemRefs.current.length) {
             const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
@@ -64,6 +54,15 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, hig
     useEffect(() => {
         hidePopup();
     }, [hidePopup, asPath, pathname]);
-    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
+    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+        React.createElement("nav", null,
+            React.createElement("ul", { className: b('links') }, links.map((link, index) => {
+                const isActive = index === activeItemIndex;
+                const onClick = getItemClickHandler(index);
+                return (React.createElement("li", { ref: (el) => itemRefs.current.push(el), key: index, className: b('links-item') },
+                    link.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdown, { data: link, onClick: onClick, isActive: isActive, position: itemPositions[index], hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: link, onClick: onClick })),
+                    highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
+                        React.createElement("div", { className: b('slider') })))));
+            })))));
 };
 export default Navigation;

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

@@ -1,40 +1,40 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-item {
+.pc-navigation-item {
   position: relative;
   display: flex;
   align-items: center;
 }
-.navigation-item_type_link {
+.pc-navigation-item_type_link {
   color: var(--yc-color-text-primary);
   color: inherit;
   text-decoration: none;
   outline: none;
 }
-.utilityfocus .navigation-item_type_link:focus {
+.utilityfocus .pc-navigation-item_type_link:focus {
   outline: 2px solid #ffdb4d;
 }
-.navigation-item_type_link:hover, .navigation-item_type_link_active {
+.pc-navigation-item_type_link:hover, .pc-navigation-item_type_link_active {
   color: var(--yc-color-text-link);
 }
-.navigation-item_type_button {
+.pc-navigation-item_type_button {
   display: inline-block;
 }
-.navigation-item__arrow {
+.pc-navigation-item__arrow {
   position: relative;
   top: -2px;
   width: 9px;
   height: 9px;
   margin-left: 5px;
 }
-.navigation-item__icon {
+.pc-navigation-item__icon {
+  display: flex;
   width: 20px;
   height: 20px;
   margin-right: 8px;
-  border-radius: 50%;
   object-fit: cover;
 }
-.navigation-item__dropdown {
+.pc-navigation-item__dropdown {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

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

@@ -1,8 +1,6 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models/navigation';
+import { NavigationItemData } from '../../../../models';
 import './NavigationItem.css';
-declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
-export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

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

@@ -1,37 +1,49 @@
 import { __rest } from "tslib";
 import React, { Fragment, useContext, useMemo } from 'react';
-import block from 'bem-cn-lite';
-import { RouterLink, ToggleArrow } from '../../../index';
-import { getLinkProps } from '../../../../utils';
+import { block, getLinkProps } from '../../../../utils';
+import { RouterLink, ToggleArrow, Button, Image } from '../../../index';
 import { LocationContext } from '../../../../context/locationContext';
-import { NavigationItemType, } from '../../../../models/navigation';
+import { NavigationItemType, } from '../../../../models';
 import { NavigationArrow } from '../../../../icons';
 import SocialIcon from '../SocialIcon/SocialIcon';
+import { getMediaImage } from '../../../Media/Image/utils';
 import './NavigationItem.css';
 const b = block('navigation-item');
 const Content = ({ text, icon }) => (React.createElement(Fragment, null,
-    icon && React.createElement("img", { className: b('icon'), src: icon }),
+    icon && React.createElement(Image, Object.assign({ className: b('icon') }, icon)),
     React.createElement("span", { className: b('text') }, text)));
 const NavigationDropdown = (_a) => {
     var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
+    const iconData = icon && getMediaImage(icon);
     return (React.createElement("span", Object.assign({}, props),
-        React.createElement(Content, { text: text, icon: icon }),
+        React.createElement(Content, { text: text, icon: iconData }),
         React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
-    const { hostname } = useContext(LocationContext);
+    const { hostname, Link } = useContext(LocationContext);
     const { url, text, icon, arrow, target } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target"]);
     const linkExtraProps = getLinkProps(url, hostname, target);
+    const iconData = icon && getMediaImage(icon);
     const content = (React.createElement(Fragment, null,
-        React.createElement(Content, { text: text, icon: icon }),
+        React.createElement(Content, { text: text, icon: iconData }),
         arrow && React.createElement(NavigationArrow, { className: b('arrow') })));
-    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (React.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (React.createElement(RouterLink, { href: url, passHref: true },
-        React.createElement("a", Object.assign({}, rest), content)));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (React.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content));
+    }
+    else {
+        return (React.createElement(RouterLink, { href: url, passHref: true },
+            React.createElement("a", Object.assign({}, rest), content)));
+    }
+};
+const NavigationButton = (props) => {
+    const { url, target } = props;
+    return target ? (React.createElement(Button, Object.assign({}, props, { url: url }))) : (React.createElement(RouterLink, { href: url },
+        React.createElement(Button, Object.assign({}, props, { url: url }))));
 };
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
-    [NavigationItemType.Button]: RouterLink,
+    [NavigationItemType.Button]: NavigationButton,
     [NavigationItemType.Social]: SocialIcon,
     [NavigationItemType.Dropdown]: NavigationDropdown,
     [NavigationItemType.Link]: NavigationLink,

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.navigation-popup {
+.pc-navigation-popup {
   position: fixed;
   top: calc(var(--header-height) - 16px);
   padding-right: 4px;
@@ -18,16 +18,16 @@ unpredictable css rules order in build */
   box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
 }
 @media (max-width: 768px) {
-  .navigation-popup {
+  .pc-navigation-popup {
     display: none;
   }
 }
-.navigation-popup__link {
+.pc-navigation-popup__link {
   height: 36px;
   padding: 8px 12px;
   border-radius: 8px;
 }
-.navigation-popup__link:hover {
+.pc-navigation-popup__link:hover {
   color: var(--yc-color-text-primary);
   background-color: var(--yc-color-base-simple-hover);
 }

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

@@ -1,5 +1,5 @@
-import React, { RefObject } from 'react';
-import { NavigationLinkItem } from '../../../../models/navigation';
+import React from 'react';
+import { NavigationLinkItem } from '../../../../models';
 import './NavigationPopup.css';
 export interface NavigationPopupProps {
     items: NavigationLinkItem[];
@@ -7,19 +7,5 @@ export interface NavigationPopupProps {
     left?: number;
     className?: string;
 }
-interface NavigationPopupState {
-    calculatedLeft?: number;
-}
-export default class NavigationPopup extends React.Component<NavigationPopupProps, NavigationPopupState> {
-    ref: RefObject<HTMLDivElement>;
-    state: {
-        calculatedLeft: number | undefined;
-    };
-    private calculateLeft;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: NavigationPopupProps): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element | null;
-    private renderDefaultPopup;
-}
-export {};
+export declare const NavigationPopup: React.FC<NavigationPopupProps>;
+export default NavigationPopup;

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

@@ -1,54 +1,41 @@
 import _ from 'lodash';
-import block from 'bem-cn-lite';
-import React, { Fragment, createRef } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Portal } from '@gravity-ui/uikit';
+import { block } from '../../../../utils';
 import { OutsideClick } from '../../../index';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationPopup.css';
 const b = block('navigation-popup');
-export default class NavigationPopup extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = createRef();
-        this.state = {
-            calculatedLeft: this.props.left,
-        };
-        this.calculateLeft = _.debounce(() => {
-            const { left } = this.props;
-            if (this.ref && this.ref.current && left) {
-                const right = left + this.ref.current.offsetWidth;
-                const docWidth = document.body.clientWidth;
-                const calculatedLeft = right > docWidth ? left - (right - docWidth) : left;
-                this.setState({ calculatedLeft });
-            }
-            else {
-                this.setState({ calculatedLeft: left });
-            }
-        }, 100);
-    }
-    componentDidMount() {
-        this.calculateLeft();
-        window.addEventListener('resize', this.calculateLeft);
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.left !== this.props.left) {
-            this.calculateLeft();
+export const NavigationPopup = ({ items, left, onClose }) => {
+    const [calculatedLeft, setCalculatedLeft] = useState(left);
+    const popupRef = useRef(null);
+    const calculateLeft = useCallback(() => {
+        if (popupRef && popupRef.current && left) {
+            const right = left + popupRef.current.offsetWidth;
+            const docWidth = document.body.clientWidth;
+            const currentLeft = right > docWidth ? left - (right - docWidth) : left;
+            setCalculatedLeft(currentLeft);
         }
-    }
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.calculateLeft);
-    }
-    render() {
-        if (!document || !document.body) {
-            return null;
+        else {
+            setCalculatedLeft(left);
         }
-        const { onClose } = this.props;
-        const { calculatedLeft } = this.state;
-        return (React.createElement(Portal, null,
-            React.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
-                React.createElement(OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
-    }
-    renderDefaultPopup() {
-        return (React.createElement(Fragment, null, this.props.items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
+    }, [left]);
+    useEffect(() => {
+        const debounceCalculateLeft = _.debounce(calculateLeft, 100);
+        calculateLeft();
+        window.addEventListener('resize', debounceCalculateLeft);
+        return () => {
+            window.removeEventListener('resize', debounceCalculateLeft);
+        };
+    }, [calculateLeft]);
+    useEffect(() => {
+        calculateLeft();
+    }, [calculateLeft, left]);
+    if (!document || !document.body) {
+        return null;
     }
-}
+    return (React.createElement(Portal, null,
+        React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
+            React.createElement(OutsideClick, { onOutsideClick: onClose }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))))));
+};
+export default NavigationPopup;

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

@@ -1,6 +1,6 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.social-icon {
+.pc-social-icon {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,10 +11,10 @@ unpredictable css rules order in build */
   border-radius: 50%;
   background-color: var(--yc-color-base-generic);
 }
-.social-icon:hover {
+.pc-social-icon:hover {
   background-color: var(--yc-color-base-generic-hover);
 }
-.social-icon__icon {
+.pc-social-icon__icon {
   width: 16px;
   height: 16px;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavigationSocialItem } from '../../../../models/navigation';
+import { NavigationSocialItem } from '../../../../models';
 import './SocialIcon.css';
 export interface NavigationSocialItemProps extends NavigationSocialItem {
     className?: string;

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

@@ -1,8 +1,12 @@
 import React from 'react';
-import block from 'bem-cn-lite';
+import { block } from '../../../../utils';
 import { Image } from '../../../index';
+import { getMediaImage } from '../../../Media/Image/utils';
 import './SocialIcon.css';
 const b = block('social-icon');
-const SocialIcon = ({ icon, url, className }) => (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
-    React.createElement(Image, { className: b('icon'), src: icon })));
+const SocialIcon = ({ icon, url, className }) => {
+    const iconData = getMediaImage(icon);
+    return (React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: b(null, className) },
+        React.createElement(Image, Object.assign({ className: b('icon') }, iconData))));
+};
 export default SocialIcon;

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

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

@@ -0,0 +1,7 @@
+export { default as Header } from './Header/Header';
+export { default as NavigationItem } from './NavigationItem/NavigationItem';
+export { default as Logo } from './Logo/Logo';
+export { default as MobileNavigation } from './MobileNavigation/MobileNavigation';
+export { default as Navigation } from './Navigation/Navigation';
+export { default as NavigationPopup } from './NavigationPopup/NavigationPopup';
+export { default as SocialIcon } from './SocialIcon/SocialIcon';

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

@@ -0,0 +1,10 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.layout__content {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}

package/build/esm/components/navigation/containers/Layout/Layout.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavigationData } from '../../../../models';
+import './Layout.css';
+export interface LayoutProps {
+    navigation?: NavigationData;
+    children?: React.ReactNode;
+}
+declare const Layout: React.FC<LayoutProps>;
+export default Layout;

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

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

package/build/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems } from '../../models';
-import { blockMap, subBlockMap } from '../../constructor-items';
-import { NavigationData } from '../../models/navigation';
 import '@doc-tools/transform/dist/js/yfm';
+import { ShouldRenderBlock, CustomConfig, PageContent, CustomItems, NavigationData } from '../../models';
+import { blockMap, subBlockMap } from '../../constructor-items';
 import './PageConstructor.css';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
 export interface PageConstructorProps {
@@ -10,7 +9,7 @@ export interface PageConstructorProps {
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
-    navigationData?: NavigationData;
+    navigation?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
+import '@doc-tools/transform/dist/js/yfm';
 import { HeaderBlockTypes, BlockTypes, } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { Grid } from '../../grid';
@@ -12,8 +13,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import { ConstructorFootnotes } from './components/ConstructorFootnotes';
 import { ConstructorHeader } from './components/ConstructorItem';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
-import Header from '../../components/navigation/components/Header/Header';
-import '@doc-tools/transform/dist/js/yfm';
+import Layout from '../../components/navigation/containers/Layout/Layout';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
@@ -29,7 +29,7 @@ export const Constructor = (props) => {
         });
     }, [props.custom]);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigationData, } = props;
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
     const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
@@ -39,14 +39,14 @@ export const Constructor = (props) => {
         React.createElement("div", { className: b() },
             React.createElement("div", { className: b('wrapper') },
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
-                (navigationData === null || navigationData === void 0 ? void 0 : navigationData.header) && (React.createElement(Header, { logo: navigationData === null || navigationData === void 0 ? void 0 : navigationData.logo, data: navigationData === null || navigationData === void 0 ? void 0 : navigationData.header })),
-                renderMenu && renderMenu(),
-                header && React.createElement(ConstructorHeader, { data: header }),
-                React.createElement(Grid, null,
-                    restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
-                    hasFootnotes && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorFootnotes, { items: footnotes }))))))));
+                React.createElement(Layout, { navigation: navigation },
+                    renderMenu && renderMenu(),
+                    header && React.createElement(ConstructorHeader, { data: header }),
+                    React.createElement(Grid, null,
+                        restBlocks && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                        hasFootnotes && (React.createElement(ConstructorRow, null,
+                            React.createElement(ConstructorFootnotes, { items: footnotes })))))))));
 };
 export const PageConstructor = (props) => {
     const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);

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

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/build/esm/models/index.js

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from '../components/Button/Button';
+import { ImageProps, ButtonProps } from './constructor-items';
 export declare enum NavigationItemType {
     Link = "link",
     Dropdown = "dropdown",
@@ -7,7 +7,7 @@ export declare enum NavigationItemType {
 }
 export interface NavigationItemBase {
     text: string;
-    icon?: string;
+    icon?: ImageProps;
     url?: string;
 }
 export interface NavigationLinkItem extends NavigationItemBase {
@@ -27,13 +27,16 @@ export interface NavigationDropdownItem extends NavigationItemBase {
 }
 export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     type: NavigationItemType.Social;
-    icon: string;
+    icon: ImageProps;
     url: string;
 }
 export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
-export interface NavigationLogo extends Omit<NavigationItemBase, 'text'> {
-    icon: string;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export interface NavigationLogo {
+    icon: ImageProps;
     text?: string;
+    url?: string;
 }
 export interface HeaderData {
     leftItems: NavigationItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "1.7.0-alpha.0",
+  "version": "1.7.0-alpha.10",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -121,8 +121,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './common';
 export * from './components';
 export * from './guards';
 export * from './react';
+export * from './navigation';

package/server/models/index.js

@@ -16,3 +16,4 @@ __exportStar(require("./common"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./guards"), exports);
 __exportStar(require("./react"), exports);
+__exportStar(require("./navigation"), exports);

package/server/models/navigation.d.ts

@@ -0,0 +1,62 @@
+import { ImageProps, ButtonProps } from './constructor-items';
+export declare enum NavigationItemType {
+    Link = "link",
+    Dropdown = "dropdown",
+    Button = "button",
+    Social = "social"
+}
+export interface NavigationItemBase {
+    text: string;
+    icon?: ImageProps;
+    url?: string;
+}
+export interface NavigationLinkItem extends NavigationItemBase {
+    type: NavigationItemType.Link;
+    url: string;
+    arrow?: boolean;
+    target?: string;
+}
+export interface NavigationButtonItem extends ButtonProps {
+    type: NavigationItemType.Button;
+    url: string;
+    target?: string;
+}
+export interface NavigationDropdownItem extends NavigationItemBase {
+    type: NavigationItemType.Dropdown;
+    items: NavigationLinkItem[];
+}
+export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
+    type: NavigationItemType.Social;
+    icon: ImageProps;
+    url: string;
+}
+export declare type NavigationItem = NavigationLinkItem | NavigationButtonItem | NavigationDropdownItem;
+export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
+export declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
+export interface NavigationLogo {
+    icon: ImageProps;
+    text?: string;
+    url?: string;
+}
+export interface HeaderData {
+    leftItems: NavigationItem[];
+    rightItems?: NavigationItem[];
+}
+export interface FooterColumn {
+    title: string;
+    links: NavigationItem[];
+}
+export interface FooterUnderline {
+    links?: NavigationItem[];
+    copyright?: string;
+}
+export interface FooterData {
+    columns: FooterColumn[];
+    social?: NavigationSocialItem[];
+    underline?: FooterUnderline;
+}
+export interface NavigationData {
+    logo: NavigationLogo;
+    header: HeaderData;
+    footer?: FooterData;
+}