@gravity-ui/page-constructor 4.51.2-alpha.0 → 4.53.0

package/build/esm/components/Media/Media.js

@@ -9,7 +9,7 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
@@ -23,6 +23,7 @@ export const Media = (props) => {
                 video,
                 videoClassName,
                 height,
+                metrika,
                 analyticsEvents,
                 playVideo,
                 previewImg,
@@ -65,6 +66,7 @@ export const Media = (props) => {
         qaAttributes.video,
         onImageLoad,
         videoClassName,
+        metrika,
         analyticsEvents,
         playVideo,
         previewImg,

package/build/esm/components/Media/Video/Video.js

@@ -6,7 +6,7 @@ import ReactPlayerBlock from '../../ReactPlayer/ReactPlayer';
 import './Video.css';
 const b = block('media-component-video');
 const Video = (props) => {
-    const { video, height, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
+    const { video, height, metrika, analyticsEvents, previewImg, playButton: commonPlayButton, customBarControlsClassName, videoClassName, playVideo, setHasVideoFallback, hasVideoFallback, qa, ratio, } = props;
     const qaAttributes = getQaAttrubutes(qa, 'source');
     const ref = useRef(null);
     useEffect(() => {
@@ -30,7 +30,7 @@ const Video = (props) => {
     }, [playVideo, video, setHasVideoFallback]);
     const reactPlayerBlock = useMemo(() => {
         const { src, loop, controls, muted, autoplay = true, elapsedTime, playButton, ariaLabel, customControlsOptions, } = video;
-        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
+        return (React.createElement(ReactPlayerBlock, { ref: ref, className: b('react-player', videoClassName), src: src, previewImgUrl: previewImg, loop: Boolean(loop), controls: controls, muted: muted, autoplay: autoplay && playVideo, elapsedTime: elapsedTime, playButton: playButton || commonPlayButton, customBarControlsClassName: customBarControlsClassName, metrika: metrika, analyticsEvents: analyticsEvents, height: height, ariaLabel: ariaLabel, customControlsOptions: customControlsOptions, ratio: ratio }));
     }, [
         video,
         height,
@@ -39,6 +39,7 @@ const Video = (props) => {
         playVideo,
         commonPlayButton,
         customBarControlsClassName,
+        metrika,
         analyticsEvents,
         ratio,
     ]);

package/build/esm/components/OverflowScroller/OverflowScroller.js

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 import debounce from 'lodash/debounce';
 import { ToggleArrow } from '..';
 import { block } from '../../utils';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './OverflowScroller.css';
 const b = block('overflow-scroller');
 const TRANSITION_TIME = 300;

package/build/esm/components/OverflowScroller/i18n/index.d.ts

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

package/build/esm/components/OverflowScroller/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
+import { registerKeyset } from '../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}OverflowScroller`);
+const COMPONENT = 'OverflowScroller';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/ReactPlayer/CustomBarControls.js

@@ -6,7 +6,7 @@ import { Unmute } from '../../icons/Unmute';
 import { CustomControlsType } from '../../models';
 import { block } from '../../utils';
 import CircleProgress from './CircleProgress';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './CustomBarControls.css';
 const b = block('CustomBarControls');
 const playIconsMap = {

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -2,6 +2,7 @@ import React, { Fragment, useCallback, useContext, useEffect, useImperativeHandl
 import { Icon } from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 import ReactPlayer from 'react-player';
+import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { VideoContext } from '../../context/videoContext';
 import { useAnalytics, useMount } from '../../hooks';
@@ -9,15 +10,17 @@ import { PlayVideo } from '../../icons';
 import { CustomControlsButtonPositioning, CustomControlsType, DefaultEventNames, MediaVideoControlsType, PlayButtonThemes, PlayButtonType, PredefinedEventTypes, } from '../../models';
 import { block } from '../../utils';
 import CustomBarControls from './CustomBarControls';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import { checkYoutubeVideos } from './utils';
+import { isYoutubePlayerInstance } from './utils/youtube';
 import './ReactPlayer.css';
 const b = block('ReactPlayer');
 const FPS = 60;
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, } = props;
+    const { metrika } = useContext(MetrikaContext);
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, metrika: videoMetrika, analyticsEvents, height, ariaLabel, ratio, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
@@ -47,8 +50,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         if (!playerRef) {
             return;
         }
+        let play, pause, addEventListener;
         const videoInstance = playerRef.getInternalPlayer();
-        const { play, pause, addEventListener } = videoInstance;
+        if (isYoutubePlayerInstance(videoInstance)) {
+            ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
+        }
+        else {
+            // it is assumed that `videoInstance` is HTMLVideoElement by default
+            ({ play, pause, addEventListener } = videoInstance);
+        }
         // eslint-disable-next-line consistent-return
         return {
             play: play.bind(videoInstance),
@@ -123,6 +133,13 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
             playerRef.seekTo(0);
             setPlayedPercent(0);
         }
+        if (metrika && videoMetrika) {
+            const { play, stop, counterName } = videoMetrika;
+            const goal = isMuted ? play : stop;
+            if (goal) {
+                metrika.reachGoals(goal, counterName);
+            }
+        }
         const events = isMuted ? playEvents : stopEvents;
         handleAnalytics(events);
         if (isMuted) {
@@ -130,12 +147,27 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
         // In order to the progress bar to update (equals 0) before displaying
         setTimeout(() => setMuted(!isMuted), 0);
-    }, [playerRef, customControlsType, playEvents, stopEvents, handleAnalytics, setProps]);
+    }, [
+        playerRef,
+        customControlsType,
+        metrika,
+        videoMetrika,
+        playEvents,
+        stopEvents,
+        handleAnalytics,
+        setProps,
+    ]);
     const handleClickPreview = useCallback(() => {
         setIsPlaying(true);
         onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
+        if (metrika && videoMetrika) {
+            const { play, counterName } = videoMetrika;
+            if (play) {
+                metrika.reachGoals(play, counterName);
+            }
+        }
         handleAnalytics(playEvents);
-    }, [onClickPreview, handleAnalytics, playEvents]);
+    }, [onClickPreview, metrika, videoMetrika, handleAnalytics, playEvents]);
     const onPause = useCallback(() => {
         // For support correct state for youtube
         if (controls !== MediaVideoControlsType.Custom ||

package/build/esm/components/ReactPlayer/i18n/index.d.ts

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

package/build/esm/components/ReactPlayer/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
+import { registerKeyset } from '../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ReactPlayer`);
+const COMPONENT = 'ReactPlayer';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/ReactPlayer/utils/youtube.d.ts

@@ -0,0 +1,2 @@
+import type { YouTubePlayer } from 'youtube-player/dist/types';
+export declare const isYoutubePlayerInstance: (playerInstance: Record<string, unknown> | YouTubePlayer) => playerInstance is YouTubePlayer;

package/build/esm/components/ReactPlayer/utils/youtube.js

@@ -0,0 +1,3 @@
+export const isYoutubePlayerInstance = (playerInstance) => {
+    return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
+};

package/build/esm/components/UnpublishedLabel/UnpublishedLabel.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { block } from '../../utils';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './UnpublishedLabel.css';
 const b = block('unpublished-label');
 const UnpublishedLabel = ({ className, children, type = 'line', }) => (React.createElement("div", { className: b({ type }, className) }, children || i18n('label_non_published')));

package/build/esm/components/UnpublishedLabel/i18n/index.d.ts

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

package/build/esm/components/UnpublishedLabel/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
+import { registerKeyset } from '../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}UnpublishedLabel`);
+const COMPONENT = 'UnpublishedLabel';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/VideoBlock/VideoBlock.js

@@ -7,7 +7,7 @@ import { PlayVideo } from '../../icons';
 import { DefaultEventNames } from '../../models/common';
 import { block, getPageSearchParams } from '../../utils';
 import Image from '../Image/Image';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './VideoBlock.css';
 const RECORD_URL = 'https://www.youtube.com/embed/';
 const STREAM_URL = 'https://www.youtube.com/embed/live_stream?channel=';

package/build/esm/components/VideoBlock/i18n/index.d.ts

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

package/build/esm/components/VideoBlock/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
+import { registerKeyset } from '../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}VideoBlock`);
+const COMPONENT = 'VideoBlock';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/components/YandexForm/YandexForm.js

@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { LocaleContext } from '../../context/localeContext';
 import { MobileContext } from '../../context/mobileContext';
 import { useAnalytics } from '../../hooks';
+import { useMetrika } from '../../hooks/useMetrika';
 import { DefaultEventNames } from '../../models/common';
 import { block } from '../../utils';
 import { HEADER_HEIGHT } from '../constants';
@@ -10,11 +11,12 @@ export const YANDEX_FORM_SECTION = 'surveys';
 const CONTAINER_ID = 'pc-yandex-form-container';
 const b = block('yandex-form');
 const YandexForm = (props) => {
-    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, analyticsEvents, customFormOrigin, customFormSection, } = props;
+    const { onLoad, id, params, className, theme, containerId = CONTAINER_ID, headerHeight = HEADER_HEIGHT, onSubmit, metrikaGoals, pixelEvents, analyticsEvents, customFormOrigin, customFormSection, } = props;
     const formContainerRef = useRef(null);
     const iframeRef = useRef();
     const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
     const yaFormSection = customFormSection || YANDEX_FORM_SECTION;
+    const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
     const isMobile = useContext(MobileContext);
     const locale = useContext(LocaleContext);
@@ -56,11 +58,20 @@ const YandexForm = (props) => {
             const { top } = formContainerRef.current.getBoundingClientRect();
             window.scrollBy(0, top - headerHeight);
         }
+        handleMetrika({ metrikaGoals, pixelEvents });
         handleAnalytics(analyticsEvents);
         if (onSubmit) {
             onSubmit();
         }
-    }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);
+    }, [
+        handleMetrika,
+        metrikaGoals,
+        pixelEvents,
+        handleAnalytics,
+        analyticsEvents,
+        onSubmit,
+        headerHeight,
+    ]);
     const handleMessage = useCallback(({ origin, data }) => {
         if (origin !== yaFormOrigin) {
             return;

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

@@ -30,6 +30,7 @@ export declare const subBlockMap: {
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
     quote: (props: import("./models").QuoteProps) => JSX.Element;
     "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
+    "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
 };
 export declare const navItemMap: {
     button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;

package/build/esm/constructor-items.js

@@ -2,7 +2,7 @@ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, Exten
 import { BlockType, NavigationItemType, SubBlockType } from './models';
 import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
 import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
-import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
+import { BackgroundCard, BannerCard, BasicCard, Content, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -35,6 +35,7 @@ export const subBlockMap = {
     [SubBlockType.Content]: Content,
     [SubBlockType.Quote]: Quote,
     [SubBlockType.PriceCard]: PriceCard,
+    [SubBlockType.ImageCard]: ImageCard,
 };
 export const navItemMap = {
     [NavigationItemType.Button]: NavigationButton,

package/build/esm/containers/Loadable/Loadable.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Spin } from '@gravity-ui/uikit';
 import ErrorWrapper from '../../components/ErrorWrapper/ErrorWrapper';
 import { block as blockCn } from '../../utils/cn';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './Loadable.css';
 const b = blockCn('loadable-block');
 const initData = {

package/build/esm/containers/Loadable/i18n/index.d.ts

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

package/build/esm/containers/Loadable/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../utils/cn';
+import { registerKeyset } from '../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}Loadable`);
+const COMPONENT = 'Loadable';
+export default registerKeyset({ en, ru }, COMPONENT);

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

@@ -3,6 +3,7 @@ import { ImageContextProps } from '../../context/imageContext';
 import { LocaleContextProps } from '../../context/localeContext';
 import { LocationContextProps } from '../../context/locationContext';
 import { MapsContextType } from '../../context/mapsContext/mapsContext';
+import { MetrikaContextProps } from '../../context/metrikaContext';
 import { ProjectSettingsContextProps } from '../../context/projectSettingsContext';
 import { SSRContextProps } from '../../context/ssrContext';
 import { Theme, WithChildren } from '../../models';
@@ -10,6 +11,7 @@ export interface PageConstructorProviderProps {
     isMobile?: boolean;
     locale?: LocaleContextProps;
     location?: LocationContextProps;
+    metrika?: MetrikaContextProps;
     ssrConfig?: SSRContextProps;
     theme?: Theme;
     mapsContext?: MapsContextType;

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

@@ -5,12 +5,13 @@ import { ImageContext } from '../../context/imageContext';
 import { LocaleContext } from '../../context/localeContext';
 import { LocationContext } from '../../context/locationContext';
 import { MapsContext, initialMapValue } from '../../context/mapsContext/mapsContext';
+import { MetrikaContext } from '../../context/metrikaContext';
 import { MobileContext } from '../../context/mobileContext';
 import { ProjectSettingsContext, } from '../../context/projectSettingsContext';
 import { SSRContext } from '../../context/ssrContext';
 import { ThemeContext } from '../../context/theme';
 export const PageConstructorProvider = (props) => {
-    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
+    const { isMobile, mapsContext = initialMapValue, locale = {}, location = {}, metrika = {}, analytics = {}, ssrConfig = {}, projectSettings = {}, theme = DEFAULT_THEME, children, image = {}, } = props;
     /* eslint-disable react/jsx-key */
     const context = [
         React.createElement(ThemeContext.Provider, { value: { theme } }),
@@ -20,6 +21,7 @@ export const PageConstructorProvider = (props) => {
         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(AnalyticsContext.Provider, { value: analytics }),
         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/localeContext/localeContext.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Lang } from '@gravity-ui/uikit';
+import { Lang } from '../../utils/configure';
 export type LocaleContextProps = {
-    lang?: `${Lang}`;
+    lang?: Lang;
     tld?: string;
 };
 export declare const LocaleContext: React.Context<LocaleContextProps>;

package/build/esm/context/localeContext/localeContext.js

@@ -1,3 +1,3 @@
 import React from 'react';
-import { Lang } from '@gravity-ui/uikit';
+import { Lang } from '../../utils/configure';
 export const LocaleContext = React.createContext({ lang: Lang.Ru, tld: '.ru' });

package/build/esm/context/metrikaContext/index.d.ts

@@ -0,0 +1 @@
+export * from './metrikaContext';

package/build/esm/context/metrikaContext/index.js

@@ -0,0 +1 @@
+export * from './metrikaContext';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Metrika, Pixel } from '../../models';
+export interface MetrikaContextProps {
+    /**
+     * @deprecated Metrika will be deleted
+     */
+    metrika?: Metrika;
+    /**
+     * @deprecated Metrika will be deleted
+     */
+    pixel?: Pixel;
+}
+export declare const MetrikaContext: React.Context<MetrikaContextProps>;

package/build/esm/context/metrikaContext/metrikaContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const MetrikaContext = React.createContext({});

package/build/esm/editor/components/ControlPanel/ControlPanel.js

@@ -5,7 +5,7 @@ import { Theme, themeNames } from '../../../models';
 import { block } from '../../../utils';
 import { Tablet } from '../../icons/Tablet';
 import { ViewModeItem } from '../../types';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './ControlPanel.css';
 const ICON_SIZE = 14;
 const b = block('control-panel');
@@ -27,7 +27,7 @@ const ControlPanel = ({ viewMode = ViewModeItem.Edititng, onViewModeChange, clas
                         React.createElement(Icon, { width: ICON_SIZE, height: ICON_SIZE }))));
             }))),
         React.createElement("div", { className: b('theme-switch') },
-            React.createElement("span", null, i18n('theme')),
+            React.createElement("span", null, i18n('Theme')),
             React.createElement(Select, { value: [theme], onUpdate: (value) => onThemeChange(value[0]) }, Object.values(Theme).map((item) => (React.createElement(Select.Option, { key: item, value: item }, themeNames[item])))))));
 };
 export default ControlPanel;

package/build/esm/editor/components/ControlPanel/i18n/en.json

@@ -1,4 +1,3 @@
 {
-  "mode": "Mode",
-  "theme": "Theme"
+  "mode": "Mode"
 }

package/build/esm/editor/components/ControlPanel/i18n/index.d.ts

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

package/build/esm/editor/components/ControlPanel/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../../utils/cn';
+import { registerKeyset } from '../../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ControlPanel`);
+const COMPONENT = 'ControlPanel';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/editor/components/ControlPanel/i18n/ru.json

@@ -1,4 +1,3 @@
 {
-  "mode": "Режим",
-  "theme": "Тема"
+  "mode": "Режим"
 }

package/build/esm/editor/components/ErrorBoundary/ErrorBoundary.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { block } from '../../../utils';
 import { getBlockId } from '../../utils';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './ErrorBoundary.css';
 const b = block('error-boundary');
 export class ErrorBoundary extends React.Component {

package/build/esm/editor/components/ErrorBoundary/i18n/index.d.ts

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

package/build/esm/editor/components/ErrorBoundary/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../../utils/cn';
+import { registerKeyset } from '../../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ErrorBoundary`);
+const COMPONENT = 'ErrorBoundary';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/editor/components/NotFoundBlock/NotFoundBlock.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { BlockBase } from '../../../components';
 import { block } from '../../../utils';
-import { i18n } from './i18n';
+import i18n from './i18n';
 import './NotFoundBlock.css';
 const b = block('not-found-block');
 export const NotFoundBlock = ({ type, children }) => children ? (React.createElement(Fragment, null, children)) : (React.createElement(BlockBase, null,

package/build/esm/editor/components/NotFoundBlock/i18n/index.d.ts

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

package/build/esm/editor/components/NotFoundBlock/i18n/index.js

@@ -1,5 +1,5 @@
-import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
-import { NAMESPACE } from '../../../../utils/cn';
+import { registerKeyset } from '../../../../utils/registerKeyset';
 import en from './en.json';
 import ru from './ru.json';
-export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}NotFoundBlock`);
+const COMPONENT = 'NotFoundBlock';
+export default registerKeyset({ en, ru }, COMPONENT);

package/build/esm/hooks/useAnalytics.d.ts

@@ -1,2 +1,2 @@
-import { AnalyticsEventsProp } from '../models';
-export declare const useAnalytics: (name?: string, target?: string) => (e?: AnalyticsEventsProp | null, additionalContext?: Record<string, string>) => void;
+import { AnalyticsEvent } from '../models';
+export declare const useAnalytics: (name?: string, target?: string) => (e?: AnalyticsEvent | AnalyticsEvent[] | null, additionalContext?: Record<string, string>) => void;

package/build/esm/hooks/useMetrika.d.ts

@@ -1 +1,13 @@
-
+import { ButtonPixel, MetrikaGoal, PixelEvent } from '../models';
+/**
+ * @deprecated Metrika will be deleted
+ */
+type UseMetrikaProps = {
+    metrikaGoals?: MetrikaGoal;
+    pixelEvents?: string | string[] | PixelEvent | PixelEvent[] | ButtonPixel;
+};
+/**
+ * @deprecated useMetrika will be deleted
+ */
+export declare const useMetrika: () => ({ metrikaGoals, pixelEvents }: UseMetrikaProps) => void;
+export {};

package/build/esm/hooks/useMetrika.js

@@ -1 +1,38 @@
-"use strict";
+import { useContext } from 'react';
+import { MetrikaContext } from '../context/metrikaContext';
+import { isNewMetrikaFormat } from '../models/guards';
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated Metrika will be deleted, which uses this logic
+ */
+function isButtonPixel(pixelEvents) {
+    if (Array.isArray(pixelEvents) && pixelEvents.length && 'name' in pixelEvents) {
+        return true;
+    }
+    return false;
+}
+// eslint-disable-next-line valid-jsdoc
+/**
+ * @deprecated useMetrika will be deleted
+ */
+export const useMetrika = () => {
+    const { metrika, pixel } = useContext(MetrikaContext);
+    return ({ metrikaGoals, pixelEvents }) => {
+        if (metrika && metrikaGoals) {
+            if (isNewMetrikaFormat(metrikaGoals)) {
+                metrikaGoals.forEach(({ name, isCrossSite }) => metrika.reachGoal(isCrossSite ? 'cross-site' : 'main', name));
+            }
+            else {
+                metrika.reachGoals(metrikaGoals);
+            }
+        }
+        if (pixel && pixelEvents) {
+            if (isButtonPixel(pixelEvents)) {
+                pixelEvents.forEach(({ name, data }) => pixel.trackStandard(name, data));
+            }
+            else {
+                pixel.track(pixelEvents);
+            }
+        }
+    };
+};

package/build/esm/i18n.d.ts

@@ -0,0 +1,2 @@
+import { I18N } from '@gravity-ui/i18n';
+export declare const i18n: I18N;

package/build/esm/i18n.js

@@ -0,0 +1,9 @@
+import { I18N } from '@gravity-ui/i18n';
+import { Lang, getConfig, subscribeConfigure } from './utils/configure';
+export const i18n = new I18N();
+i18n.setLang(getConfig().lang || Lang.En);
+subscribeConfigure((config) => {
+    if (config.lang) {
+        i18n.setLang(config.lang);
+    }
+});