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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+import { HeaderData, NavigationLogo } from '../../../../models';
 export interface HeaderProps {
     logo: NavigationLogo;
     data: HeaderData;

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

@@ -15,7 +15,6 @@ unpredictable css rules order in build */
 }
 .logo__icon {
   display: flex;
-  height: 36px;
   margin-right: 8px;
   object-fit: contain;
 }

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

@@ -11,7 +11,7 @@ const Logo = ({ icon, text, className }) => {
     const imageData = (0, utils_1.getMediaImage)(icon);
     return (react_1.default.createElement(RouterLink_1.default, { href: "/", passHref: true },
         react_1.default.createElement("div", { className: b(null, className) },
-            imageData && react_1.default.createElement(index_1.Image, Object.assign({}, imageData)),
+            imageData && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, imageData)),
             react_1.default.createElement("span", { className: b('text') }, text))));
 };
 exports.default = Logo;

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

@@ -28,6 +28,7 @@ unpredictable css rules order in build */
   margin-left: 5px;
 }
 .navigation-item__icon {
+  display: flex;
   width: 20px;
   height: 20px;
   margin-right: 8px;

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

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models/navigation';
+import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
 declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
 export interface NavigationItemProps {
@@ -7,6 +7,7 @@ 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

@@ -6,13 +6,13 @@ const bem_cn_lite_1 = (0, tslib_1.__importDefault)(require("bem-cn-lite"));
 const index_1 = require("../../../index");
 const utils_1 = require("../../../../utils");
 const locationContext_1 = require("../../../../context/locationContext");
-const navigation_1 = require("../../../../models/navigation");
+const models_1 = require("../../../../models");
 const icons_1 = require("../../../../icons");
 const SocialIcon_1 = (0, tslib_1.__importDefault)(require("../SocialIcon/SocialIcon"));
 const utils_2 = require("../../../Media/Image/utils");
 const b = (0, bem_cn_lite_1.default)('navigation-item');
 const Content = ({ text, icon }) => (react_1.default.createElement(react_1.Fragment, null,
-    icon && react_1.default.createElement("img", Object.assign({ className: b('icon') }, icon)),
+    icon && react_1.default.createElement(index_1.Image, Object.assign({ className: b('icon') }, icon)),
     react_1.default.createElement("span", { className: b('text') }, text)));
 const NavigationDropdown = (_a) => {
     var { text, icon, isOpened } = _a, props = (0, tslib_1.__rest)(_a, ["text", "icon", "isOpened"]);
@@ -22,9 +22,10 @@ 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 } = (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 { 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 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 }),
@@ -32,17 +33,22 @@ const NavigationLink = (props) => {
     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)));
 };
+const NavigationButton = (props) => {
+    const { url, target } = props;
+    return target ? (react_1.default.createElement(index_1.Button, Object.assign({}, props, { url: url }))) : (react_1.default.createElement(index_1.RouterLink, { href: url },
+        react_1.default.createElement(index_1.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 = {
-    [navigation_1.NavigationItemType.Button]: index_1.RouterLink,
-    [navigation_1.NavigationItemType.Social]: SocialIcon_1.default,
-    [navigation_1.NavigationItemType.Dropdown]: NavigationDropdown,
-    [navigation_1.NavigationItemType.Link]: NavigationLink,
+    [models_1.NavigationItemType.Button]: NavigationButton,
+    [models_1.NavigationItemType.Social]: SocialIcon_1.default,
+    [models_1.NavigationItemType.Dropdown]: NavigationDropdown,
+    [models_1.NavigationItemType.Link]: NavigationLink,
 };
 const NavigationItem = (_a) => {
     var { data, className } = _a, props = (0, tslib_1.__rest)(_a, ["data", "className"]);
-    const { type = navigation_1.NavigationItemType.Link } = data;
+    const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
     const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className: b({ type }, className) }, data), props)), [className, data, props, type]);
     return react_1.default.createElement(Component, Object.assign({}, componentProps));

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,57 @@
+"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/cjs/components/navigation/components/NavigationPopup/NavigationPopup.d.ts

@@ -1,24 +1,10 @@
-import React, { RefObject } from 'react';
-import { NavigationLinkItem } from '../../../../models/navigation';
+import React from 'react';
+import { NavigationLinkItem } from '../../../../models';
 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 {};
