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

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

@@ -0,0 +1,79 @@
+import React, { createRef } from 'react';
+import block from 'bem-cn-lite';
+import { Col, Grid, Row } from '../../../../grid';
+import OutsideClick from '../../../OutsideClick/OutsideClick';
+import Control from '../../../Control/Control';
+import Logo from '../Logo/Logo';
+import Navigation from '../Navigation/Navigation';
+import MobileNavigation from '../MobileNavigation/MobileNavigation';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import { NavigationClose, NavigationOpen } from '../../../../icons';
+import './Header.css';
+const b = block('header');
+class Header extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ref = createRef();
+        this.state = {
+            isSidebarOpened: false,
+            activeItemIndex: -1,
+        };
+        this.onActiveItemChange = (index) => {
+            this.setState({ activeItemIndex: index });
+        };
+        this.onSidebarOpenedChange = (isSidebarOpened) => {
+            this.setState({ isSidebarOpened });
+        };
+        this.hideSidebar = () => {
+            this.setState({ isSidebarOpened: false });
+        };
+    }
+    render() {
+        return (React.createElement(Grid, { className: b() },
+            React.createElement(Row, null,
+                React.createElement(Col, null,
+                    React.createElement("header", { className: b('wrapper') },
+                        this.renderLogo(),
+                        this.renderLeft(),
+                        this.renderRight(),
+                        this.renderMobileNavigation())))));
+    }
+    renderLeft() {
+        const { activeItemIndex } = this.state;
+        const { leftItems } = this.props.data;
+        return (leftItems && (React.createElement("div", { className: b('navigation-container') },
+            React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
+    }
+    renderLogo() {
+        const { logo } = this.props;
+        if (!logo) {
+            return null;
+        }
+        return (React.createElement("div", { className: b('left') },
+            React.createElement(Logo, Object.assign({}, logo, { className: b('logo') }))));
+    }
+    renderRight() {
+        return (React.createElement("div", { className: b('right') },
+            this.renderMobileMenuButton(),
+            this.renderRightItems()));
+    }
+    renderRightItems() {
+        const { rightItems } = this.props.data;
+        return (rightItems && (React.createElement("div", { className: b('buttons') }, rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') }))))));
+    }
+    renderMobileMenuButton() {
+        const { isSidebarOpened } = this.state;
+        const iconProps = { icon: isSidebarOpened ? NavigationClose : NavigationOpen, iconSize: 36 };
+        return (React.createElement(Control, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
+                e.stopPropagation();
+                this.onSidebarOpenedChange(!isSidebarOpened);
+            }, size: "l" }, iconProps)));
+    }
+    renderMobileNavigation() {
+        const { leftItems, rightItems } = this.props.data;
+        const { isSidebarOpened, activeItemIndex } = this.state;
+        return (React.createElement(OutsideClick, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
+            React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
+    }
+}
+export default Header;

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

@@ -0,0 +1,18 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.logo {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-size: var(--yc-text-header-2-font-size);
+  line-height: var(--yc-text-header-2-line-height);
+}
+.logo__icon {
+  width: 178px;
+  height: 36px;
+  margin-right: 8px;
+  object-fit: contain;
+}
+.logo__text {
+  white-space: nowrap;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationLogo } from '../../../../models/navigation';
+import './Logo.css';
+export interface LogoProps extends NavigationLogo {
+    className?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+export default Logo;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { Image } from '../../../index';
+import RouterLink from '../../../RouterLink/RouterLink';
+import './Logo.css';
+const b = block('logo');
+const Logo = ({ icon, text, className }) => (React.createElement(RouterLink, { href: "/", passHref: true },
+    React.createElement("div", { className: b(null, className) },
+        icon && React.createElement(Image, { className: b('icon'), src: icon }),
+        React.createElement("span", { className: b('text') }, text))));
+export default Logo;

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

@@ -0,0 +1,58 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.mobile-navigation {
+  position: fixed;
+  z-index: 100;
+  top: var(--header-height);
+  left: 0;
+  width: 100%;
+  border-bottom-right-radius: var(--pc-border-radius);
+  border-bottom-left-radius: var(--pc-border-radius);
+  background-color: var(--yc-color-base-background);
+  box-shadow: 0px 3px 10px var(--yc-color-sfx-shadow);
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+@media (min-width: 769px) {
+  .mobile-navigation {
+    display: none;
+  }
+}
+.mobile-navigation__wrapper {
+  padding: 32px 20px;
+}
+.mobile-navigation__button {
+  margin-top: 24px;
+}
+.mobile-navigation__links {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 24px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mobile-navigation__links-item:not(:last-child) {
+  margin-bottom: 24px;
+}
+.mobile-navigation__dropdown-item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.mobile-navigation__popup {
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 16px;
+  border: 1px solid var(--yc-color-line-generic);
+  border-top-width: 0;
+  border-radius: calc(var(--pc-border-radius) / 2);
+  background: var(--yc-color-base-float);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+@media (min-width: 769px) {
+  .mobile-navigation__popup {
+    display: none;
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import './MobileNavigation.css';
+export interface MobileNavigationProps {
+    className?: string;
+    isOpened?: boolean;
+    topItems?: NavigationItemModel[];
+    bottomItems?: NavigationItemModel[];
+    activeItemIndex: number;
+    onClose: () => void;
+    onActiveItemChange: (index: number) => void;
+}
+declare const MobileNavigation: React.FC<MobileNavigationProps>;
+export default MobileNavigation;

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

@@ -0,0 +1,43 @@
+import block from 'bem-cn-lite';
+import React, { useRef, useCallback } from 'react';
+import Foldable from '../../../Foldable/Foldable';
+import { Popup, Portal } from '@gravity-ui/uikit';
+import { NavigationItemType, } from '../../../../models/navigation';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import './MobileNavigation.css';
+const b = block('mobile-navigation');
+const MobileNavigationDropdown = ({ data, onItemClick, onToggle, isOpened = false, }) => {
+    const ref = useRef(null);
+    return (React.createElement("div", { ref: ref, className: b('dropdown') },
+        React.createElement(NavigationItem, { data: data, onClick: onToggle, isOpened: isOpened }),
+        isOpened && (React.createElement(Popup, { anchorRef: ref, open: isOpened, className: b('popup') }, data.items.map((item) => (React.createElement(NavigationItem, { key: item.text, data: item, className: b('dropdown-item'), onClick: onItemClick })))))));
+};
+const MobileNavigationItem = ({ link, index, isActive, onActiveItemChange, onClose, }) => {
+    const toggleActive = useCallback((e) => {
+        e.stopPropagation();
+        if (onActiveItemChange) {
+            onActiveItemChange(isActive ? -1 : index);
+        }
+    }, [isActive, index, onActiveItemChange]);
+    const onItemClick = useCallback((e) => {
+        toggleActive(e);
+        onClose();
+    }, [toggleActive, onClose]);
+    return (React.createElement("li", { key: index, className: b('links-item') }, link.type === NavigationItemType.Dropdown ? (React.createElement(MobileNavigationDropdown, { data: link, onToggle: toggleActive, isOpened: isActive, onItemClick: onItemClick })) : (React.createElement(NavigationItem, { data: link, onClick: onItemClick }))));
+};
+const MobileNavigation = (props) => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const { isOpened, topItems, bottomItems, activeItemIndex, onActiveItemChange, onClose } = props;
+    return (React.createElement(Portal, null,
+        React.createElement(Foldable, { key: topItems === null || topItems === void 0 ? void 0 : topItems.length, className: b(), isOpened: Boolean(isOpened) },
+            React.createElement("div", { className: b('wrapper') },
+                React.createElement("nav", null,
+                    React.createElement("ul", { className: b('links') }, topItems === null || topItems === void 0 ? void 0 : topItems.map((link, index) => {
+                        const isActive = index === activeItemIndex;
+                        return (React.createElement(MobileNavigationItem, { key: index, link: link, index: index, isActive: isOpened && isActive, onClose: onClose, onActiveItemChange: onActiveItemChange }));
+                    }))), bottomItems === null || bottomItems === void 0 ? void 0 :
+                bottomItems.map((item) => (React.createElement(NavigationItem, { key: item.text, data: item, className: b('button') })))))));
+};
+export default MobileNavigation;

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

@@ -0,0 +1,43 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.navigation {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.navigation__links {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.navigation__links-item {
+  position: relative;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .navigation__links-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.navigation__links-item:hover, .navigation__links-item:active {
+  color: var(--yc-color-text-link);
+}
+.navigation__links-item:not(:last-child) {
+  margin-right: 20px;
+}
+.navigation__slider-container {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.navigation__slider {
+  width: 100%;
+  height: 2px;
+  background-color: var(--yc-color-text-link);
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NavigationItem as NavigationItemModel } from '../../../../models/navigation';
+import './Navigation.css';
+export interface NavigationProps {
+    links: NavigationItemModel[];
+    activeItemIndex: number;
+    onActiveItemChange: (index: number) => void;
+    className?: string;
+    highlightActiveItem?: boolean;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

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

@@ -0,0 +1,69 @@
+import { __rest } from "tslib";
+import _ from 'lodash';
+import block from 'bem-cn-lite';
+import React, { Fragment, useState, useEffect, useCallback, useContext, useRef, } from 'react';
+import OverflowScroller from '../../../OverflowScroller/OverflowScroller';
+import { NavigationItemType, } from '../../../../models/navigation';
+import NavigationPopup from '../NavigationPopup/NavigationPopup';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import { LocationContext } from '../../../../context/locationContext';
+import './Navigation.css';
+const b = block('navigation');
+const Navigation = ({ className, onActiveItemChange, links, activeItemIndex, highlightActiveItem, }) => {
+    const { asPath, pathname } = useContext(LocationContext);
+    const itemRefs = useRef([]);
+    const [itemPositions, setItemPosition] = useState([]);
+    const [lastLeftScroll, setLastLeftScroll] = useState(0);
+    const hidePopup = useCallback(() => {
+        onActiveItemChange(-1);
+    }, [onActiveItemChange]);
+    const getItemClickHandler = useCallback((index) => (e) => {
+        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);
+            setItemPosition(currentItemPositions);
+        }
+    }, []);
+    useEffect(() => {
+        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, 100);
+        const calculateOnScroll = _.debounce(() => {
+            const curLeftScroll = window.pageXOffset;
+            if (curLeftScroll !== lastLeftScroll) {
+                setLastLeftScroll(window.pageXOffset);
+                calculateItemPositions();
+            }
+        }, 100);
+        calculateItemPositions();
+        setLastLeftScroll(window.pageXOffset);
+        window.addEventListener('resize', debouncedCalculateItemPositions);
+        window.addEventListener('scroll', calculateOnScroll);
+        return () => {
+            window.removeEventListener(`resize`, calculateItemPositions);
+            window.removeEventListener('scroll', calculateOnScroll);
+        };
+    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
+    useEffect(() => {
+        hidePopup();
+    }, [hidePopup, asPath, pathname]);
+    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions }, content));
+};
+export default Navigation;

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

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

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

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

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

@@ -0,0 +1,46 @@
+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 { LocationContext } from '../../../../context/locationContext';
+import { NavigationItemType, } from '../../../../models/navigation';
+import { NavigationArrow } from '../../../../icons';
+import SocialIcon from '../SocialIcon/SocialIcon';
+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 }),
+    React.createElement("span", { className: b('text') }, text)));
+const NavigationDropdown = (_a) => {
+    var { text, icon, isOpened } = _a, props = __rest(_a, ["text", "icon", "isOpened"]);
+    return (React.createElement("span", Object.assign({}, props),
+        React.createElement(Content, { text: text, icon: icon }),
+        React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
+};
+const NavigationLink = (props) => {
+    const { hostname } = useContext(LocationContext);
+    const { url, text, icon, arrow, target } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target"]);
+    const linkExtraProps = getLinkProps(url, hostname, target);
+    const content = (React.createElement(Fragment, null,
+        React.createElement(Content, { text: text, icon: icon }),
+        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)));
+};
+//todo: add types support form component in map
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const NavigationItemsMap = {
+    [NavigationItemType.Button]: RouterLink,
+    [NavigationItemType.Social]: SocialIcon,
+    [NavigationItemType.Dropdown]: NavigationDropdown,
+    [NavigationItemType.Link]: NavigationLink,
+};
+const NavigationItem = (_a) => {
+    var { data, className } = _a, props = __rest(_a, ["data", "className"]);
+    const { type = NavigationItemType.Link } = data;
+    const Component = NavigationItemsMap[type];
+    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
+    return React.createElement(Component, Object.assign({}, componentProps));
+};
+export default NavigationItem;

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

@@ -0,0 +1,33 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.navigation-popup {
+  position: fixed;
+  top: calc(var(--header-height) - 16px);
+  padding-right: 4px;
+  padding-left: 4px;
+  transform: translateX(calc(calc(8px * 2) * -1));
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+  padding: 16px;
+  border: 1px solid var(--yc-color-line-generic);
+  border-top-width: 0;
+  border-radius: calc(var(--pc-border-radius) / 2);
+  background: var(--yc-color-base-float);
+  box-shadow: 0 3px 10px var(--yc-color-sfx-shadow);
+}
+@media (max-width: 768px) {
+  .navigation-popup {
+    display: none;
+  }
+}
+.navigation-popup__link {
+  height: 36px;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+.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

@@ -0,0 +1,25 @@
+import React, { RefObject } from 'react';
+import { NavigationLinkItem } from '../../../../models/navigation';
+import './NavigationPopup.css';
+export interface NavigationPopupProps {
+    items: NavigationLinkItem[];
+    onClose: () => void;
+    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 {};

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

@@ -0,0 +1,54 @@
+import _ from 'lodash';
+import block from 'bem-cn-lite';
+import React, { Fragment, createRef } from 'react';
+import { Portal } from '@gravity-ui/uikit';
+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();
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.calculateLeft);
+    }
+    render() {
+        if (!document || !document.body) {
+            return null;
+        }
+        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 })))));
+    }
+}

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

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavigationSocialItem } from '../../../../models/navigation';
+import './SocialIcon.css';
+export interface NavigationSocialItemProps extends NavigationSocialItem {
+    className?: string;
+}
+declare const SocialIcon: React.FC<NavigationSocialItemProps>;
+export default SocialIcon;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import { Image } from '../../../index';
+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 })));
+export default SocialIcon;

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

@@ -1,6 +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 './PageConstructor.css';
 export declare type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
@@ -9,6 +10,7 @@ export interface PageConstructorProps {
     shouldRenderBlock?: ShouldRenderBlock;
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
+    navigationData?: NavigationData;
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;