@gravity-ui/page-constructor 1.18.0 → 1.19.0

package/build/esm/components/Map/YMap/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "map-load-error": "Error occured while loading the map",
+  "map-try-again": "Try again"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'Map';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/Map/YMap/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "map-load-error": "При загрузке карты произошла ошибка",
+  "map-try-again": "Повторить"
+}

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

@@ -0,0 +1 @@
+export declare function getMapHeight(width: number, isMobile: boolean): number;

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

@@ -0,0 +1,3 @@
+export function getMapHeight(width, isMobile) {
+    return isMobile ? (width / 4) * 3 : (width / 16) * 9;
+}

package/build/esm/{blocks/Media/Media.css → components/MediaBase/MediaBase.css}

@@ -1,50 +1,51 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-media-block__card img {
+.pc-media-base__card img {
   width: 100%;
 }
-.pc-media-block__card img,
-.pc-media-block__card video,
-.pc-media-block__card iframe {
+.pc-media-base__card img,
+.pc-media-base__card video,
+.pc-media-base__card iframe,
+.pc-media-base__card .pc-map {
   border-radius: var(--pc-border-radius);
 }
-.pc-media-block__card_shadow {
+.pc-media-base__card_shadow {
   box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
 }
-.pc-media-block__row_reverse {
+.pc-media-base__row_reverse {
   flex-direction: row-reverse;
 }
-.pc-media-block__row_reverse .pc-media-block__content > * {
+.pc-media-base__row_reverse .pc-media-base__content > * {
   margin-right: 0;
   margin-left: 64px;
 }
-.pc-media-block__header {
+.pc-media-base__header {
   margin-bottom: 24px;
 }
 @media (max-width: 769px) {
-  .pc-media-block__row_reverse {
+  .pc-media-base__row_reverse {
     flex-direction: row;
   }
-  .pc-media-block__row_reverse .pc-media-block__content > * {
+  .pc-media-base__row_reverse .pc-media-base__content > * {
     margin-left: 0;
   }
-  .pc-media-block__row_mobile-reverse {
+  .pc-media-base__row_mobile-reverse {
     flex-direction: column-reverse;
   }
-  .pc-media-block__row_mobile-reverse .pc-media-block__content > * {
+  .pc-media-base__row_mobile-reverse .pc-media-base__content > * {
     margin-top: 32px;
     padding-bottom: 0;
   }
 }
 @media (min-width: 769px) {
-  .pc-media-block.pc-AnimateBlock .pc-media-block__card, .pc-AnimateBlock .pc-media-block .pc-media-block__card {
+  .pc-media-base.pc-AnimateBlock .pc-media-base__card, .pc-AnimateBlock .pc-media-base .pc-media-base__card {
     position: relative;
     top: 100px;
     opacity: 0;
   }
-  .pc-media-block.pc-AnimateBlock.animate .pc-media-block__card, .pc-AnimateBlock .pc-media-block.animate .pc-media-block__card {
+  .pc-media-base.pc-AnimateBlock.animate .pc-media-base__card, .pc-AnimateBlock .pc-media-base.animate .pc-media-base__card {
     top: 0;
     opacity: 1;
     transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

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

@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react';
+import { MediaBaseBlockProps } from '../../models';
+import './MediaBase.css';
+interface MediaBaseProps extends MediaBaseBlockProps {
+    children: ReactElement;
+    onScroll?: () => void;
+}
+export declare const MediaBase: {
+    (props: MediaBaseProps): JSX.Element;
+    Card: React.FC<{
+        children?: React.ReactNode;
+    }>;
+};
+export default MediaBase;

package/build/esm/components/MediaBase/MediaBase.js

@@ -0,0 +1,36 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { block } from '../../utils';
+import { Grid, Row, Col, GridColumnSize } from '../../grid';
+import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
+import BlockHeader from '../../components/BlockHeader/BlockHeader';
+import MediaContent from './MediaBaseContent';
+import './MediaBase.css';
+const b = block('media-base');
+const Card = () => null;
+export const MediaBase = (props) => {
+    const { children, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, disableShadow = false, onScroll } = props, mediaContentProps = __rest(props, ["children", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "disableShadow", "onScroll"]);
+    const { title, description } = mediaContentProps;
+    const mediaSizes = useMemo(() => {
+        return mediaOnly
+            ? { [GridColumnSize.All]: 12 }
+            : { [GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12 };
+    }, [mediaOnly, largeMedia]);
+    const contentSizes = useMemo(() => {
+        return { [GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12 };
+    }, [largeMedia]);
+    const mediaContent = !mediaOnly && React.createElement(MediaContent, Object.assign({}, mediaContentProps));
+    const card = children.type === Card ? children === null || children === void 0 ? void 0 : children.props.children : null;
+    return (React.createElement(AnimateBlock, { className: b(), onScroll: onScroll, animate: animated },
+        mediaOnly && (React.createElement(BlockHeader, { className: b('header'), title: title, description: description })),
+        React.createElement(Grid, null,
+            React.createElement(Row, { className: b('row', {
+                    reverse: direction === 'media-content',
+                    'mobile-reverse': mobileDirection === 'media-content',
+                }) },
+                React.createElement(Col, { className: b('content'), sizes: contentSizes }, mediaContent),
+                card ? (React.createElement(Col, { sizes: mediaSizes },
+                    React.createElement("div", { className: b('card', { shadow: !disableShadow }) }, card))) : null))));
+};
+MediaBase.Card = Card;
+export default MediaBase;

package/build/esm/{blocks/Media/MediaContent.css → components/MediaBase/MediaBaseContent.css}

@@ -1,11 +1,11 @@
-.pc-media-content {
+.pc-media-base-content {
   margin-right: 64px;
   height: 100%;
   align-items: center;
   display: flex;
 }
 @media (max-width: 769px) {
-  .pc-media-content {
+  .pc-media-base-content {
     margin-right: 0;
     padding-bottom: 32px;
   }

package/build/esm/{blocks/Media/MediaContent.d.ts → components/MediaBase/MediaBaseContent.d.ts}

@@ -1,4 +1,4 @@
 import { MediaContentProps } from '../../models';
-import './MediaContent.css';
+import './MediaBaseContent.css';
 declare const MediaContent: (props: MediaContentProps) => JSX.Element;
 export default MediaContent;

package/build/esm/{blocks/Media/MediaContent.js → components/MediaBase/MediaBaseContent.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { block } from '../../utils';
 import { Content } from '../../sub-blocks';
-import './MediaContent.css';
-const b = block('media-content');
+import './MediaBaseContent.css';
+const b = block('media-base-content');
 const MediaContent = (props) => {
     const { title, description, button, links, buttons = [], additionalInfo, size = 'l' } = props;
     const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;

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

@@ -19,6 +19,7 @@ export declare const blockMap: {
     "card-layout-block": ({ title, description, animated, colSizes, children, }: import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps) => JSX.Element;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
     "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
+    "map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/esm/constructor-items.js

@@ -1,6 +1,6 @@
 import { BlockType, SubBlockType } from './models';
 import { Partner, PriceDetailed, MediaCard, NewsCard, TutorialCard, CardWithImage, LayoutItem, BackgroundCard, Content, Quote, Divider, BannerCard, BasicCard, } from './sub-blocks';
-import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, } from './blocks';
+import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, MapBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, } from './blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.SimpleBlock]: SimpleBlock,
@@ -22,6 +22,7 @@ export const blockMap = {
     [BlockType.CardLayoutBlock]: CardLayoutBlock,
     [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
     [BlockType.ShareBlock]: ShareBlock,
+    [BlockType.MapBlock]: MapBlock,
 };
 export const subBlockMap = {
     [SubBlockType.Divider]: Divider,

package/build/esm/containers/PageConstructor/Provider.d.ts

@@ -1,4 +1,5 @@
 import { MetrikaContextProps } from '../../context/metrikaContext';
+import { MapsContextType } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
 import { LocaleContextProps } from '../../context/localeContext';
@@ -12,6 +13,7 @@ export interface PageConstructorProviderProps {
     metrika?: MetrikaContextProps;
     ssrConfig?: SSRContextProps;
     theme?: ConstructorTheme;
+    mapsContext?: MapsContextType;
     projectSettings?: ProjectSettingsContextProps;
 }
 export declare const PageConstructorProvider: (props: WithChildren<PageConstructorProviderProps>) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
+import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
 import { LocaleContext } from '../../context/localeContext';
@@ -8,7 +9,7 @@ import { LocationContext } from '../../context/locationContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
 import { DEFAULT_THEME } from '../../components/constants';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
+    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeValueContext.Provider, { value: { themeValue: theme } }),
@@ -16,6 +17,7 @@ export const PageConstructorProvider = (props) => {
         React.createElement(LocaleContext.Provider, { value: locale }),
         React.createElement(LocationContext.Provider, { value: location }),
         React.createElement(MobileContext.Provider, { value: Boolean(isMobile) }),
+        React.createElement(MapsContext.Provider, { value: mapsContext }),
         React.createElement(MetrikaContext.Provider, { value: metrika }),
         React.createElement(SSRContext.Provider, { value: { isServer: ssrConfig === null || ssrConfig === void 0 ? void 0 : ssrConfig.isServer } }),
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);

package/build/esm/context/mapsContext/mapsContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare enum MapType {
+    Yandex = "yandex",
+    Google = "google"
+}
+export declare const Maplangs: {
+    ru: string;
+    en: string;
+};
+export interface MapsContextType {
+    apiKey: string;
+    type: MapType;
+    scriptSrc: string;
+    nonce?: string;
+    setKey?: (newKey: string) => void;
+}
+export declare const initialMapValue: {
+    apiKey: string;
+    scriptSrc: string;
+    type: MapType;
+};
+export declare const MapsContext: React.Context<MapsContextType>;

package/build/esm/context/mapsContext/mapsContext.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export var MapType;
+(function (MapType) {
+    MapType["Yandex"] = "yandex";
+    MapType["Google"] = "google";
+})(MapType || (MapType = {}));
+export const Maplangs = {
+    ru: 'ru_RU',
+    en: 'en_US',
+};
+export const initialMapValue = {
+    apiKey: '',
+    scriptSrc: '',
+    type: MapType.Yandex,
+};
+export const MapsContext = React.createContext(initialMapValue);

package/build/esm/context/mapsContext/mapsProvider.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+import { MapType } from './mapsContext';
+interface MapProviderProps {
+    type: MapType;
+    scriptSrc: string;
+    apiKey?: string;
+}
+export declare const gmapApiKeyIdInLS = "gmap-api-key";
+export declare const MapProvider: React.FC<PropsWithChildren<MapProviderProps>>;
+export {};

package/build/esm/context/mapsContext/mapsProvider.js

@@ -0,0 +1,10 @@
+import React, { useState } from 'react';
+import { MapsContext, MapType } from './mapsContext';
+export const gmapApiKeyIdInLS = 'gmap-api-key';
+export const MapProvider = ({ type = MapType.Yandex, scriptSrc, apiKey, children, }) => {
+    const initialKeyValue = type === MapType.Google
+        ? apiKey || localStorage.getItem(gmapApiKeyIdInLS) || ''
+        : apiKey || '';
+    const [currentApiKey, setKey] = useState(initialKeyValue);
+    return (React.createElement(MapsContext.Provider, { value: { apiKey: currentApiKey, setKey, scriptSrc, type } }, children));
+};

package/build/esm/context/mapsContext/useMap.d.ts

@@ -0,0 +1,2 @@
+import { MapsContextType } from './mapsContext';
+export declare function useMapApiKey(): [MapsContextType['apiKey'], MapsContextType['setKey']];

package/build/esm/context/mapsContext/useMap.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MapsContext } from './mapsContext';
+export function useMapApiKey() {
+    const { apiKey, setKey } = React.useContext(MapsContext);
+    return [apiKey, setKey];
+}

package/build/esm/internal-typings/global.d.ts

@@ -25,6 +25,42 @@ interface Window {
             create: (args: CreateFormProps) => unknown;
         };
     };
+    ymaps: Ymaps;
+}
+
+declare namespace Ymaps {
+    export function ready(): Promise;
+
+    class Promise {
+        then(onFulfilled?: Function, onRejected?: Function, onProgress?: Function): Promise;
+    }
+
+    export class Map {
+        setCenter: (center: number[]) => void;
+        setZoom: (zoom: number) => void;
+        geoObjects: {
+            add: (object) => void;
+            removeAll: () => void;
+            get: () => void;
+        };
+        constructor(element: string, state: MapState);
+        destroy(): Promise;
+    }
+
+    export class GeoObject {
+        properties: {
+            set: (objectName: string, value: string) => void;
+        };
+        options: {
+            set: (objectName: string, value: string) => void;
+        };
+    }
+
+    export class MapState {
+        center: number[];
+        controls: string[];
+        zoom: number;
+    }
 }
 
 declare module '*.md';

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
+import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, MapProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { BannerCardProps, SubBlock } from './sub-blocks';
@@ -25,7 +25,8 @@ export declare enum BlockType {
     IconsBlock = "icons-block",
     CardLayoutBlock = "card-layout-block",
     ContentLayoutBlock = "content-layout-block",
-    ShareBlock = "share-block"
+    ShareBlock = "share-block",
+    MapBlock = "map-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -155,6 +156,13 @@ export interface CompaniesBlockProps extends Animatable {
     title: string;
     images: ThemeSupporting<ImageDeviceProps>;
 }
+export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
+    direction?: MediaDirection;
+    mobileDirection?: MediaDirection;
+    largeMedia?: boolean;
+    mediaOnly?: boolean;
+    disableShadow?: boolean;
+}
 export interface MediaContentProps {
     title: string;
     description?: string;
@@ -164,13 +172,11 @@ export interface MediaContentProps {
     buttons?: ButtonProps[];
     size?: ContentSize;
 }
-export interface MediaBlockProps extends Animatable, MediaContentProps {
+export interface MediaBlockProps extends MediaBaseBlockProps {
     media: ThemeSupporting<MediaProps>;
-    direction?: MediaDirection;
-    mobileDirection?: MediaDirection;
-    largeMedia?: boolean;
-    mediaOnly?: boolean;
-    disableShadow?: boolean;
+}
+export interface MapBlockProps extends MediaBaseBlockProps {
+    map: MapProps;
 }
 export interface PreviewBlockProps extends Animatable {
     title: string;
@@ -317,6 +323,9 @@ export type CompaniesBlockModel = {
 export type MediaBlockModel = {
     type: BlockType.MediaBlock;
 } & MediaBlockProps;
+export type MapBlockModel = {
+    type: BlockType.MapBlock;
+} & MapBlockProps;
 export type PreviewBlockModel = {
     type: BlockType.PreviewBlock;
 } & PreviewBlockProps;
@@ -353,6 +362,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
+type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/esm/models/constructor-items/blocks.js

@@ -22,6 +22,7 @@ export var BlockType;
     BlockType["CardLayoutBlock"] = "card-layout-block";
     BlockType["ContentLayoutBlock"] = "content-layout-block";
     BlockType["ShareBlock"] = "share-block";
+    BlockType["MapBlock"] = "map-block";
 })(BlockType || (BlockType = {}));
 export const BlockTypes = Object.values(BlockType);
 export const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

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

@@ -186,6 +186,31 @@ export interface MediaComponentDataLensProps {
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentVideoProps> {
     color?: string;
 }
+export type Coordinate = number[];
+export interface MapBaseProps {
+    zoom?: number;
+    center?: Coordinate;
+}
+export interface GMapProps extends MapBaseProps {
+    address: string;
+}
+export interface YMapProps extends MapBaseProps {
+    markers: YMapMarker[];
+    id: string;
+    center: Coordinate;
+}
+export interface YMapMarker {
+    address?: string;
+    coordinate?: Coordinate;
+    label?: YMapMarkerLabel;
+}
+export interface YMapMarkerLabel {
+    iconCaption?: string;
+    iconContent?: string;
+    iconColor?: string;
+    preset?: string;
+}
+export type MapProps = GMapProps | YMapProps;
 export type ThemedMediaProps = ThemeSupporting<MediaProps>;
 export interface NewMetrikaGoal {
     name: string;

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

@@ -1,6 +1,5 @@
 import React, { MouseEventHandler } from 'react';
 import { NavigationItemData } from '../../../models';
-import './NavigationItem.css';
 export interface NavigationItemProps {
     data: NavigationItemData;
     className?: string;

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

@@ -1,14 +1,11 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
-import { block } from '../../../utils';
 import { NavigationItemType } from '../../../models';
 import SocialIcon from '../SocialIcon/SocialIcon';
 import { NavigationButton } from './components/NavigationButton/NavigationButton';
 import { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
 import { NavigationLink } from './components/NavigationLink/NavigationLink';
 import { GithubStars } from './components/GithubStars/GithubStars';
-import './NavigationItem.css';
-const b = block('navigation-item');
 //todo: add types support form component in map
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NavigationItemsMap = {
@@ -22,7 +19,7 @@ const NavigationItem = (_a) => {
     var { data, className } = _a, props = __rest(_a, ["data", "className"]);
     const { type = NavigationItemType.Link } = data;
     const Component = NavigationItemsMap[type];
-    const componentProps = useMemo(() => (Object.assign(Object.assign({ className: b(null, className) }, data), props)), [className, data, props]);
+    const componentProps = useMemo(() => (Object.assign(Object.assign({ className }, data), props)), [className, data, props]);
     return React.createElement(Component, Object.assign({}, componentProps));
 };
 export default NavigationItem;

package/build/esm/navigation/components/NavigationItem/components/GithubStars/GithubStars.css

@@ -1,4 +1,8 @@
 .pc-github-stars {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 100%;

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

@@ -1,4 +1,10 @@
 .pc-navigation-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pc-navigation-dropdown__arrow {
   margin-left: 7px;
   color: var(--yc-color-text-secondary);
 }

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

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

package/build/esm/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.css

@@ -5,6 +5,10 @@ unpredictable css rules order in build */
   color: inherit;
   text-decoration: none;
   outline: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 .utilityfocus .pc-navigation-link:focus {
   outline: 2px solid #ffdb4d;

package/build/esm/schema/index.js

@@ -1,5 +1,5 @@
 export { validators } from './validators';
-import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock, BannerBlock, CompaniesBlock, MediaBlock, InfoBlock, QuestionsBlock, SecurityBlock, TableBlock, SimpleBlock, LinkTableBlock, PromoFeaturesBlock, PreviewBlock, ContentLayoutBlock, HeaderSliderBlock, IconsBlock, CardLayoutBlock, ShareBlock, } from './validators/blocks';
+import { TabsBlock, BannerCard, SliderBlock, ExtendedFeaturesBlock, HeaderBlock, BannerBlock, CompaniesBlock, MediaBlock, InfoBlock, QuestionsBlock, SecurityBlock, TableBlock, SimpleBlock, LinkTableBlock, PromoFeaturesBlock, PreviewBlock, ContentLayoutBlock, HeaderSliderBlock, IconsBlock, CardLayoutBlock, ShareBlock, MapBlock, } from './validators/blocks';
 import { PartnerBlock, MediaCardBlock, TutorialCard, BackgroundCard, NewsCard, CardWithImage, PriceDetailedBlock, Quote, Divider, BasicCard, } from './validators/sub-blocks';
 import { AnimatableProps, BackgroundProps, MenuProps, withTheme } from './validators/common';
 import { filteredItem } from './validators/utils';
@@ -9,7 +9,7 @@ export const getBlocksCases = (blocks) => {
 };
 export function generateDefaultSchema(config) {
     const { cards = {}, blocks = {}, extensions = {} } = config !== null && config !== void 0 ? config : {};
-    const blockValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), InfoBlock), SecurityBlock), TableBlock), TabsBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock);
+    const blockValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), SecurityBlock), TableBlock), TabsBlock), SimpleBlock), LinkTableBlock), PreviewBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock);
     const cardValidators = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, PartnerBlock), MediaCardBlock), BannerCard), PriceDetailedBlock), TutorialCard), BackgroundCard), NewsCard), CardWithImage), Quote), BasicCard);
     const constructorBlockSchemaNames = [
         'divider',

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

@@ -6,6 +6,7 @@ export * from '../../blocks/Simple/schema';
 export * from '../../blocks/Header/schema';
 export * from '../../blocks/Info/schema';
 export * from '../../blocks/Media/schema';
+export * from '../../blocks/Map/schema';
 export * from '../../blocks/Questions/schema';
 export * from '../../blocks/Security/schema';
 export * from '../../blocks/Slider/schema';

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

@@ -6,6 +6,7 @@ export * from '../../blocks/Simple/schema';
 export * from '../../blocks/Header/schema';
 export * from '../../blocks/Info/schema';
 export * from '../../blocks/Media/schema';
+export * from '../../blocks/Map/schema';
 export * from '../../blocks/Questions/schema';
 export * from '../../blocks/Security/schema';
 export * from '../../blocks/Slider/schema';