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

package/CHANGELOG.md

@@ -1,39 +1,59 @@
 # Changelog
 
-## [1.26.1](https://github.com/gravity-ui/page-constructor/compare/v1.26.0...v1.26.1) (2023-03-29)
+## [2.2.0](https://github.com/gravity-ui/page-constructor/compare/v2.1.1...v2.2.0) (2023-03-29)
 
 
-### Bug Fixes
+### Features
 
-* add readme about fixes major 1.x.x ([ebcd938](https://github.com/gravity-ui/page-constructor/commit/ebcd9388d3317b2ac8a1fdd97888ca905f66c08e))
+* 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)
 
-### chore
 
-* bump release ([d4fec6b](https://github.com/gravity-ui/page-constructor/commit/d4fec6b6f07b8cb3253979d473cc6503cd87dfdb))
-* bump release ([095fa6c](https://github.com/gravity-ui/page-constructor/commit/095fa6cf8022f9bc2fa6ad555d8d960c16771b29))
+### Bug Fixes
 
-## [1.26.0](https://github.com/gravity-ui/page-constructor/compare/v1.25.2...v1.26.0) (2023-03-29)
+* 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
 
-* 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))
+* **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/).
 
@@ -316,11 +323,3 @@ When you receive the approval of your pull-request from the code owners and pass
 3. Wait until robot creates a PR with a new version of the package and information about your changes in CHANGELOG.md. You can see the process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
 4. Check your changes in CHANGELOG.md and approve robot's PR.
 5. Squash and merge PR. You can see release process on [the Actions tab](https://github.com/gravity-ui/page-constructor/actions).
-
-For now, we have two major version of package. If you want to have your changes in major one (1.x.x) for some reasons, e.g. you aren't ready for major 2.x.x. update, please do the following:
-
-1. Create PR wit your changes as you usually do to the branch main.
-2. Release package version in major 2.x.x.
-3. Then you have to fetch a branch `version-1.x.x/fixes` - it is a branch with major 1.x.x and changes which were created after the release version 2.x.x.
-4. Cherry-pick your commit from major 2.x.x to a branch which was released from the branch `version-1.x.x/fixes` and create a PR.
-5. After that you have to follow regular flow above.

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;