@gravity-ui/page-constructor 2.6.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.8.0](https://github.com/gravity-ui/page-constructor/compare/v2.7.0...v2.8.0) (2023-04-11)
+
+
+### Features
+
+* **BackgroundMedia:** add fullWidthMedia for BackgroundMedia ([#281](https://github.com/gravity-ui/page-constructor/issues/281)) ([5cd19b8](https://github.com/gravity-ui/page-constructor/commit/5cd19b8d4fcbf56b854a49c88b794a056d4e3295))
+
+## [2.7.0](https://github.com/gravity-ui/page-constructor/compare/v2.6.0...v2.7.0) (2023-04-06)
+
+
+### Features
+
+* add default analytics context to header block ([#289](https://github.com/gravity-ui/page-constructor/issues/289)) ([c1b8e45](https://github.com/gravity-ui/page-constructor/commit/c1b8e45423e7d8e2bd7daa108a8b296aebb811ef))
+
 ## [2.6.0](https://github.com/gravity-ui/page-constructor/compare/v2.5.0...v2.6.0) (2023-04-05)
 
 

package/build/cjs/components/BackgroundMedia/BackgroundMedia.css

@@ -12,6 +12,14 @@ unpredictable css rules order in build */
   text-align: center;
   height: 100%;
 }
+.pc-BackgroundMedia__media_full-width-media {
+  max-width: none;
+}
+.pc-BackgroundMedia__media_full-width-media .pc-BackgroundMedia__video video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
 .pc-BackgroundMedia__image {
   height: 100%;
   width: 100%;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.d.ts

@@ -1,7 +1,3 @@
-import { Animatable, MediaProps } from '../../models';
-export interface FullProps extends MediaProps, Animatable {
-    className?: string;
-    mediaClassName?: string;
-}
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, ...props }: FullProps) => JSX.Element;
+import { BackgroundMediaProps } from '../../models';
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, ...props }: BackgroundMediaProps) => JSX.Element;
 export default BackgroundMedia;

package/build/cjs/components/BackgroundMedia/BackgroundMedia.js

@@ -8,10 +8,10 @@ const AnimateBlock_1 = tslib_1.__importDefault(require("../AnimateBlock/AnimateB
 const Media_1 = tslib_1.__importDefault(require("../Media/Media"));
 const b = (0, utils_1.block)('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = tslib_1.__rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
+    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia } = _a, props = tslib_1.__rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia"]);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+        react_1.default.createElement(Media_1.default, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 exports.default = BackgroundMedia;

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

@@ -42,7 +42,7 @@ const Constructor = (props) => {
                 themedBackground && (react_1.default.createElement(BackgroundMedia_1.default, Object.assign({}, themedBackground, { className: b('background') }))),
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },
                     renderMenu && renderMenu(),
-                    header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
+                    header && (react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header, blockKey: models_1.BlockType.HeaderBlock })),
                     react_1.default.createElement(grid_1.Grid, null,
                         restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
                             react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks }))),

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -1,7 +1,7 @@
 import { ConstructorItem as ConstructorItemType, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorItemType;
-    blockKey?: string;
+    blockKey: string;
 }
