@gravity-ui/page-constructor 1.26.0 → 1.26.2-alpha.0

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

@@ -1,5 +1,5 @@
 import { TextSize, TitleProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 20 | 24;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 13 | 20 | 24 | 22 | 26 | 38;
 export interface TitleFullProps extends TitleProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/components/Title/Title.js

@@ -11,12 +11,14 @@ const mobileContext_1 = require("../../context/mobileContext");
 const b = (0, utils_1.block)('title-block');
 function getArrowSize(size, isMobile) {
     switch (size) {
+        case 'xs':
+            return 13;
         case 's':
             return 16;
         case 'm':
-            return isMobile ? 20 : 24;
+            return isMobile ? 22 : 24;
         case 'l':
-            return isMobile ? 20 : 24;
+            return isMobile ? 26 : 38;
         default:
             return 20;
     }

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

@@ -38,7 +38,7 @@ export declare enum MediaVideoControlsType {
     Custom = "custom"
 }
 export type TextTheme = 'light' | 'dark';
-export type TextSize = 's' | 'm' | 'l';
+export type TextSize = 'xs' | 's' | 'm' | 'l';
 export type DividerSize = '0' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 export type HeaderWidth = 's' | 'm' | 'l';
 export type HeaderImageSize = 's' | 'm';
@@ -130,20 +130,22 @@ export interface FileLinkProps extends ClassNameProps {
     theme?: ContentTheme;
     onClick?: () => void;
 }
+export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
 export interface ButtonProps extends AnalyticsEventsBase {
     text: string;
     url: string;
     primary?: boolean;
     size?: ButtonSize;
-    theme?: ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
+    theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     target?: string;
 }
+export type ButtonImagePosition = 'left' | 'right';
 export interface ButtonImageProps {
     url: string;
-    position?: 'left' | 'right';
+    position?: ButtonImagePosition;
     alt?: string;
 }
 export interface PlayButtonProps extends ClassNameProps {
@@ -189,7 +191,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 +198,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/BannerCard/BannerCard.css

@@ -70,9 +70,10 @@ unpredictable css rules order in build */
   font-weight: var(--yc-text-accent-font-weight);
   font-weight: normal;
 }
-.pc-banner-card__button {
+.pc-banner-card__button.pc-banner-card__button {
   margin-top: 28px;
 }
+
 .pc-banner-card__image {
   border-top-right-radius: var(--pc-border-radius);
   border-bottom-right-radius: var(--pc-border-radius);

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/cjs/utils/blocks.d.ts

@@ -1,6 +1,6 @@
 import { ConstructorBlock } from '../models/constructor';
 import { TextSize, CustomConfig, PCShareSocialNetwork } from '../models';
-export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4";
+export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h4" | "h5";
 export declare function getBlockKey(block: ConstructorBlock, index: number): string;
 export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {

package/build/cjs/utils/blocks.js

@@ -8,6 +8,8 @@ function getHeaderTag(size) {
             return 'h1';
         case 's':
             return 'h4';
+        case 'xs':
+            return 'h5';
         case 'm':
         default:
             return 'h2';

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/blocks/Share/Share.css

@@ -17,46 +17,47 @@ unpredictable css rules order in build */
   justify-content: center;
   margin-top: 16px;
 }
-.pc-share-block__item {
+.pc-share-block__item.pc-share-block__item {
   display: flex;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 100%;
 }
-.pc-share-block__item_type_vk {
+.pc-share-block__item.pc-share-block__item_type_vk {
   background-color: var(--yc-color-vk);
 }
-.pc-share-block__item_type_facebook {
+.pc-share-block__item.pc-share-block__item_type_facebook {
   background-color: var(--yc-color-facebook);
 }
-.pc-share-block__item_type_twitter {
+.pc-share-block__item.pc-share-block__item_type_twitter {
   background-color: var(--yc-color-twitter);
 }
-.pc-share-block__item_type_telegram {
+.pc-share-block__item.pc-share-block__item_type_telegram {
   background-color: var(--yc-color-telegram);
 }
-.pc-share-block__item_type_telegram {
+.pc-share-block__item.pc-share-block__item_type_telegram {
   background-color: var(--yc-color-telegram);
 }
-.pc-share-block__item_type_linkedin {
+.pc-share-block__item.pc-share-block__item_type_linkedin {
   background-color: var(--yc-color-linkedin);
 }
-.pc-share-block__item.pc-share-block__item:before {
+.pc-share-block__item.pc-share-block__item.pc-share-block__item.pc-share-block__item:before {
   border-radius: 100%;
 }
 
-.pc-share-block__item:hover:before {
+.pc-share-block__item.pc-share-block__item:hover:before {
   /* stylelint-disable-next-line declaration-no-important */
   background-color: var(--yc-color-base-generic) !important;
   border-radius: 100%;
 }
-.pc-share-block__item + .pc-share-block__item {
+.pc-share-block__item.pc-share-block__item + .pc-share-block__item.pc-share-block__item {
   margin-left: 12px;
 }
-.pc-share-block__item svg {
+.pc-share-block__item.pc-share-block__item svg {
   color: var(--yc-color-base-background);
 }
+
 @media (max-width: 577px) {
   .pc-share-block__items {
     flex-wrap: wrap;

package/build/esm/components/BlockHeader/BlockHeader.css

@@ -7,10 +7,10 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }
-.pc-block-header__description_titleSize_s {
+.pc-block-header__description_titleSize_s, .pc-block-header__description_titleSize_xs {
   margin-top: 8px;
 }
-.pc-block-header__description_titleSize_s .yfm {
+.pc-block-header__description_titleSize_s .yfm, .pc-block-header__description_titleSize_xs .yfm {
   font-size: var(--yc-text-body-2-font-size);
   line-height: var(--yc-text-body-2-line-height);
 }

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

@@ -4,6 +4,7 @@ export interface ButtonProps extends Omit<ButtonParams, 'url'> {
     className?: string;
     url?: string;
     onClick?: () => void;
+    qa?: string;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/build/esm/components/Button/Button.js

@@ -3,7 +3,7 @@ import React, { useCallback, useContext } from 'react';
 import { Platform, Button as CommonButton, Icon, StoreBadge } from '@gravity-ui/uikit';
 import { block, setUrlTld } from '../../utils';
 import { DefaultEventNames } from '../../models';
-import { toCommonSize, toCommonView } from './utils';
+import { toCommonSize, toCommonView, ICON_QA } from './utils';
 import { LocaleContext } from '../../context/localeContext/localeContext';
 import { useMetrika } from '../../hooks/useMetrika';
 import { useAnalytics } from '../../hooks';
@@ -37,7 +37,7 @@ const Button = (props) => {
     let icon;
     let image = img && React.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
-        icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24 });
+        icon = React.createElement(Icon, { className: b('icon'), data: Github, size: 24, qa: ICON_QA });
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;

package/build/esm/components/Button/__tests__/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/Button/__tests__/Button.test.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ICON_QA } from '../utils';
+import Button from '../Button';
+const qaId = 'button-component';
+const buttonProps = {
+    text: 'Button Text',
+    url: 'https://github.com/gravity-ui/',
+    target: '_blank',
+    img: {
+        url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
+        position: 'left',
+        alt: 'alt-text',
+    },
+};
+const buttonViews = [
+    'normal',
+    'action',
+    'outlined',
+    'outlined-info',
+    'outlined-danger',
+    'raised',
+    'flat',
+    'flat-info',
+    'flat-danger',
+    'flat-secondary',
+    'normal-contrast',
+    'outlined-contrast',
+    'flat-contrast',
+    'github',
+    'scale',
+    'monochrome',
+];
+describe('Button', () => {
+    test('render button by default', async () => {
+        render(React.createElement(Button, { text: buttonProps.text }));
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+    test('should render <a /> tag', async () => {
+        render(React.createElement(Button, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
+        const button = screen.getByRole('link');
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+    test('call onClick', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(React.createElement(Button, { text: buttonProps.text, onClick: handleOnClick }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
+        render(React.createElement(Button, { text: buttonProps.text, size: size, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+    test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
+        render(React.createElement(Button, { text: buttonProps.text, theme: theme, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(Button, { text: buttonProps.text, className: className, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(className);
+    });
+    test('should render icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByRole('img');
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+    test('should render github icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByTestId(ICON_QA);
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

package/build/esm/components/Button/utils.d.ts

@@ -1,4 +1,5 @@
 import { ButtonSize, ButtonView } from '@gravity-ui/uikit';
+export declare const ICON_QA = "button-icon";
 export type OldButtonTheme = 'normal' | 'action' | 'flat' | 'light' | 'clear' | 'raised' | 'pseudo' | 'link' | 'accent' | 'websearch' | 'flat-special' | 'normal-special' | 'normal-dark' | 'pseudo-special';
 export type OldButtonSize = 'xs' | 'ns' | 's' | 'm' | 'l' | 'n' | 'head' | 'promo';
 export declare const toCommonView: (theme: OldButtonTheme) => ButtonView;

package/build/esm/components/Button/utils.js

@@ -1,3 +1,4 @@
+export const ICON_QA = 'button-icon';
 const themeMap = {
     normal: 'normal',
     action: 'action',

package/build/esm/components/ButtonTabs/ButtonTabs.css

@@ -1,25 +1,25 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-button-tabs__item {
+.pc-button-tabs__item.pc-button-tabs__item {
   margin-right: 8px;
   margin-bottom: 12px;
   --yc-button-background-color: var(--pc-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
 }
-.pc-button-tabs__item, .pc-button-tabs__item:link, .pc-button-tabs__item:visited, .pc-button-tabs__item:active, .pc-button-tabs__item:focus {
+.pc-button-tabs__item.pc-button-tabs__item, .pc-button-tabs__item.pc-button-tabs__item:link, .pc-button-tabs__item.pc-button-tabs__item:visited, .pc-button-tabs__item.pc-button-tabs__item:active, .pc-button-tabs__item.pc-button-tabs__item:focus {
   color: var(--pc-tab-item-color);
 }
-.pc-button-tabs__item:hover {
+.pc-button-tabs__item.pc-button-tabs__item:hover {
   color: var(--pc-tab-item-color);
 }
-.pc-button-tabs__item_active {
+.pc-button-tabs__item.pc-button-tabs__item_active {
   pointer-events: none;
   --yc-button-background-color: var(--pc-selected-tab-item-background-color);
   --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
 }
-.pc-button-tabs__item_active, .pc-button-tabs__item_active:link, .pc-button-tabs__item_active:visited, .pc-button-tabs__item_active:active, .pc-button-tabs__item_active:focus {
+.pc-button-tabs__item.pc-button-tabs__item_active, .pc-button-tabs__item.pc-button-tabs__item_active:link, .pc-button-tabs__item.pc-button-tabs__item_active:visited, .pc-button-tabs__item.pc-button-tabs__item_active:active, .pc-button-tabs__item.pc-button-tabs__item_active:focus {
   color: var(--pc-selected-tab-item-color);
 }
-.pc-button-tabs__item_active:hover {
+.pc-button-tabs__item.pc-button-tabs__item_active:hover {
   color: var(--pc-selected-tab-item-color);
 }

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);
         }
     }