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

package/CHANGELOG.md

@@ -1,26 +1,59 @@
 # Changelog
 
-## [1.26.0](https://github.com/gravity-ui/page-constructor/compare/v1.25.2...v1.26.0) (2023-03-29)
+## [2.2.0](https://github.com/gravity-ui/page-constructor/compare/v2.1.1...v2.2.0) (2023-03-29)
 
 
 ### Features
 
-* dropdown a ReactPlayer version ([#254](https://github.com/gravity-ui/page-constructor/issues/254)) ([#257](https://github.com/gravity-ui/page-constructor/issues/257)) ([4fffe1b](https://github.com/gravity-ui/page-constructor/commit/4fffe1b6c88f8bd3d8583606d4d2edf1ab18eafb))
+* dropdown a ReactPlayer version ([#254](https://github.com/gravity-ui/page-constructor/issues/254)) ([fec1c3f](https://github.com/gravity-ui/page-constructor/commit/fec1c3fee50dcd86d08c0501f80d7aca0795e026))
+
+## [2.1.1](https://github.com/gravity-ui/page-constructor/compare/v2.1.0...v2.1.1) (2023-03-28)
+
+
+### Bug Fixes
+
+* quotes validator schema ([#247](https://github.com/gravity-ui/page-constructor/issues/247)) ([87b8587](https://github.com/gravity-ui/page-constructor/commit/87b8587bcd5fe2bb96b5d70aae9eb6ca9e189f33))
+
+## [2.1.0](https://github.com/gravity-ui/page-constructor/compare/v2.0.3...v2.1.0) (2023-03-27)
+
+
+### Features
+
+* **Title:** add size xs ([#207](https://github.com/gravity-ui/page-constructor/issues/207)) ([1fd8cf7](https://github.com/gravity-ui/page-constructor/commit/1fd8cf7aeaf4a6a993a3ffcce576a41d61c3b66b))
+
+## [2.0.3](https://github.com/gravity-ui/page-constructor/compare/v2.0.2...v2.0.3) (2023-03-27)
 
 
 ### Bug Fixes
 
-* add tag untagged ([ce9efcf](https://github.com/gravity-ui/page-constructor/commit/ce9efcfc74eaad2cbcf3cf79494f577b0eda09b3))
-* **package:** up version ([#241](https://github.com/gravity-ui/page-constructor/issues/241)) ([9b6d3f2](https://github.com/gravity-ui/page-constructor/commit/9b6d3f2ecace4e1e51c52a4c422aa44850bbefec))
-* remove description and inputs ([000a85e](https://github.com/gravity-ui/page-constructor/commit/000a85ee6d1d9fedb0cef74d990be4065a750efb))
-* try to release version ([6fc35f2](https://github.com/gravity-ui/page-constructor/commit/6fc35f2043097f883b9ad87bb348f73cc138be1e))
+* **Tabs:** wrap tabs on desktop ([#237](https://github.com/gravity-ui/page-constructor/issues/237)) ([68dd965](https://github.com/gravity-ui/page-constructor/commit/68dd965b8d5ad9439f8c59211232911695c30fd3))
 
-## [1.25.3](https://github.com/gravity-ui/page-constructor/compare/v1.25.2...v1.25.3) (2023-03-27)
+## [2.0.2](https://github.com/gravity-ui/page-constructor/compare/v2.0.1...v2.0.2) (2023-03-24)
 
 
 ### Bug Fixes
 
-* **Tabs:** wrap tabs on desktop ([#237](https://github.com/gravity-ui/page-constructor/issues/237)) ([ac7dd3d](https://github.com/gravity-ui/page-constructor/commit/ac7dd3d3573c6d633d39f88507e2bfeeb41b4f8c))
+* add specificity for few buttons ([#230](https://github.com/gravity-ui/page-constructor/issues/230)) ([22b0891](https://github.com/gravity-ui/page-constructor/commit/22b089158ed184d03726c5d0e0cff27307f1dec1))
+
+## [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/README.md

@@ -306,6 +306,13 @@ In usual cases we use two types of commits:
 1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
 2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
 3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
+4. To set release package version manually you need to add `Release-As: <version>` to your commit message e.g.
+
+```bash
+git commit -m 'chore: bump release
+
+Release-As: 1.2.3'
+```
 
 You can see all information [here](https://www.conventionalcommits.org/en/v1.0.0/).
 

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/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/cjs/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/cjs/components/Button/Button.d.ts

@@ -3,6 +3,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/cjs/components/Button/Button.js

@@ -38,7 +38,7 @@ const Button = (props) => {
     let icon;
     let image = img && react_1.default.createElement("img", { className: b('image'), src: buttonImg.url, alt: buttonImg.alt });
     if (theme === 'github') {
-        icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24 });
+        icon = react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.Github, size: 24, qa: utils_2.ICON_QA });
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;

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

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

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const user_event_1 = tslib_1.__importDefault(require("@testing-library/user-event"));
+const utils_1 = require("../utils");
+const Button_1 = tslib_1.__importDefault(require("../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 () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text }));
+        const button = react_2.screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+    test('should render <a /> tag', async () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
+        const button = react_2.screen.getByRole('link');
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+    test('call onClick', async () => {
+        const user = user_event_1.default.setup();
+        const handleOnClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, onClick: handleOnClick }));
+        const button = react_2.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) => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, size: size, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+    test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, theme: theme, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, className: className, qa: qaId }));
+        const button = react_2.screen.getByTestId(qaId);
+        expect(button).toHaveClass(className);
+    });
+    test('should render icon', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img }));
+        const button = react_2.screen.getByRole('button');
+        const iconComponent = react_2.screen.getByRole('img');
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+    test('should render github icon', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.default, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
+        const button = react_2.screen.getByRole('button');
+        const iconComponent = react_2.screen.getByTestId(utils_1.ICON_QA);
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

package/build/cjs/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/cjs/components/Button/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toCommonSize = exports.toCommonView = void 0;
+exports.toCommonSize = exports.toCommonView = exports.ICON_QA = void 0;
+exports.ICON_QA = 'button-icon';
 const themeMap = {
     normal: 'normal',
     action: 'action',

package/build/cjs/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/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/components/ReactPlayer/utils.js

@@ -4,20 +4,21 @@ exports.checkYoutubeVideos = void 0;
 // the file serves to support live video with react-player@2.9
 const LIVE_YUOTUBE_VIDEO_REGEX = /(?:youtu\.be\/live\/|youtube(?:-nocookie)?\.com\/(?:live\/))((\w|-){11})/;
 const YOUTUBE_VIDEO_TEMPLATE = 'https://www.youtube.com/watch?v=';
+const transformYoutubeUrl = (src) => {
+    var _a;
+    if (LIVE_YUOTUBE_VIDEO_REGEX.test(src)) {
+        const youtubeLiveId = (_a = src.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
+        if (!youtubeLiveId) {
+            return src;
+        }
+        return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
+    }
+    return src;
+};
 const checkYoutubeVideos = (src) => {
     if (Array.isArray(src)) {
-        return src.map((videoUrl) => {
-            var _a;
-            if (LIVE_YUOTUBE_VIDEO_REGEX.test(videoUrl)) {
-                const youtubeLiveId = (_a = videoUrl.match(LIVE_YUOTUBE_VIDEO_REGEX)) === null || _a === void 0 ? void 0 : _a[1];
-                if (!youtubeLiveId) {
-                    return videoUrl;
-                }
-                return `${YOUTUBE_VIDEO_TEMPLATE}${youtubeLiveId}`;
-            }
-            return videoUrl;
-        });
+        return src.map((videoUrl) => transformYoutubeUrl(videoUrl));
     }
-    return src;
+    return transformYoutubeUrl(src);
 };
 exports.checkYoutubeVideos = checkYoutubeVideos;

package/build/cjs/components/Title/Title.css

@@ -1,4 +1,4 @@
-.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s {
+.pc-title-block_size_l, .pc-title-block_size_m, .pc-title-block_size_s, .pc-title-block_size_xs {
   margin: 0;
 }
 
@@ -10,6 +10,12 @@ unpredictable css rules order in build */
 .pc-title-block_justify_end {
   text-align: right;
 }
+.pc-title-block_size_xs {
+  font-size: var(--yc-text-body-3-font-size);
+  line-height: var(--yc-text-body-3-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
 .pc-title-block_size_s {
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
@@ -44,10 +50,13 @@ unpredictable css rules order in build */
   }
 }
 .pc-title-block__arrow {
-  margin: 8px 0 0 4px;
+  margin-top: 10px;
+}
+.pc-title-block__arrow_size_xs {
+  margin-top: 7px;
 }
 .pc-title-block__arrow_size_s {
-  margin: 4px 0 0 4px;
+  margin-top: 5px;
 }
 .pc-title-block__link {
   color: inherit;
@@ -62,7 +71,10 @@ unpredictable css rules order in build */
   cursor: pointer;
 }
 .pc-title-block__link:hover .pc-title-block__arrow {
-  margin-left: 12px;
+  margin-left: 10px;
+}
+.pc-title-block__link:hover .pc-title-block__arrow_size_xs {
+  margin-left: 6px;
 }
 .pc-title-block__link:hover .pc-title-block__arrow_size_s {
   margin-left: 8px;
@@ -90,7 +102,10 @@ unpredictable css rules order in build */
   margin-top: 0;
 }
 @media (max-width: 577px) {
-  .pc-title-block_size_l {
+  .pc-title-block_size_l:not(.pc-title-block_reset-margin) {
     margin-top: 48px;
   }
+  .pc-title-block__arrow_size_m, .pc-title-block__arrow_size_l {
+    margin-top: 9px;
+  }
 }