-export declare const ConstructorItem: ({ data, blockKey, children, }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const blockIdContext_1 = require("../../../../context/blockIdContext");
 const innerContext_1 = require("../../../../context/innerContext");
-const ConstructorItem = ({ data, blockKey = '', children, }) => {
+const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
@@ -13,5 +13,5 @@ const ConstructorItem = ({ data, blockKey = '', children, }) => {
         react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;
-const ConstructorHeader = ({ data, blockKey = '', }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
+const ConstructorHeader = ({ data, blockKey, }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
 exports.ConstructorHeader = ConstructorHeader;

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

@@ -188,6 +188,11 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
+export interface BackgroundMediaProps extends MediaProps, Animatable {
+    fullWidthMedia?: boolean;
+    className?: string;
+    mediaClassName?: string;
+}
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;

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

@@ -69,18 +69,6 @@ unpredictable css rules order in build */
 }
 .pc-header__buttons-item {
   position: relative;
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-header__buttons-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-header__buttons-item:hover, .pc-header__buttons-item:active {
-  color: var(--yc-color-text-link);
 }
 .pc-header__buttons-item:not(:last-child) {
   margin-right: 20px;

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

@@ -14,18 +14,6 @@ unpredictable css rules order in build */
 }
 .pc-navigation__links-item {
   position: relative;
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-navigation__links-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
-  color: var(--yc-color-text-link);
 }
 .pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;

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

@@ -2,51 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const OverflowScroller_1 = tslib_1.__importDefault(require("../../../components/OverflowScroller/OverflowScroller"));
 const locationContext_1 = require("../../../context/locationContext");
 const utils_1 = require("../../../utils");
 const constants_1 = require("../../constants");
 const NavigationListItem_1 = require("../NavigationListItem/NavigationListItem");
 const b = (0, utils_1.block)('navigation');
-const EVENT_HANDLE_DELAY = 100;
-const Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
+const Navigation = ({ className, onActiveItemChange, links, activeItemId, }) => {
     const { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
-    const itemRefs = (0, react_1.useRef)([]);
-    const [itemPositions, setItemPosition] = (0, react_1.useState)([]);
-    const [lastLeftScroll, setLastLeftScroll] = (0, react_1.useState)(0);
     const hidePopup = (0, react_1.useCallback)(() => {
         onActiveItemChange();
     }, [onActiveItemChange]);
-    const calculateItemPositions = (0, react_1.useCallback)(() => {
-        if (itemRefs.current.length) {
-            const currentItemPositions = itemRefs.current.map((itemRef) => (itemRef && itemRef.getBoundingClientRect().left) || 0);
-            setItemPosition(currentItemPositions);
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions, EVENT_HANDLE_DELAY);
-        const debouncedCalculateOnScroll = lodash_1.default.debounce(() => {
-            const curLeftScroll = window.pageXOffset;
-            if (curLeftScroll !== lastLeftScroll) {
-                setLastLeftScroll(window.pageXOffset);
-                calculateItemPositions();
-            }
-        }, EVENT_HANDLE_DELAY);
-        calculateItemPositions();
-        setLastLeftScroll(window.pageXOffset);
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', debouncedCalculateOnScroll);
-        return () => {
-            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
-            window.removeEventListener('scroll', debouncedCalculateOnScroll);
-        };
-    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     (0, react_1.useEffect)(() => {
         hidePopup();
     }, [hidePopup, asPath, pathname]);
-    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+    return (react_1.default.createElement(OverflowScroller_1.default, { className: b(null, className), onScrollStart: hidePopup },
         react_1.default.createElement("nav", null,
-            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('links-item'), item: link, itemRefs: itemRefs, index: index, activeItemId: activeItemId, highlightActiveItem: highlightActiveItem, hidePopup: hidePopup, itemPositions: itemPositions, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
+            react_1.default.createElement("ul", { className: b('links') }, links.map((link, index) => (react_1.default.createElement(NavigationListItem_1.NavigationListItem, { key: index, className: b('links-item'), item: link, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: constants_1.ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
 };
 exports.default = Navigation;

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

@@ -1,10 +1,10 @@
 import React, { MouseEventHandler } from 'react';
 import { NavigationDropdownItem } from '../../../models';
 export interface NavigationDropdownProps {
+    className?: string;
     data: NavigationDropdownItem;
     onClick: MouseEventHandler;
     isActive: boolean;
-    position: number;
     hidePopup: () => void;
 }
 declare const NavigationDropdown: React.FC<NavigationDropdownProps>;

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

@@ -5,10 +5,11 @@ const react_1 = tslib_1.__importStar(require("react"));
 const models_1 = require("../../../models");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const NavigationPopup_1 = tslib_1.__importDefault(require("../NavigationPopup/NavigationPopup"));
-const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
+    const anchorRef = (0, react_1.useRef)(null);
     const { text, icon, items } = data, popupProps = tslib_1.__rest(data, ["text", "icon", "items"]);
     return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(NavigationItem_1.default, { onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
-        isActive && (react_1.default.createElement(NavigationPopup_1.default, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+        react_1.default.createElement(NavigationItem_1.default, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: models_1.NavigationItemType.Dropdown, icon } }),
+        react_1.default.createElement(NavigationPopup_1.default, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
 };
 exports.default = NavigationDropdown;

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

@@ -6,5 +6,5 @@ export interface NavigationItemProps {
     onClick?: MouseEventHandler;
     isOpened?: boolean;
 }
-declare const NavigationItem: React.FC<NavigationItemProps>;
+declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLElement>>;
 export default NavigationItem;

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

@@ -19,12 +19,13 @@ const NavigationItemsMap = {
     [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
     [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
 };
-const NavigationItem = (_a) => {
+const NavigationItem = react_1.default.forwardRef((_a, ref) => {
     var { data, className } = _a, props = tslib_1.__rest(_a, ["data", "className"]);
     const { type = models_1.NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
+    const componentProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign(Object.assign({ className }, data), props), { ref })), [className, data, props, ref]);
     return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: ANALYTICS_ID },
         react_1.default.createElement(Component, Object.assign({}, componentProps))));
-};
+});
+NavigationItem.displayName = 'NavigationItem';
 exports.default = NavigationItem;

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

@@ -1,6 +1,4 @@
 import React from 'react';
 import { DropdownItemData } from '../../../../../models';
 import { NavigationItemProps } from '../../NavigationItem';
-type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
-export declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
-export {};
+export declare const NavigationDropdown: React.ForwardRefExoticComponent<NavigationItemProps & DropdownItemData & React.RefAttributes<HTMLElement>>;

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

@@ -9,11 +9,11 @@ const utils_2 = require("../../../../../utils");
 const ContentWrapper_1 = require("../ContentWrapper/ContentWrapper");
 const b = (0, utils_2.block)('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-const NavigationDropdown = (_a) => {
+exports.NavigationDropdown = react_1.default.forwardRef((_a, ref) => {
     var { text, icon, isOpened, className } = _a, props = tslib_1.__rest(_a, ["text", "icon", "isOpened", "className"]);
     const iconData = icon && (0, utils_1.getMediaImage)(icon);
-    return (react_1.default.createElement("span", Object.assign({}, props, { className: b(null, className) }),
+    return (react_1.default.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         react_1.default.createElement(ContentWrapper_1.ContentWrapper, { text: text, icon: iconData }),
         react_1.default.createElement(components_1.ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
-exports.NavigationDropdown = NavigationDropdown;
+});
+exports.NavigationDropdown.displayName = 'NavigationDropdown';

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

@@ -1,3 +1,19 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-list-item {
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .pc-navigation-list-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-list-item__content:hover, .pc-navigation-list-item__content:active {
+  color: var(--yc-color-text-link);
+}
 .pc-navigation-list-item__slider-container {
   position: absolute;
   right: 0;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ClassNameProps, NavigationItemModel } from '../../../models';
 import { ItemColumnName } from '../../constants';
 type NavigationListItemProps = {
@@ -6,11 +5,9 @@ type NavigationListItemProps = {
     index: number;
     column: ItemColumnName;
     activeItemId?: string;
-    itemPositions?: number[];
-    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
     highlightActiveItem?: boolean;
     hidePopup: () => void;
     onActiveItemChange: (id?: string) => void;
 } & ClassNameProps;
-export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
+export declare const NavigationListItem: ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
 export {};

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

@@ -2,16 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationListItem = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const models_1 = require("../../../models");
 const utils_1 = require("../../../utils");
 const utils_2 = require("../../utils");
 const NavigationDropdownItem_1 = tslib_1.__importDefault(require("../NavigationDropdownItem/NavigationDropdownItem"));
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
-const b = (0, utils_1.block)('navigation');
-const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
-    var _a;
-    const ref = (0, react_1.useRef)(null);
+const b = (0, utils_1.block)('navigation-list-item');
+const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = (0, utils_2.getItemClickHandler)({
@@ -20,8 +18,8 @@ const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, hi
         activeItemId,
         onActiveItemChange,
     });
-    return (react_1.default.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
-        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { data: item, onClick: onClick })),
+    return (react_1.default.createElement("li", { className: b(null, className) },
+        item.type === models_1.NavigationItemType.Dropdown ? (react_1.default.createElement(NavigationDropdownItem_1.default, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (react_1.default.createElement(NavigationItem_1.default, { className: b('content'), data: item, onClick: onClick })),
         highlightActiveItem && isActive && (react_1.default.createElement("div", { className: b('slider-container') },
             react_1.default.createElement("div", { className: b('slider') })))));
 };

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

@@ -1,11 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation-popup {
-  position: fixed;
-  top: calc(var(--header-height) - 16px);
-  padding-right: 4px;
-  padding-left: 4px;
-  transform: translateX(calc(calc(8px * 2) * -1));
+  margin-left: -16px;
+  margin-top: -16px;
   z-index: 101;
   display: flex;
   flex-direction: column;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { NavigationLinkItem } from '../../../models';
 export interface NavigationPopupProps {
+    open: boolean;
     items: NavigationLinkItem[];
     onClose: () => void;
-    left?: number;
     className?: string;
+    anchorRef: React.RefObject<Element>;
 }
 export declare const NavigationPopup: React.FC<NavigationPopupProps>;
 export default NavigationPopup;

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

@@ -2,44 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavigationPopup = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const components_1 = require("../../../components");
 const utils_1 = require("../../../utils");
 const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
 const b = (0, utils_1.block)('navigation-popup');
-const NavigationPopup = ({ items, left, onClose }) => {
-    const [calculatedLeft, setCalculatedLeft] = (0, react_1.useState)(left);
-    const popupRef = (0, react_1.useRef)(null);
-    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);
-        }
-        else {
-            setCalculatedLeft(left);
-        }
-    }, [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;
-    }
-    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(components_1.OutsideClick, { onOutsideClick: onClose }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))))));
+const OFFSET_RESET = [0, 0];
+const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
+    return (react_1.default.createElement(uikit_1.Popup
+    // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+    , { 
+        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+        anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET }, items.map((item) => (react_1.default.createElement(NavigationItem_1.default, { key: item.text, className: b('link'), data: item })))));
 };
 exports.NavigationPopup = NavigationPopup;
 exports.default = exports.NavigationPopup;

package/build/cjs/schema/index.d.ts

@@ -209,6 +209,9 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
                     parallax: {
                         type: string;
                     };
+                    fullWidthMedia: {
+                        type: string;
+                    };
                     animated: {
                         type: string;
                     };

package/build/cjs/schema/validators/common.d.ts

@@ -286,6 +286,9 @@ export declare const BackgroundProps: {
         parallax: {
             type: string;
         };
+        fullWidthMedia: {
+            type: string;
+        };
         animated: {
             type: string;
         };

package/build/cjs/schema/validators/common.js

@@ -156,6 +156,8 @@ exports.BackgroundProps = {
             enum: ['contain', 'cover'],
         }, parallax: {
             type: 'boolean',
+        }, fullWidthMedia: {
+            type: 'boolean',
         } }),
 };
 exports.LinkProps = {

package/build/esm/components/BackgroundMedia/BackgroundMedia.css

@@ -12,6 +12,14 @@ unpredictable css rules order in build */
   text-align: center;
   height: 100%;
 }
+.pc-BackgroundMedia__media_full-width-media {
+  max-width: none;
+}
+.pc-BackgroundMedia__media_full-width-media .pc-BackgroundMedia__video video {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
 .pc-BackgroundMedia__image {
   height: 100%;
   width: 100%;

package/build/esm/components/BackgroundMedia/BackgroundMedia.d.ts

@@ -1,8 +1,4 @@
-import { Animatable, MediaProps } from '../../models';
+import { BackgroundMediaProps } from '../../models';
 import './BackgroundMedia.css';
-export interface FullProps extends MediaProps, Animatable {
-    className?: string;
-    mediaClassName?: string;
-}
-declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, ...props }: FullProps) => JSX.Element;
+declare const BackgroundMedia: ({ className, color, animated, parallax, video, mediaClassName, fullWidthMedia, ...props }: BackgroundMediaProps) => JSX.Element;
 export default BackgroundMedia;

package/build/esm/components/BackgroundMedia/BackgroundMedia.js

@@ -7,10 +7,10 @@ import Media from '../Media/Media';
 import './BackgroundMedia.css';
 const b = block('BackgroundMedia');
 const BackgroundMedia = (_a) => {
-    var { className, color, animated, parallax = true, video, mediaClassName } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName"]);
+    var { className, color, animated, parallax = true, video, mediaClassName, fullWidthMedia } = _a, props = __rest(_a, ["className", "color", "animated", "parallax", "video", "mediaClassName", "fullWidthMedia"]);
     const isMobile = useContext(MobileContext);
     return (React.createElement(AnimateBlock, { className: b(null, className), style: { backgroundColor: color }, animate: animated },
-        React.createElement(Media, Object.assign({ className: b('media', mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
+        React.createElement(Media, Object.assign({ className: b('media', { 'full-width-media': fullWidthMedia }, mediaClassName), imageClassName: b('image'), videoClassName: b('video'), isBackground: true }, Object.assign({ height: 720, color,
             parallax, video: isMobile ? undefined : video }, props)))));
 };
 export default BackgroundMedia;

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

@@ -7,7 +7,7 @@ import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { Grid } from '../../grid';
-import { BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
+import { BlockType, BlockTypes, HeaderBlockTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
 import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getCustomItems, getCustomSubBlockTypes, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
@@ -40,7 +40,7 @@ export const Constructor = (props) => {
                 themedBackground && (React.createElement(BackgroundMedia, Object.assign({}, themedBackground, { className: b('background') }))),
                 React.createElement(Layout, { navigation: navigation },
                     renderMenu && renderMenu(),
-                    header && React.createElement(ConstructorHeader, { data: header }),
+                    header && (React.createElement(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })),
                     React.createElement(Grid, null,
                         restBlocks && (React.createElement(ConstructorRow, null,
                             React.createElement(ConstructorBlocks, { items: restBlocks }))),

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

@@ -1,7 +1,7 @@
 import { ConstructorItem as ConstructorItemType, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorItemType;
-    blockKey?: string;
+    blockKey: string;
 }
-export declare const ConstructorItem: ({ data, blockKey, children, }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
 export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import React, { useContext } from 'react';
 import { BlockIdContext } from '../../../../context/blockIdContext';
 import { InnerContext } from '../../../../context/innerContext';
-export const ConstructorItem = ({ data, blockKey = '', children, }) => {
+export const ConstructorItem = ({ data, blockKey, children }) => {
     const { itemMap } = useContext(InnerContext);
     const { type } = data, rest = __rest(data, ["type"]);
     const Component = itemMap[type];
     return (React.createElement(BlockIdContext.Provider, { value: blockKey },
         React.createElement(Component, Object.assign({}, rest), children)));
 };
-export const ConstructorHeader = ({ data, blockKey = '', }) => (React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
+export const ConstructorHeader = ({ data, blockKey, }) => (React.createElement(ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));

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

@@ -188,6 +188,11 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
+export interface BackgroundMediaProps extends MediaProps, Animatable {
+    fullWidthMedia?: boolean;
+    className?: string;
+    mediaClassName?: string;
+}
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;

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

@@ -69,18 +69,6 @@ unpredictable css rules order in build */
 }
 .pc-header__buttons-item {
   position: relative;
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-header__buttons-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-header__buttons-item:hover, .pc-header__buttons-item:active {
-  color: var(--yc-color-text-link);
 }
 .pc-header__buttons-item:not(:last-child) {
   margin-right: 20px;

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

@@ -14,18 +14,6 @@ unpredictable css rules order in build */
 }
 .pc-navigation__links-item {
   position: relative;
-  height: var(--header-height);
-  line-height: var(--header-height);
-  cursor: pointer;
-  outline: none;
-  color: inherit;
-  text-decoration: none;
-}
-.utilityfocus .pc-navigation__links-item:focus {
-  outline: 2px solid #ffdb4d;
-}
-.pc-navigation__links-item:hover, .pc-navigation__links-item:active {
-  color: var(--yc-color-text-link);
 }
 .pc-navigation__links-item:not(:last-child) {
   margin-right: 20px;

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

@@ -1,5 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import _ from 'lodash';
+import React, { useCallback, useContext, useEffect } from 'react';
 import OverflowScroller from '../../../components/OverflowScroller/OverflowScroller';
 import { LocationContext } from '../../../context/locationContext';
 import { block } from '../../../utils';
@@ -7,44 +6,16 @@ import { ItemColumnName } from '../../constants';
 import { NavigationListItem } from '../NavigationListItem/NavigationListItem';
 import './Navigation.css';
 const b = block('navigation');
-const EVENT_HANDLE_DELAY = 100;
-const Navigation = ({ className, onActiveItemChange, links, activeItemId, highlightActiveItem, }) => {
+const Navigation = ({ className, onActiveItemChange, links, activeItemId, }) => {
     const { asPath, pathname } = useContext(LocationContext);
-    const itemRefs = useRef([]);
-    const [itemPositions, setItemPosition] = useState([]);
-    const [lastLeftScroll, setLastLeftScroll] = useState(0);
     const hidePopup = useCallback(() => {
         onActiveItemChange();
     }, [onActiveItemChange]);
-    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, EVENT_HANDLE_DELAY);
-        const debouncedCalculateOnScroll = _.debounce(() => {
-            const curLeftScroll = window.pageXOffset;
-            if (curLeftScroll !== lastLeftScroll) {
-                setLastLeftScroll(window.pageXOffset);
-                calculateItemPositions();
-            }
-        }, EVENT_HANDLE_DELAY);
-        calculateItemPositions();
-        setLastLeftScroll(window.pageXOffset);
-        window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', debouncedCalculateOnScroll);
-        return () => {
-            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
-            window.removeEventListener('scroll', debouncedCalculateOnScroll);
-        };
-    }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     useEffect(() => {
         hidePopup();
     }, [hidePopup, asPath, pathname]);
-    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup, onScrollEnd: calculateItemPositions },
+    return (React.createElement(OverflowScroller, { className: b(null, className), onScrollStart: hidePopup },
         React.createElement("nav", null,
-            React.createElement("ul", { className: b('links') }, links.map((link, index) => (React.createElement(NavigationListItem, { key: index, className: b('links-item'), item: link, itemRefs: itemRefs, index: index, activeItemId: activeItemId, highlightActiveItem: highlightActiveItem, hidePopup: hidePopup, itemPositions: itemPositions, column: ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
+            React.createElement("ul", { className: b('links') }, links.map((link, index) => (React.createElement(NavigationListItem, { key: index, className: b('links-item'), item: link, index: index, activeItemId: activeItemId, hidePopup: hidePopup, column: ItemColumnName.Left, onActiveItemChange: onActiveItemChange })))))));
 };
 export default Navigation;

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

@@ -1,10 +1,10 @@
 import React, { MouseEventHandler } from 'react';
 import { NavigationDropdownItem } from '../../../models';
 export interface NavigationDropdownProps {
+    className?: string;
     data: NavigationDropdownItem;
     onClick: MouseEventHandler;
     isActive: boolean;
-    position: number;
     hidePopup: () => void;
 }
 declare const NavigationDropdown: React.FC<NavigationDropdownProps>;

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

@@ -1,12 +1,13 @@
 import { __rest } from "tslib";
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { NavigationItemType } from '../../../models';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import NavigationPopup from '../NavigationPopup/NavigationPopup';
-const NavigationDropdown = ({ data, isActive, position, hidePopup, onClick, }) => {
+const NavigationDropdown = ({ className, data, isActive, hidePopup, onClick, }) => {
+    const anchorRef = useRef(null);
     const { text, icon, items } = data, popupProps = __rest(data, ["text", "icon", "items"]);
     return (React.createElement(Fragment, null,
-        React.createElement(NavigationItem, { onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon } }),
-        isActive && (React.createElement(NavigationPopup, Object.assign({ left: position, onClose: hidePopup, items: items }, popupProps)))));
+        React.createElement(NavigationItem, { className: className, ref: anchorRef, onClick: onClick, isOpened: isActive, data: { text, type: NavigationItemType.Dropdown, icon } }),
+        React.createElement(NavigationPopup, Object.assign({ open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef }, popupProps))));
 };
 export default NavigationDropdown;

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

@@ -6,5 +6,5 @@ export interface NavigationItemProps {
     onClick?: MouseEventHandler;
     isOpened?: boolean;
 }
-declare const NavigationItem: React.FC<NavigationItemProps>;
+declare const NavigationItem: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLElement>>;
 export default NavigationItem;

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

@@ -17,12 +17,13 @@ const NavigationItemsMap = {
     [NavigationItemType.Link]: NavigationLink,
     [NavigationItemType.GithubButton]: GithubButton,
 };
-const NavigationItem = (_a) => {
+const NavigationItem = React.forwardRef((_a, ref) => {
     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 }, data), props)), [className, data, props]);
+    const componentProps = useMemo(() => (Object.assign(Object.assign(Object.assign({ className }, data), props), { ref })), [className, data, props, ref]);
     return (React.createElement(BlockIdContext.Provider, { value: ANALYTICS_ID },
         React.createElement(Component, Object.assign({}, componentProps))));
-};
+});
+NavigationItem.displayName = 'NavigationItem';
 export default NavigationItem;

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

@@ -2,6 +2,4 @@ import React from 'react';
 import { DropdownItemData } from '../../../../../models';
 import { NavigationItemProps } from '../../NavigationItem';
 import './NavigationDropdown.css';
-type NavigationDropdownProps = NavigationItemProps & DropdownItemData;
-export declare const NavigationDropdown: React.FC<NavigationDropdownProps>;
-export {};
+export declare const NavigationDropdown: React.ForwardRefExoticComponent<NavigationItemProps & DropdownItemData & React.RefAttributes<HTMLElement>>;

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

@@ -7,10 +7,11 @@ import { ContentWrapper } from '../ContentWrapper/ContentWrapper';
 import './NavigationDropdown.css';
 const b = block('navigation-dropdown');
 const TOGGLE_ARROW_SIZE = 12;
-export const NavigationDropdown = (_a) => {
+export const NavigationDropdown = React.forwardRef((_a, ref) => {
     var { text, icon, isOpened, className } = _a, props = __rest(_a, ["text", "icon", "isOpened", "className"]);
     const iconData = icon && getMediaImage(icon);
-    return (React.createElement("span", Object.assign({}, props, { className: b(null, className) }),
+    return (React.createElement("span", Object.assign({ ref: ref }, props, { className: b(null, className) }),
         React.createElement(ContentWrapper, { text: text, icon: iconData }),
         React.createElement(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isOpened })));
-};
+});
+NavigationDropdown.displayName = 'NavigationDropdown';

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

@@ -1,3 +1,19 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-navigation-list-item {
+  height: var(--header-height);
+  line-height: var(--header-height);
+  cursor: pointer;
+  outline: none;
+  color: inherit;
+  text-decoration: none;
+}
+.utilityfocus .pc-navigation-list-item:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-navigation-list-item__content:hover, .pc-navigation-list-item__content:active {
+  color: var(--yc-color-text-link);
+}
 .pc-navigation-list-item__slider-container {
   position: absolute;
   right: 0;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ClassNameProps, NavigationItemModel } from '../../../models';
 import { ItemColumnName } from '../../constants';
 import './NavigationListItem.css';
@@ -7,11 +6,9 @@ type NavigationListItemProps = {
     index: number;
     column: ItemColumnName;
     activeItemId?: string;
-    itemPositions?: number[];
-    itemRefs?: React.MutableRefObject<(HTMLLIElement | null)[]>;
     highlightActiveItem?: boolean;
     hidePopup: () => void;
     onActiveItemChange: (id?: string) => void;
 } & ClassNameProps;
-export declare const NavigationListItem: ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
+export declare const NavigationListItem: ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }: NavigationListItemProps) => JSX.Element;
 export {};

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

@@ -1,14 +1,12 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { NavigationItemType } from '../../../models';
 import { block } from '../../../utils';
 import { getItemClickHandler } from '../../utils';
 import NavigationDropdownItem from '../NavigationDropdownItem/NavigationDropdownItem';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationListItem.css';
-const b = block('navigation');
-export const NavigationListItem = ({ item, itemRefs, className, index, activeItemId, highlightActiveItem, hidePopup, itemPositions, column, onActiveItemChange, }) => {
-    var _a;
-    const ref = useRef(null);
+const b = block('navigation-list-item');
+export const NavigationListItem = ({ item, className, index, activeItemId, highlightActiveItem, hidePopup, column, onActiveItemChange, }) => {
     const id = `${column}-${index}`;
     const isActive = id === activeItemId;
     const onClick = getItemClickHandler({
@@ -17,8 +15,8 @@ export const NavigationListItem = ({ item, itemRefs, className, index, activeIte
         activeItemId,
         onActiveItemChange,
     });
-    return (React.createElement("li", { ref: itemRefs ? (el) => itemRefs.current.push(el) : ref, className: className },
-        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { data: item, onClick: onClick, isActive: isActive, position: (itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions[index]) || ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0, hidePopup: hidePopup })) : (React.createElement(NavigationItem, { data: item, onClick: onClick })),
+    return (React.createElement("li", { className: b(null, className) },
+        item.type === NavigationItemType.Dropdown ? (React.createElement(NavigationDropdownItem, { className: b('content'), data: item, onClick: onClick, isActive: isActive, hidePopup: hidePopup })) : (React.createElement(NavigationItem, { className: b('content'), data: item, onClick: onClick })),
         highlightActiveItem && isActive && (React.createElement("div", { className: b('slider-container') },
             React.createElement("div", { className: b('slider') })))));
 };

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

@@ -1,11 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-navigation-popup {
-  position: fixed;
-  top: calc(var(--header-height) - 16px);
-  padding-right: 4px;
-  padding-left: 4px;
-  transform: translateX(calc(calc(8px * 2) * -1));
+  margin-left: -16px;
+  margin-top: -16px;
   z-index: 101;
   display: flex;
   flex-direction: column;

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

@@ -2,10 +2,11 @@ import React from 'react';
 import { NavigationLinkItem } from '../../../models';
 import './NavigationPopup.css';
 export interface NavigationPopupProps {
+    open: boolean;
     items: NavigationLinkItem[];
     onClose: () => void;
-    left?: number;
     className?: string;
+    anchorRef: React.RefObject<Element>;
 }
 export declare const NavigationPopup: React.FC<NavigationPopupProps>;
 export default NavigationPopup;

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

@@ -1,41 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import _ from 'lodash';
-import { Portal } from '@gravity-ui/uikit';
-import { OutsideClick } from '../../../components';
+import React from 'react';
+import { Popup } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import './NavigationPopup.css';
 const b = block('navigation-popup');
-export const NavigationPopup = ({ items, left, onClose }) => {
-    const [calculatedLeft, setCalculatedLeft] = useState(left);
-    const popupRef = useRef(null);
-    const calculateLeft = useCallback(() => {
-        if (popupRef && popupRef.current && left) {
-            const right = left + popupRef.current.offsetWidth;
-            const docWidth = document.body.clientWidth;
-            const currentLeft = right > docWidth ? left - (right - docWidth) : left;
-            setCalculatedLeft(currentLeft);
-        }
-        else {
-            setCalculatedLeft(left);
-        }
-    }, [left]);
-    useEffect(() => {
-        const debounceCalculateLeft = _.debounce(calculateLeft, 100);
-        calculateLeft();
-        window.addEventListener('resize', debounceCalculateLeft);
-        return () => {
-            window.removeEventListener('resize', debounceCalculateLeft);
-        };
-    }, [calculateLeft]);
-    useEffect(() => {
-        calculateLeft();
-    }, [calculateLeft, left]);
-    if (!document || !document.body) {
-        return null;
-    }
-    return (React.createElement(Portal, null,
-        React.createElement("div", { ref: popupRef, className: b(), style: { left: calculatedLeft } },
-            React.createElement(OutsideClick, { onOutsideClick: onClose }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))))));
+const OFFSET_RESET = [0, 0];
+export const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => {
+    return (React.createElement(Popup
+    // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+    , { 
+        // Workaround to recalculate position on every opening. Required for valid position calculation for scrolled header links.
+        anchorRef: open ? anchorRef : undefined, className: b(null, className), open: open, onClose: onClose, onOutsideClick: onClose, keepMounted: true, disablePortal: true, strategy: "fixed", placement: "bottom-start", offset: OFFSET_RESET }, items.map((item) => (React.createElement(NavigationItem, { key: item.text, className: b('link'), data: item })))));
 };
 export default NavigationPopup;

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

@@ -209,6 +209,9 @@ export declare function generateDefaultSchema(config?: SchemaCustomConfig): {
                     parallax: {
                         type: string;
                     };
+                    fullWidthMedia: {
+                        type: string;
+                    };
                     animated: {
                         type: string;
                     };

package/build/esm/schema/validators/common.d.ts

@@ -286,6 +286,9 @@ export declare const BackgroundProps: {
         parallax: {
             type: string;
         };
+        fullWidthMedia: {
+            type: string;
+        };
         animated: {
             type: string;
         };

package/build/esm/schema/validators/common.js

@@ -153,6 +153,8 @@ export const BackgroundProps = {
             enum: ['contain', 'cover'],
         }, parallax: {
             type: 'boolean',
+        }, fullWidthMedia: {
+            type: 'boolean',
         } }),
 };
 export const LinkProps = {

package/package.json

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

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

@@ -188,6 +188,11 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
+export interface BackgroundMediaProps extends MediaProps, Animatable {
+    fullWidthMedia?: boolean;
+    className?: string;
+    mediaClassName?: string;
+}
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;

package/styles/mixins.scss

@@ -472,17 +472,6 @@ unpredictable css rules order in build */
     }
 }
 
-@mixin navigation-link() {
-    cursor: pointer;
-    @include islands-focus();
-    @include reset-link-style();
-
-    &:hover,
-    &:active {
-        color: var(--yc-color-text-link);
-    }
-}
-
 @mixin button($color, $backgroundColor, $hoverColor: $color, $hoverBackgroundColor) {
     --yc-button-background-color: #{$backgroundColor};
     --yc-button-background-color-hover: #{$hoverBackgroundColor};