@gravity-ui/page-constructor 1.7.0-alpha.4 → 1.7.0-alpha.6

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

@@ -28,9 +28,9 @@ unpredictable css rules order in build */
 }
 .header__navigation {
   position: relative;
+  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
-  margin-right: 20px;
 }
 @media (max-width: 768px) {
   .header__navigation {

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

@@ -4,25 +4,5 @@ export interface HeaderProps {
     logo: NavigationLogo;
     data: HeaderData;
 }
-interface HeaderState {
-    isSidebarOpened: boolean;
-    activeItemIndex: number;
-}
-declare class Header extends React.Component<HeaderProps, HeaderState> {
-    ref: React.RefObject<unknown>;
-    state: {
-        isSidebarOpened: boolean;
-        activeItemIndex: number;
-    };
-    render(): JSX.Element;
-    private renderLeft;
-    private renderLogo;
-    private renderRight;
-    private renderRightItems;
-    private renderMobileMenuButton;
-    private renderMobileNavigation;
-    private onActiveItemChange;
-    private onSidebarOpenedChange;
-    private hideSidebar;
-}
+export declare const Header: React.FC<HeaderProps>;
 export default Header;

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

@@ -1,81 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = (0, tslib_1.__importStar)(require("react"));
 const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const grid_1 = require("../../../../grid");
 const OutsideClick_1 = (0, tslib_1.__importDefault)(require("../../../OutsideClick/OutsideClick"));
 const Control_1 = (0, tslib_1.__importDefault)(require("../../../Control/Control"));
-const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const Navigation_1 = (0, tslib_1.__importDefault)(require("../Navigation/Navigation"));
 const MobileNavigation_1 = (0, tslib_1.__importDefault)(require("../MobileNavigation/MobileNavigation"));
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
+const Logo_1 = (0, tslib_1.__importDefault)(require("../Logo/Logo"));
 const icons_1 = require("../../../../icons");
 const b = (0, bem_cn_lite_1.default)('header');
-class Header extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = (0, react_1.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_1.default.createElement(grid_1.Grid, { className: b() },
-            react_1.default.createElement(grid_1.Row, null,
-                react_1.default.createElement(grid_1.Col, null,
-                    react_1.default.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_1.default.createElement("div", { className: b('navigation-container') },
-            react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange }))));
-    }
-    renderLogo() {
-        const { logo } = this.props;
-        if (!logo) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { className: b('left') },
-            react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
-    }
-    renderRight() {
-        return (react_1.default.createElement("div", { className: b('right') },
-            this.renderMobileMenuButton(),
-            this.renderRightItems()));
-    }
-    renderRightItems() {
-        const { rightItems } = this.props.data;
-        return (rightItems && (react_1.default.createElement("div", { className: b('buttons') }, rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') }))))));
-    }
-    renderMobileMenuButton() {
-        const { isSidebarOpened } = this.state;
+const Header = ({ data, logo }) => {
+    const { leftItems, rightItems } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
+    const onActiveItemChange = (0, react_1.useCallback)((index) => {
+        setActiveItemIndex(index);
+    }, []);
+    const onSidebarOpenedChange = (0, react_1.useCallback)((isOpen) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+    const hideSidebar = (0, react_1.useCallback)(() => {
+        setIsSidebarOpened(false);
+    }, []);
+    const renderLogo = (react_1.default.createElement("div", { className: b('left') },
+        react_1.default.createElement(Logo_1.default, Object.assign({}, logo, { className: b('logo') }))));
+    const renderLeft = (react_1.default.createElement("div", { className: b('navigation-container') },
+        react_1.default.createElement(Navigation_1.default, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })));
+    const renderMobileMenuButton = () => {
         const iconProps = { icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: 36 };
         return (react_1.default.createElement(Control_1.default, Object.assign({ className: b('mobile-menu-button'), onClick: (e) => {
                 e.stopPropagation();
-                this.onSidebarOpenedChange(!isSidebarOpened);
+                onSidebarOpenedChange(!isSidebarOpened);
             }, size: "l" }, iconProps)));
-    }
-    renderMobileNavigation() {
-        const { leftItems, rightItems } = this.props.data;
-        const { isSidebarOpened, activeItemIndex } = this.state;
-        return (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => this.onSidebarOpenedChange(false) },
-            react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: this.onActiveItemChange, onClose: this.hideSidebar })));
-    }
-}
-exports.default = Header;
+    };
+    const renderRightItems = (react_1.default.createElement("div", { className: b('buttons') }, rightItems &&
+        rightItems.map((button) => (react_1.default.createElement(NavigationItem_1.default, { key: button.text, data: button, className: b('button') })))));
+    const renderRight = (react_1.default.createElement("div", { className: b('right') },
+        renderMobileMenuButton(),
+        rightItems && renderRightItems));
+    const renderMobileNavigation = (react_1.default.createElement(OutsideClick_1.default, { onOutsideClick: () => onSidebarOpenedChange(false) },
+        react_1.default.createElement(MobileNavigation_1.default, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })));
+    return (react_1.default.createElement(grid_1.Grid, { className: b() },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement(grid_1.Col, null,
+                react_1.default.createElement("header", { className: b('wrapper') },
+                    logo && renderLogo,
+                    leftItems && renderLeft,
+                    renderRight,
+                    renderMobileNavigation)))));
+};
+exports.Header = Header;
+exports.default = exports.Header;

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

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   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);
+  box-shadow: 0 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);
 }

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