+export declare const NavigationPopup: React.FC<NavigationPopupProps>;
+export default NavigationPopup;

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationPopup = void 0;
 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"));
@@ -7,51 +8,41 @@ 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');
-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();
+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;
+            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_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 })))));
+    }, [left]);
+    (0, react_1.useEffect)(() => {
+        const debounceCalculateLeft = lodash_1.default.debounce(calculateLeft, 100);
+        calculateLeft();
+        window.addEventListener('resize', debounceCalculateLeft);
+        return () => {
+            window.removeEventListener('resize', debounceCalculateLeft);
+        };
+    }, [calculateLeft]);
+    (0, react_1.useEffect)(() => {
+        calculateLeft();
+    }, [calculateLeft, left]);
+    if (!document || !document.body) {
+        return null;
     }
-}
-exports.default = NavigationPopup;
+    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 })))));
+    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))));
+};
+exports.NavigationPopup = NavigationPopup;
+exports.default = exports.NavigationPopup;

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

@@ -15,6 +15,7 @@ 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.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HeaderData, NavigationLogo } from '../../../../models/navigation';
+import { HeaderData, NavigationLogo } from '../../../../models';
 import './Header.css';
 export interface HeaderProps {
     logo: NavigationLogo;

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

@@ -15,7 +15,6 @@ unpredictable css rules order in build */
 }
 .logo__icon {
   display: flex;
-  height: 36px;
   margin-right: 8px;
   object-fit: contain;
 }

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

@@ -9,7 +9,7 @@ const Logo = ({ icon, text, className }) => {
     const imageData = getMediaImage(icon);
     return (React.createElement(RouterLink, { href: "/", passHref: true },
         React.createElement("div", { className: b(null, className) },
-            imageData && React.createElement(Image, Object.assign({}, imageData)),
+            imageData && React.createElement(Image, Object.assign({ className: b('icon') }, imageData)),
             React.createElement("span", { className: b('text') }, text))));
 };
 export default Logo;

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

@@ -28,6 +28,7 @@ unpredictable css rules order in build */
   margin-left: 5px;
 }
 .navigation-item__icon {
+  display: flex;
   width: 20px;
   height: 20px;
   margin-right: 8px;

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

@@ -1,5 +1,5 @@
 import React, { MouseEventHandler } from 'react';
-import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models/navigation';
+import { NavigationButtonItem, NavigationDropdownItem, NavigationSocialItem, NavigationLinkItem } from '../../../../models';
 import './NavigationItem.css';
 declare type DropdownItemData = Omit<NavigationDropdownItem, 'items'>;
 export declare type NavigationItemData = NavigationLinkItem | NavigationButtonItem | NavigationSocialItem | DropdownItemData;
@@ -8,6 +8,7 @@ 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

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
 import React, { Fragment, useContext, useMemo } from 'react';
 import block from 'bem-cn-lite';
-import { RouterLink, ToggleArrow } from '../../../index';
+import { RouterLink, ToggleArrow, Button, Image } from '../../../index';
 import { getLinkProps } from '../../../../utils';
 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", Object.assign({ className: b('icon') }, 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"]);
@@ -21,9 +21,10 @@ const NavigationDropdown = (_a) => {
         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 { 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 iconData = icon && getMediaImage(icon);
     const content = (React.createElement(Fragment, null,
         React.createElement(Content, { text: text, icon: iconData }),
@@ -31,10 +32,15 @@ const NavigationLink = (props) => {
     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)));
 };
+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-class.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-class.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/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,44 @@
 import _ from 'lodash';
 import block from 'bem-cn-lite';
-import React, { Fragment, createRef } from 'react';
+import React, { Fragment, useRef, useState, useEffect, useCallback, useContext } 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 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 { hostname } = useContext(LocationContext);
+    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;
     }
-}
+    const renderDefaultPopup = (React.createElement(Fragment, null, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item, hostname: hostname })))));
+    return (React.createElement(Portal, null,
+        React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
+            React.createElement(OutsideClick, { onOutsideClick: onClose }, renderDefaultPopup))));
+};
+export default NavigationPopup;

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

@@ -15,6 +15,7 @@ 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.2",
+  "version": "1.7.0-alpha.4",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/models/navigation.d.ts

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