@gravity-ui/page-constructor 2.0.0-beta.1 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [2.0.1](https://github.com/gravity-ui/page-constructor/compare/v2.0.0...v2.0.1) (2023-03-24)
+
+
+### Bug Fixes
+
+* handle margins for centered links and buttons in Content ([#223](https://github.com/gravity-ui/page-constructor/issues/223)) ([50590f2](https://github.com/gravity-ui/page-constructor/commit/50590f288cba7d3dd88e4f91e1642d0a34061fb9))
+* **Navigation:** fix issue with remaining event handler in effect ([#220](https://github.com/gravity-ui/page-constructor/issues/220)) ([d494523](https://github.com/gravity-ui/page-constructor/commit/d4945238ee52f7cca92ea4b092f0701ab4d99693))
+
+## [2.0.0](https://github.com/gravity-ui/page-constructor/compare/v1.25.2...v2.0.0) (2023-03-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* update uikit up to 4, update react up to 18([#134](https://github.com/gravity-ui/page-constructor/issues/134)) (#212)
+
+### Features
+
+* map-block changing the logic of zoom and center ([#219](https://github.com/gravity-ui/page-constructor/issues/219)) ([d332844](https://github.com/gravity-ui/page-constructor/commit/d33284425878cdbfacdf7813826d909e9ab696cb))
+* update uikit up to 4, update react up to 18([#134](https://github.com/gravity-ui/page-constructor/issues/134)) ([#212](https://github.com/gravity-ui/page-constructor/issues/212)) ([377b1f5](https://github.com/gravity-ui/page-constructor/commit/377b1f59c25d08458082232075e2e7bcfe84fe5c))
+
 ## [1.25.2](https://github.com/gravity-ui/page-constructor/compare/v1.25.1...v1.25.2) (2023-03-21)
 
 

package/build/cjs/blocks/Map/schema.d.ts

@@ -6,12 +6,6 @@ export declare const Map: {
         zoom: {
             type: string;
         };
-        center: {
-            type: string;
-            items: {
-                type: string;
-            };
-        };
         address: {
             type: string;
         };
@@ -70,12 +64,6 @@ export declare const MapBlock: {
                     zoom: {
                         type: string;
                     };
-                    center: {
-                        type: string;
-                        items: {
-                            type: string;
-                        };
-                    };
                     address: {
                         type: string;
                     };

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

@@ -7,7 +7,7 @@ export interface HTMLProps {
 }
 declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
-        __html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
+        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
 }, HTMLElement> | null;

package/build/cjs/components/Map/GoogleMap.js

@@ -8,18 +8,20 @@ const mapsContext_1 = require("../../context/mapsContext/mapsContext");
 const localeContext_1 = require("../../context/localeContext/localeContext");
 const mobileContext_1 = require("../../context/mobileContext");
 const helpers_1 = require("./helpers");
+const configure_1 = require("../../utils/configure");
 const b = (0, utils_1.block)('map');
-function getScriptSrc(apiKey, scriptSrc, address, lang) {
-    return `${scriptSrc}?key=${apiKey}&language=${lang}&q=${encodeURI(address)}`;
+function getScriptSrc(params) {
+    const { apiKey, scriptSrc, address, lang, zoom } = params;
+    return `${scriptSrc}?key=${apiKey}&language=${lang}${zoom ? '&zoom=' + zoom : ''}&q=${encodeURI(address)}`;
 }
 const GoogleMap = (props) => {
-    const { address } = props;
+    const { address, zoom } = props;
     const { apiKey, scriptSrc } = (0, react_1.useContext)(mapsContext_1.MapsContext);
-    const { lang = 'ru' } = (0, react_1.useContext)(localeContext_1.LocaleContext);
+    const { lang = configure_1.Lang.Ru } = (0, react_1.useContext)(localeContext_1.LocaleContext);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const [height, setHeight] = (0, react_1.useState)(undefined);
     const ref = (0, react_1.useRef)(null);
-    const src = (0, react_1.useMemo)(() => getScriptSrc(apiKey, scriptSrc, address, lang), [apiKey, scriptSrc, address, lang]);
+    const src = (0, react_1.useMemo)(() => getScriptSrc({ apiKey, scriptSrc, address, lang, zoom }), [apiKey, scriptSrc, address, lang, zoom]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
             if (ref.current) {

package/build/cjs/components/Map/Map.css

@@ -7,9 +7,13 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
 }
+.pc-map_hidden {
+  opacity: 0;
+}
 .pc-map__spinner {
   margin: 0 auto;
   align-self: center;
+  position: absolute;
 }
 .pc-map__wrapper {
   min-height: 300px;
@@ -17,4 +21,5 @@ unpredictable css rules order in build */
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }

package/build/cjs/components/Map/YMap/YMap.d.ts

@@ -1,13 +1,15 @@
-import { YMapMarker } from '../../../models';
+import { YMapProps, YMapMarker } from '../../../models';
+type PlacemarksProps = Pick<YMapProps, 'zoom' | 'markers'>;
 export declare class YMap {
     private ymap;
     private mapRef;
     private coords;
     constructor(ymap: Ymaps.Map, mapRef: HTMLDivElement | null);
-    showPlacemarks(markers: YMapMarker[]): Promise<void>;
+    showPlacemarks(props: PlacemarksProps): Promise<void>;
     findAddress(marker: YMapMarker): Promise<void>;
     findCoordinate(marker: YMapMarker): void;
     private drawPlaceMarkStyle;
     private recalcZoomAndCenter;
     private clearOldPlacemarks;
 }
+export {};

package/build/cjs/components/Map/YMap/YMap.js

@@ -22,9 +22,9 @@ class YMap {
         this.ymap = ymap;
         this.mapRef = mapRef;
     }
-    async showPlacemarks(markers) {
+    async showPlacemarks(props) {
         this.clearOldPlacemarks();
-        for (const marker of markers) {
+        for (const marker of props.markers) {
             if (marker.address) {
                 await this.findAddress(marker);
             }
@@ -32,7 +32,7 @@ class YMap {
                 this.findCoordinate(marker);
             }
         }
-        this.recalcZoomAndCenter();
+        this.recalcZoomAndCenter(props);
     }
     async findAddress(marker) {
         try {
@@ -52,10 +52,7 @@ class YMap {
         this.ymap.geoObjects.add(geoObject);
     }
     drawPlaceMarkStyle(geoObject, marker) {
-        if (!marker.label) {
-            return;
-        }
-        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label;
+        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label || {};
         let localIconColor = iconColor;
         // You can set the preset option together with the iconColor option only if it not a 'Stretchy' preset
         if (!preset.includes('Stretchy') && !iconColor) {
@@ -68,9 +65,10 @@ class YMap {
             }
         });
     }
-    recalcZoomAndCenter() {
+    recalcZoomAndCenter(props) {
         var _a, _b;
         const coordsLength = this.coords.length;
+        const { zoom = 0 } = props;
         if (!coordsLength) {
             return;
         }
@@ -79,10 +77,20 @@ class YMap {
             leftBottom = [Math.min(leftBottom[0], point[0]), Math.min(leftBottom[1], point[1])];
             rightTop = [Math.max(rightTop[0], point[0]), Math.max(rightTop[1], point[1])];
         });
-        const newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        let newMapParams = {
+            zoom,
+            center: [],
+        };
+        if (zoom) {
+            // compute only the center
+            newMapParams.center = window.ymaps.util.bounds.getCenter([leftBottom, rightTop]);
+        }
+        else {
+            newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        }
         this.ymap.setCenter(newMapParams.center);
         // Use default zoom for one placemark
-        if (coordsLength > 1) {
+        if (coordsLength > 1 && !zoom) {
             this.ymap.setZoom(newMapParams.zoom);
         }
     }

package/build/cjs/components/Map/YMap/YandexMap.js

@@ -16,8 +16,12 @@ const helpers_1 = require("../helpers");
 const b = (0, utils_1.block)('map');
 const DEFAULT_CONTAINER_ID = 'ymap';
 const DEFAULT_ZOOM = 9;
+// Center - is a required parameter for creating a new map
+// We use this init center to create a map
+// The real center of the map will be calculated later, using the coordinates of the markers
+const INITIAL_CENTER = [0, 0];
 const YandexMap = (props) => {
-    const { markers, zoom, center, id } = props;
+    const { markers, zoom, id } = props;
     const { apiKey, scriptSrc, nonce } = (0, react_1.useContext)(mapsContext_1.MapsContext);
     const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { lang = 'ru' } = (0, react_1.useContext)(localeContext_1.LocaleContext);
@@ -26,6 +30,7 @@ const YandexMap = (props) => {
     const [height, setHeight] = (0, react_1.useState)(undefined);
     const ref = (0, react_1.useRef)(null);
     const [loading, setLoading] = (0, react_1.useState)(false);
+    const [ready, setReady] = (0, react_1.useState)(false);
     const [attemptsIndex, setAttemptsIndex] = (0, react_1.useState)(0);
     const onTryAgain = (0, react_1.useCallback)(() => {
         setAttemptsIndex(attemptsIndex + 1);
@@ -33,20 +38,17 @@ const YandexMap = (props) => {
     (0, react_1.useEffect)(() => {
         (async function () {
             var _a;
-            if (!center) {
-                return;
-            }
             setLoading(true);
             await YandexMapApiLoader_1.YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
             (_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
                 setYmaps(new YMap_1.YMap(new window.ymaps.Map(containerId, {
-                    center,
+                    center: INITIAL_CENTER,
                     zoom: zoom || DEFAULT_ZOOM,
                 }, { autoFitToViewport: 'always' }), ref.current));
             });
             setLoading(false);
         })();
-    }, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
+    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
     (0, react_1.useEffect)(() => {
         const updateSize = lodash_1.default.debounce(() => {
             if (ref.current) {
@@ -61,12 +63,19 @@ const YandexMap = (props) => {
     }, [markers, ymap, setYmaps, isMobile]);
     (0, react_1.useEffect)(() => {
         if (ymap) {
-            ymap.showPlacemarks(markers);
+            // show with computed center and placemarks
+            const showPlacemarks = async () => {
+                await ymap.showPlacemarks({ markers, zoom });
+                setReady(true);
+            };
+            showPlacemarks();
         }
     });
-    if (!center)
+    if (!markers)
         return null;
     return (react_1.default.createElement(ErrorWrapper_1.default, { isError: YandexMapApiLoader_1.YMapsApiLoader.status === YandexMapApiLoader_1.MapApiStatus.Error, text: (0, i18n_1.default)('map-load-error'), buttonText: (0, i18n_1.default)('map-try-again'), handler: onTryAgain, className: b('wrapper') },
-        react_1.default.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? react_1.default.createElement(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null)));
+        react_1.default.createElement("div", { className: b('wrapper') },
+            react_1.default.createElement("div", { id: containerId, className: b({ hidden: !ready }), ref: ref, style: { height } }),
+            loading ? react_1.default.createElement(uikit_1.Spin, { size: "xl", className: b('spinner') }) : null)));
 };
 exports.default = YandexMap;

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

@@ -189,7 +189,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +196,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;

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

@@ -9,6 +9,7 @@ const locationContext_1 = require("../../../context/locationContext");
 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 { asPath, pathname } = (0, react_1.useContext)(locationContext_1.LocationContext);
     const itemRefs = (0, react_1.useRef)([]);
@@ -24,21 +25,21 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemId, highli
         }
     }, []);
     (0, react_1.useEffect)(() => {
-        const debouncedCalculateItemPositions = lodash_1.default.debounce(calculateItemPositions, 100);
-        const calculateOnScroll = lodash_1.default.debounce(() => {
+        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();
             }
-        }, 100);
+        }, EVENT_HANDLE_DELAY);
         calculateItemPositions();
         setLastLeftScroll(window.pageXOffset);
         window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', calculateOnScroll);
+        window.addEventListener('scroll', debouncedCalculateOnScroll);
         return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-            window.removeEventListener('scroll', calculateOnScroll);
+            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
+            window.removeEventListener('scroll', debouncedCalculateOnScroll);
         };
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     (0, react_1.useEffect)(() => {

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

@@ -1168,12 +1168,6 @@ export declare const MapProps: {
     zoom: {
         type: string;
     };
-    center: {
-        type: string;
-        items: {
-            type: string;
-        };
-    };
     address: {
         type: string;
     };

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

@@ -493,10 +493,6 @@ exports.MapProps = {
     zoom: {
         type: 'number',
     },
-    center: {
-        type: 'array',
-        items: { type: 'number' },
-    },
     address: {
         type: 'string',
     },

package/build/cjs/sub-blocks/Content/Content.css

@@ -31,6 +31,9 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-right: 12px;
 }
+.pc-content__button.pc-content__button:last-child {
+  margin-right: 0;
+}
 
 .pc-content__links {
   display: flex;
@@ -41,6 +44,9 @@ unpredictable css rules order in build */
   display: block;
   margin-right: 32px;
 }
+.pc-content__link:last-child {
+  margin-right: 0;
+}
 .pc-content_centered.pc-content_centered {
   margin: 0 auto;
   text-align: center;

package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css

@@ -268,6 +268,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
+  font-family: var(--yc-text-body-font-family);
   font-size: inherit;
   font-weight: 400;
   color: inherit;

package/build/esm/blocks/Map/schema.d.ts

@@ -6,12 +6,6 @@ export declare const Map: {
         zoom: {
             type: string;
         };
-        center: {
-            type: string;
-            items: {
-                type: string;
-            };
-        };
         address: {
             type: string;
         };
@@ -70,12 +64,6 @@ export declare const MapBlock: {
                     zoom: {
                         type: string;
                     };
-                    center: {
-                        type: string;
-                        items: {
-                            type: string;
-                        };
-                    };
                     address: {
                         type: string;
                     };

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

@@ -7,7 +7,7 @@ export interface HTMLProps {
 }
 declare const HTML: ({ children, block, className }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
     dangerouslySetInnerHTML: {
-        __html: string & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null);
+        __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
     };
     className: string | undefined;
 }, HTMLElement> | null;

package/build/esm/components/Map/GoogleMap.js

@@ -5,18 +5,20 @@ import { MapsContext } from '../../context/mapsContext/mapsContext';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { getMapHeight } from './helpers';
+import { Lang } from '../../utils/configure';
 const b = block('map');
-function getScriptSrc(apiKey, scriptSrc, address, lang) {
-    return `${scriptSrc}?key=${apiKey}&language=${lang}&q=${encodeURI(address)}`;
+function getScriptSrc(params) {
+    const { apiKey, scriptSrc, address, lang, zoom } = params;
+    return `${scriptSrc}?key=${apiKey}&language=${lang}${zoom ? '&zoom=' + zoom : ''}&q=${encodeURI(address)}`;
 }
 const GoogleMap = (props) => {
-    const { address } = props;
+    const { address, zoom } = props;
     const { apiKey, scriptSrc } = useContext(MapsContext);
-    const { lang = 'ru' } = useContext(LocaleContext);
+    const { lang = Lang.Ru } = useContext(LocaleContext);
     const isMobile = useContext(MobileContext);
     const [height, setHeight] = useState(undefined);
     const ref = useRef(null);
-    const src = useMemo(() => getScriptSrc(apiKey, scriptSrc, address, lang), [apiKey, scriptSrc, address, lang]);
+    const src = useMemo(() => getScriptSrc({ apiKey, scriptSrc, address, lang, zoom }), [apiKey, scriptSrc, address, lang, zoom]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
             if (ref.current) {

package/build/esm/components/Map/Map.css

@@ -7,9 +7,13 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
 }
+.pc-map_hidden {
+  opacity: 0;
+}
 .pc-map__spinner {
   margin: 0 auto;
   align-self: center;
+  position: absolute;
 }
 .pc-map__wrapper {
   min-height: 300px;
@@ -17,4 +21,5 @@ unpredictable css rules order in build */
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  position: relative;
 }

package/build/esm/components/Map/YMap/YMap.d.ts

@@ -1,13 +1,15 @@
-import { YMapMarker } from '../../../models';
+import { YMapProps, YMapMarker } from '../../../models';
+type PlacemarksProps = Pick<YMapProps, 'zoom' | 'markers'>;
 export declare class YMap {
     private ymap;
     private mapRef;
     private coords;
     constructor(ymap: Ymaps.Map, mapRef: HTMLDivElement | null);
-    showPlacemarks(markers: YMapMarker[]): Promise<void>;
+    showPlacemarks(props: PlacemarksProps): Promise<void>;
     findAddress(marker: YMapMarker): Promise<void>;
     findCoordinate(marker: YMapMarker): void;
     private drawPlaceMarkStyle;
     private recalcZoomAndCenter;
     private clearOldPlacemarks;
 }
+export {};

package/build/esm/components/Map/YMap/YMap.js

@@ -19,9 +19,9 @@ export class YMap {
         this.ymap = ymap;
         this.mapRef = mapRef;
     }
-    async showPlacemarks(markers) {
+    async showPlacemarks(props) {
         this.clearOldPlacemarks();
-        for (const marker of markers) {
+        for (const marker of props.markers) {
             if (marker.address) {
                 await this.findAddress(marker);
             }
@@ -29,7 +29,7 @@ export class YMap {
                 this.findCoordinate(marker);
             }
         }
-        this.recalcZoomAndCenter();
+        this.recalcZoomAndCenter(props);
     }
     async findAddress(marker) {
         try {
@@ -49,10 +49,7 @@ export class YMap {
         this.ymap.geoObjects.add(geoObject);
     }
     drawPlaceMarkStyle(geoObject, marker) {
-        if (!marker.label) {
-            return;
-        }
-        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label;
+        const { iconColor, preset = DEFAULT_PLACEMARKS_PRESET } = marker.label || {};
         let localIconColor = iconColor;
         // You can set the preset option together with the iconColor option only if it not a 'Stretchy' preset
         if (!preset.includes('Stretchy') && !iconColor) {
@@ -65,9 +62,10 @@ export class YMap {
             }
         });
     }
-    recalcZoomAndCenter() {
+    recalcZoomAndCenter(props) {
         var _a, _b;
         const coordsLength = this.coords.length;
+        const { zoom = 0 } = props;
         if (!coordsLength) {
             return;
         }
@@ -76,10 +74,20 @@ export class YMap {
             leftBottom = [Math.min(leftBottom[0], point[0]), Math.min(leftBottom[1], point[1])];
             rightTop = [Math.max(rightTop[0], point[0]), Math.max(rightTop[1], point[1])];
         });
-        const newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        let newMapParams = {
+            zoom,
+            center: [],
+        };
+        if (zoom) {
+            // compute only the center
+            newMapParams.center = window.ymaps.util.bounds.getCenter([leftBottom, rightTop]);
+        }
+        else {
+            newMapParams = window.ymaps.util.bounds.getCenterAndZoom([leftBottom, rightTop], [(_a = this.mapRef) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = this.mapRef) === null || _b === void 0 ? void 0 : _b.clientHeight], undefined, { margin: DEFAULT_MAP_CONTROL_BUTTON_HEIGHT });
+        }
         this.ymap.setCenter(newMapParams.center);
         // Use default zoom for one placemark
-        if (coordsLength > 1) {
+        if (coordsLength > 1 && !zoom) {
             this.ymap.setZoom(newMapParams.zoom);
         }
     }

package/build/esm/components/Map/YMap/YandexMap.js

@@ -13,8 +13,12 @@ import { getMapHeight } from '../helpers';
 const b = block('map');
 const DEFAULT_CONTAINER_ID = 'ymap';
 const DEFAULT_ZOOM = 9;
+// Center - is a required parameter for creating a new map
+// We use this init center to create a map
+// The real center of the map will be calculated later, using the coordinates of the markers
+const INITIAL_CENTER = [0, 0];
 const YandexMap = (props) => {
-    const { markers, zoom, center, id } = props;
+    const { markers, zoom, id } = props;
     const { apiKey, scriptSrc, nonce } = useContext(MapsContext);
     const isMobile = useContext(MobileContext);
     const { lang = 'ru' } = useContext(LocaleContext);
@@ -23,6 +27,7 @@ const YandexMap = (props) => {
     const [height, setHeight] = useState(undefined);
     const ref = useRef(null);
     const [loading, setLoading] = useState(false);
+    const [ready, setReady] = useState(false);
     const [attemptsIndex, setAttemptsIndex] = useState(0);
     const onTryAgain = useCallback(() => {
         setAttemptsIndex(attemptsIndex + 1);
@@ -30,20 +35,17 @@ const YandexMap = (props) => {
     useEffect(() => {
         (async function () {
             var _a;
-            if (!center) {
-                return;
-            }
             setLoading(true);
             await YMapsApiLoader.loadApi(apiKey, scriptSrc, lang, nonce);
             (_a = window.ymaps) === null || _a === void 0 ? void 0 : _a.ready(() => {
                 setYmaps(new YMap(new window.ymaps.Map(containerId, {
-                    center,
+                    center: INITIAL_CENTER,
                     zoom: zoom || DEFAULT_ZOOM,
                 }, { autoFitToViewport: 'always' }), ref.current));
             });
             setLoading(false);
         })();
-    }, [apiKey, lang, scriptSrc, containerId, zoom, center, nonce, attemptsIndex, setLoading]);
+    }, [apiKey, lang, scriptSrc, containerId, zoom, nonce, attemptsIndex, setLoading]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
             if (ref.current) {
@@ -58,12 +60,19 @@ const YandexMap = (props) => {
     }, [markers, ymap, setYmaps, isMobile]);
     useEffect(() => {
         if (ymap) {
-            ymap.showPlacemarks(markers);
+            // show with computed center and placemarks
+            const showPlacemarks = async () => {
+                await ymap.showPlacemarks({ markers, zoom });
+                setReady(true);
+            };
+            showPlacemarks();
         }
     });
-    if (!center)
+    if (!markers)
         return null;
     return (React.createElement(ErrorWrapper, { isError: YMapsApiLoader.status === MapApiStatus.Error, text: i18n('map-load-error'), buttonText: i18n('map-try-again'), handler: onTryAgain, className: b('wrapper') },
-        React.createElement("div", { id: containerId, className: b(), ref: ref, style: { height } }, loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
+        React.createElement("div", { className: b('wrapper') },
+            React.createElement("div", { id: containerId, className: b({ hidden: !ready }), ref: ref, style: { height } }),
+            loading ? React.createElement(Spin, { size: "xl", className: b('spinner') }) : null)));
 };
 export default YandexMap;

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

@@ -189,7 +189,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +196,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;

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

@@ -7,6 +7,7 @@ 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 { asPath, pathname } = useContext(LocationContext);
     const itemRefs = useRef([]);
@@ -22,21 +23,21 @@ const Navigation = ({ className, onActiveItemChange, links, activeItemId, highli
         }
     }, []);
     useEffect(() => {
-        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, 100);
-        const calculateOnScroll = _.debounce(() => {
+        const debouncedCalculateItemPositions = _.debounce(calculateItemPositions, EVENT_HANDLE_DELAY);
+        const debouncedCalculateOnScroll = _.debounce(() => {
             const curLeftScroll = window.pageXOffset;
             if (curLeftScroll !== lastLeftScroll) {
                 setLastLeftScroll(window.pageXOffset);
                 calculateItemPositions();
             }
-        }, 100);
+        }, EVENT_HANDLE_DELAY);
         calculateItemPositions();
         setLastLeftScroll(window.pageXOffset);
         window.addEventListener('resize', debouncedCalculateItemPositions);
-        window.addEventListener('scroll', calculateOnScroll);
+        window.addEventListener('scroll', debouncedCalculateOnScroll);
         return () => {
-            window.removeEventListener(`resize`, calculateItemPositions);
-            window.removeEventListener('scroll', calculateOnScroll);
+            window.removeEventListener(`resize`, debouncedCalculateItemPositions);
+            window.removeEventListener('scroll', debouncedCalculateOnScroll);
         };
     }, [calculateItemPositions, itemRefs, lastLeftScroll]);
     useEffect(() => {

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

@@ -1168,12 +1168,6 @@ export declare const MapProps: {
     zoom: {
         type: string;
     };
-    center: {
-        type: string;
-        items: {
-            type: string;
-        };
-    };
     address: {
         type: string;
     };

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

@@ -489,10 +489,6 @@ export const MapProps = {
     zoom: {
         type: 'number',
     },
-    center: {
-        type: 'array',
-        items: { type: 'number' },
-    },
     address: {
         type: 'string',
     },

package/build/esm/sub-blocks/Content/Content.css

@@ -31,6 +31,9 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-right: 12px;
 }
+.pc-content__button.pc-content__button:last-child {
+  margin-right: 0;
+}
 
 .pc-content__links {
   display: flex;
@@ -41,6 +44,9 @@ unpredictable css rules order in build */
   display: block;
   margin-right: 32px;
 }
+.pc-content__link:last-child {
+  margin-right: 0;
+}
 .pc-content_centered.pc-content_centered {
   margin: 0 auto;
   text-align: center;

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -268,6 +268,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
+  font-family: var(--yc-text-body-font-family);
   font-size: inherit;
   font-weight: 400;
   color: inherit;

package/package.json

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

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

@@ -189,7 +189,6 @@ export interface MediaProps extends Animatable, Partial<MediaComponentDataLensPr
 export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
-    center?: Coordinate;
 }
 export interface GMapProps extends MapBaseProps {
     address: string;
@@ -197,7 +196,6 @@ export interface GMapProps extends MapBaseProps {
 export interface YMapProps extends MapBaseProps {
     markers: YMapMarker[];
     id: string;
-    center: Coordinate;
 }
 export interface YMapMarker {
     address?: string;