@@ -7,7 +7,6 @@ export interface NavigationItemProps {
     className?: string;
     onClick?: MouseEventHandler;
     isOpened?: boolean;
-    hostname?: string;
 }
 declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

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

@@ -22,16 +22,20 @@ const NavigationDropdown = (_a) => {
         react_1.default.createElement(index_1.ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
-    const { hostname: locationHostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const { url, text, icon, arrow, target, hostname } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target", "hostname"]);
-    const currentHostname = locationHostname || hostname;
-    const linkExtraProps = (0, utils_1.getLinkProps)(url, currentHostname, target);
+    const { hostname, Link } = (0, react_1.useContext)(locationContext_1.LocationContext);
+    const { url, text, icon, arrow, target } = props, rest = (0, tslib_1.__rest)(props, ["url", "text", "icon", "arrow", "target"]);
+    const linkExtraProps = (0, utils_1.getLinkProps)(url, hostname, target);
     const iconData = icon && (0, utils_2.getMediaImage)(icon);
     const content = (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(Content, { text: text, icon: iconData }),
         arrow && react_1.default.createElement(icons_1.NavigationArrow, { className: b('arrow') })));
-    return (linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) ? (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content)) : (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
-        react_1.default.createElement("a", Object.assign({}, rest), content)));
+    if ((linkExtraProps === null || linkExtraProps === void 0 ? void 0 : linkExtraProps.target) || !Link) {
+        return (react_1.default.createElement("a", Object.assign({ href: url, title: text }, rest, linkExtraProps), content));
+    }
+    else {
+        return (react_1.default.createElement(index_1.RouterLink, { href: url, passHref: true },
+            react_1.default.createElement("a", Object.assign({}, rest), content)));
+    }
 };
 const NavigationButton = (props) => {
     const { url, target } = props;

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

@@ -8,12 +8,10 @@ const react_1 = (0, tslib_1.__importStar)(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const index_1 = require("../../../index");
 const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const locationContext_1 = require("../../../../context/locationContext");
 const b = (0, bem_cn_lite_1.default)('navigation-popup');
 const NavigationPopup = ({ items, left, onClose }) => {
     const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
     const popupRef = (0, react_1.useRef)(null);
-    const { hostname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const calculateLeft = (0, react_1.useCallback)(() => {
         if (popupRef && popupRef.current && left) {
             const right = left + popupRef.current.offsetWidth;
@@ -39,7 +37,7 @@ const NavigationPopup = ({ items, left, onClose }) => {
     if (!document || !document.body) {
         return null;
     }
-    const renderDefaultPopup = (react_1.default.createElement(react_1.Fragment, null, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item, hostname: hostname })))));
+    const renderDefaultPopup = (react_1.default.createElement(react_1.Fragment, null, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
     return (react_1.default.createElement(uikit_1.Portal, null,
         react_1.default.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
             react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));

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

@@ -15,7 +15,6 @@ export interface NavigationLinkItem extends NavigationItemBase {
     url: string;
     arrow?: boolean;
     target?: string;
-    hostname?: string;
 }
 export interface NavigationButtonItem extends ButtonProps {
     type: NavigationItemType.Button;

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

@@ -28,9 +28,9 @@ unpredictable css rules order in build */
 }
 .header__navigation {
   position: relative;
+  margin-right: 20px;
   flex: 1 0 0;
   justify-content: flex-start;
-  margin-right: 20px;
 }
 @media (max-width: 768px) {
   .header__navigation {

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

@@ -5,25 +5,5 @@ export interface HeaderProps {
     logo: NavigationLogo;
     data: HeaderData;
 }
-interface HeaderState {
-    isSidebarOpened: boolean;
-    activeItemIndex: number;
-}
-declare class Header extends React.Component<HeaderProps, HeaderState> {
-    ref: React.RefObject<unknown>;
-    state: {
-        isSidebarOpened: boolean;
-        activeItemIndex: number;
-    };
-    render(): JSX.Element;
-    private renderLeft;
-    private renderLogo;
-    private renderRight;
-    private renderRightItems;
-    private renderMobileMenuButton;
-    private renderMobileNavigation;
-    private onActiveItemChange;
-    private onSidebarOpenedChange;
-    private hideSidebar;
-}
+export declare const Header: React.FC<HeaderProps>;
 export default Header;

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

@@ -1,79 +1,53 @@
-import React, { createRef } from 'react';
+import React, { useCallback, useState } 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 Logo from '../Logo/Logo';
 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;
+export const Header = ({ data, logo }) => {
+    const { leftItems, rightItems } = data;
+    const [isSidebarOpened, setIsSidebarOpened] = useState(false);
+    const [activeItemIndex, setActiveItemIndex] = useState(-1);
+    const onActiveItemChange = useCallback((index) => {
+        setActiveItemIndex(index);
+    }, []);
+    const onSidebarOpenedChange = useCallback((isOpen) => {
+        setIsSidebarOpened(isOpen);
+    }, []);
+    const hideSidebar = useCallback(() => {
+        setIsSidebarOpened(false);
+    }, []);
+    const renderLogo = (React.createElement("div", { className: b('left') },
+        React.createElement(Logo, Object.assign({}, logo, { className: b('logo') }))));
+    const renderLeft = (React.createElement("div", { className: b('navigation-container') },
+        React.createElement(Navigation, { className: b('navigation'), links: leftItems, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange })));
+    const renderMobileMenuButton = () => {
         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);
+                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 })));
-    }
-}
+    };
+    const renderRightItems = (React.createElement("div", { className: b('buttons') }, rightItems &&
+        rightItems.map((button) => (React.createElement(NavigationItem, { key: button.text, data: button, className: b('button') })))));
+    const renderRight = (React.createElement("div", { className: b('right') },
+        renderMobileMenuButton(),
+        rightItems && renderRightItems));
+    const renderMobileNavigation = (React.createElement(OutsideClick, { onOutsideClick: () => onSidebarOpenedChange(false) },
+        React.createElement(MobileNavigation, { topItems: leftItems, bottomItems: rightItems, isOpened: isSidebarOpened, activeItemIndex: activeItemIndex, onActiveItemChange: onActiveItemChange, onClose: hideSidebar })));
+    return (React.createElement(Grid, { className: b() },
+        React.createElement(Row, null,
+            React.createElement(Col, null,
+                React.createElement("header", { className: b('wrapper') },
+                    logo && renderLogo,
+                    leftItems && renderLeft,
+                    renderRight,
+                    renderMobileNavigation)))));
+};
 export default Header;

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

@@ -9,7 +9,7 @@ unpredictable css rules order in build */
   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);
+  box-shadow: 0 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);
 }

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

@@ -8,7 +8,6 @@ export interface NavigationItemProps {
     className?: string;
     onClick?: MouseEventHandler;
     isOpened?: boolean;
-    hostname?: string;
 }
 declare const NavigationItem: React.FC<NavigationItemProps>;
 export default NavigationItem;

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

@@ -21,16 +21,20 @@ const NavigationDropdown = (_a) => {
         React.createElement(ToggleArrow, { className: b('dropdown'), size: 12, type: 'vertical', iconType: "navigation", open: isOpened })));
 };
 const NavigationLink = (props) => {
-    const { hostname: locationHostname } = useContext(LocationContext);
-    const { url, text, icon, arrow, target, hostname } = props, rest = __rest(props, ["url", "text", "icon", "arrow", "target", "hostname"]);
-    const currentHostname = locationHostname || hostname;
-    const linkExtraProps = getLinkProps(url, currentHostname, target);
+    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: 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;

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

@@ -1,16 +1,14 @@
 import _ from 'lodash';
 import block from 'bem-cn-lite';
-import React, { Fragment, useRef, useState, useEffect, useCallback, useContext } from 'react';
+import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
 import { Portal } from '@gravity-ui/uikit';
 import { OutsideClick } from '../../../index';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationPopup.css';
-import { LocationContext } from '../../../../context/locationContext';
 const b = block('navigation-popup');
 export const NavigationPopup = ({ items, left, onClose }) => {
     const [calculatedLeft, setCalculatedLeft] = useState(left);
     const popupRef = useRef(null);
-    const { hostname } = useContext(LocationContext);
     const calculateLeft = useCallback(() => {
         if (popupRef && popupRef.current && left) {
             const right = left + popupRef.current.offsetWidth;
@@ -36,7 +34,7 @@ export const NavigationPopup = ({ items, left, onClose }) => {
     if (!document || !document.body) {
         return null;
     }
-    const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item, hostname: hostname })))));
+    const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
     return (React.createElement(Portal, null,
         React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
             React.createElement(OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));

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

@@ -15,7 +15,6 @@ export interface NavigationLinkItem extends NavigationItemBase {
     url: string;
     arrow?: boolean;
     target?: string;
-    hostname?: string;
 }
 export interface NavigationButtonItem extends ButtonProps {
     type: NavigationItemType.Button;

package/package.json

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

package/server/models/navigation.d.ts

@@ -15,7 +15,6 @@ export interface NavigationLinkItem extends NavigationItemBase {
     url: string;
     arrow?: boolean;
     target?: string;
-    hostname?: string;
 }
 export interface NavigationButtonItem extends ButtonProps {
     type: NavigationItemType.Button;

package/build/cjs/components/navigation/components/NavigationPopup/NavigationPopup-class.d.ts

@@ -1,24 +0,0 @@
-import React, { RefObject } from 'react';
-import { NavigationLinkItem } from '../../../../models/navigation';
-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/cjs/components/navigation/components/NavigationPopup/NavigationPopup-class.js

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
-const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
-const react_1 = (0, tslib_1.__importStar)(require("react"));
-const uikit_1 = require("@gravity-ui/uikit");
-const index_1 = require("../../../index");
-const NavigationItem_1 = (0, tslib_1.__importDefault)(require("../NavigationItem/NavigationItem"));
-const b = (0, bem_cn_lite_1.default)('navigation-popup');
-class NavigationPopup extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = (0, react_1.createRef)();
-        this.state = {
-            calculatedLeft: this.props.left,
-        };
-        this.calculateLeft = lodash_1.default.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_1.default.createElement(uikit_1.Portal, null,
-            react_1.default.createElement("div", { ref: this.ref, className: b(), style: { left: calculatedLeft } },
-                react_1.default.createElement(index_1.OutsideClick, { onOutsideClick: onClose }, this.renderDefaultPopup()))));
-    }
-    renderDefaultPopup() {
-        return (react_1.default.createElement(react_1.Fragment, null, this.props.items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
-    }
-}
-exports.default = NavigationPopup;

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

@@ -1,25 +0,0 @@
-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-class.js

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