@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/components/Title/TitleItem.css

@@ -0,0 +1,141 @@
+.pc-title-item_size_xl, .pc-title-item_size_l, .pc-title-item_size_m, .pc-title-item_size_s, .pc-title-item_size_xs {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-title-item_justify_center {
+  text-align: center;
+}
+.pc-title-item_justify_end {
+  text-align: right;
+}
+.pc-title-item_size_xs {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+}
+.pc-title-item_size_s {
+  font-size: var(--g-text-header-1-font-size, var(--pc-text-header-1-font-size));
+  line-height: var(--g-text-header-1-line-height, var(--pc-text-header-1-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  margin-top: 32px;
+}
+.pc-title-item_size_m {
+  font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+  line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  margin-top: 48px;
+}
+@media (max-width: 576px) {
+  .pc-title-item_size_m {
+    font-size: var(--g-text-display-1-font-size, var(--pc-text-display-1-font-size));
+    line-height: var(--g-text-display-1-line-height, var(--pc-text-display-1-line-height));
+  }
+}
+.pc-title-item_size_l {
+  font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
+  line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  margin-top: 96px;
+}
+@media (max-width: 577px) {
+  .pc-title-item_size_l {
+    font-size: var(--g-text-display-2-font-size, var(--pc-text-display-2-font-size));
+    line-height: var(--g-text-display-2-line-height, var(--pc-text-display-2-line-height));
+  }
+}
+.pc-title-item_size_xl {
+  font-size: var(--g-text-display-5-font-size, var(--pc-text-display-5-font-size));
+  line-height: var(--g-text-display-5-line-height, var(--pc-text-display-5-line-height));
+  color: var(--pc-text-header-color);
+  font-weight: var(--g-text-accent-font-weight);
+  margin-top: 96px;
+}
+@media (max-width: 577px) {
+  .pc-title-item_size_xl {
+    font-size: var(--g-text-display-3-font-size, var(--pc-text-display-3-font-size));
+    line-height: var(--g-text-display-3-line-height, var(--pc-text-display-3-line-height));
+  }
+}
+.pc-title-item__arrow {
+  margin-top: 9px;
+}
+.pc-title-item__arrow_size_xs {
+  margin-top: 6px;
+}
+.pc-title-item__arrow_size_s {
+  margin-top: 4px;
+}
+.pc-title-item__link {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  padding-right: 8px;
+  border-radius: var(--g-focus-border-radius);
+}
+.pc-title-item__link:hover, .pc-title-item__link:active {
+  --pc-text-header-color: inherit;
+  color: inherit;
+}
+.pc-title-item__link:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-title-item__link:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-title-item__link:hover {
+  cursor: pointer;
+}
+.pc-title-item__link:hover .pc-title-item__arrow {
+  margin-left: 10px;
+}
+.pc-title-item__link:hover .pc-title-item__arrow_size_xs {
+  margin-left: 6px;
+}
+.pc-title-item__link:hover .pc-title-item__arrow_size_s {
+  margin-left: 8px;
+}
+.pc-title-item__text {
+  white-space: normal;
+}
+.pc-title-item__text a {
+  outline: none;
+  color: var(--g-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .pc-title-item__text a:focus {
+  outline: 2px solid #ffdb4d;
+}
+.pc-title-item__text a:hover, .pc-title-item__text a:active {
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
+}
+.pc-title-item__wrapper {
+  white-space: nowrap;
+}
+.pc-title-item_reset-margin {
+  margin-top: 0;
+}
+@media (max-width: 577px) {
+  .pc-title-item_size_l:not(.pc-title-item_reset-margin) {
+    margin-top: 48px;
+  }
+  .pc-title-item__arrow_size_m, .pc-title-item__arrow_size_l {
+    margin-top: 9px;
+  }
+}

package/build/esm/components/Title/TitleItem.d.ts

@@ -0,0 +1,10 @@
+import { QAProps, TitleItemProps, TitleTextSize } from '../../models';
+import './TitleItem.css';
+export declare function getArrowSize(size: TitleTextSize, isMobile: boolean): 16 | 13 | 22 | 24 | 26 | 38 | 20;
+export interface TitleItemFullProps extends TitleItemProps, QAProps {
+    className?: string;
+    onClick?: () => void;
+    resetMargin?: boolean;
+}
+declare const TitleItem: (props: TitleItemFullProps) => JSX.Element;
+export default TitleItem;

package/build/esm/components/Title/TitleItem.js

@@ -0,0 +1,55 @@
+import React, { Fragment, useContext } from 'react';
+import { HTML, ToggleArrow } from '../';
+import { LocationContext } from '../../context/locationContext';
+import { MobileContext } from '../../context/mobileContext';
+import { block, getHeaderTag, getLinkProps } from '../../utils';
+import Anchor from '../Anchor/Anchor';
+import './TitleItem.css';
+const b = block('title-item');
+export function getArrowSize(size, isMobile) {
+    switch (size) {
+        case 'xs':
+            return 13;
+        case 's':
+            return 16;
+        case 'm':
+            return isMobile ? 22 : 24;
+        case 'l':
+            return isMobile ? 26 : 38;
+        case 'xl':
+            return isMobile ? 26 : 38;
+        default:
+            return 20;
+    }
+}
+const TitleItem = (props) => {
+    const isMobile = useContext(MobileContext);
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, urlTitle, } = props;
+    const { hostname } = useContext(LocationContext);
+    const textMarkup = (React.createElement(React.Fragment, null,
+        React.createElement(HTML, { className: b('text') }, text),
+        custom && (React.createElement(React.Fragment, null,
+            "\u00A0",
+            React.createElement("span", { className: b('custom') }, custom)))));
+    let content;
+    const insideClickableContent = (React.createElement("span", { className: b('wrapper') },
+        textMarkup,
+        "\u00A0",
+        React.createElement(ToggleArrow, { className: b('arrow', { size: textSize }), size: getArrowSize(textSize, isMobile), type: 'horizontal', iconType: "navigation", open: false })));
+    if (!url && !onClick) {
+        content = textMarkup;
+    }
+    else if (url) {
+        content = (React.createElement("a", Object.assign({ className: b('link'), href: url }, getLinkProps(url, hostname), { onClick: onClick, title: urlTitle }), insideClickableContent));
+    }
+    else if (onClick) {
+        content = (React.createElement("button", { className: b('link'), onClick: onClick, title: urlTitle }, insideClickableContent));
+    }
+    return (React.createElement(Fragment, null,
+        anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),
+        React.createElement(getHeaderTag(textSize), {
+            className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
+            'data-qa': `${qa}-header`,
+        }, content)));
+};
+export default TitleItem;

package/build/esm/components/ToggleArrow/ToggleArrow.css

@@ -0,0 +1,23 @@
+.pc-ToggleArrow {
+  transition: transform 0.15s;
+  stroke-width: 2px;
+}
+.pc-ToggleArrow_type_horizontal {
+  transition: margin-left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transform: rotate(-90deg);
+}
+.pc-ToggleArrow_type_vertical {
+  transform: rotate(0deg);
+}
+.pc-ToggleArrow_open.pc-ToggleArrow_type_horizontal {
+  transform: rotate(0deg);
+}
+.pc-ToggleArrow_open.pc-ToggleArrow_type_vertical {
+  transform: rotate(180deg);
+}
+.pc-ToggleArrow_thin {
+  stroke-width: 1px;
+}
+.pc-ToggleArrow_slow {
+  transition-duration: 0.3s;
+}

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

@@ -0,0 +1,12 @@
+import './ToggleArrow.css';
+export interface ToggleArrowProps {
+    type?: 'horizontal' | 'vertical';
+    iconType?: 'navigation' | 'default';
+    open?: boolean;
+    size?: number;
+    thin?: boolean;
+    slow?: boolean;
+    className?: string;
+}
+declare const ToggleArrow: ({ type, iconType, open, size, thin, slow, className, }: ToggleArrowProps) => JSX.Element;
+export default ToggleArrow;

package/build/esm/components/ToggleArrow/ToggleArrow.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { Chevron, NavigationChevron } from '../../icons';
+import { block } from '../../utils';
+import './ToggleArrow.css';
+const b = block('ToggleArrow');
+const ToggleArrow = ({ type = 'horizontal', iconType = 'default', open = false, size = 16, thin = false, slow = false, className, }) => (React.createElement(Icon, { className: b({ type, open, thin, slow }, className), data: iconType === 'navigation' ? NavigationChevron : Chevron, size: size }));
+export default ToggleArrow;

package/build/esm/components/UnpublishedLabel/UnpublishedLabel.css

@@ -0,0 +1,19 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-unpublished-label {
+  background-color: var(--g-color-base-danger-heavy);
+}
+.pc-unpublished-label_type_line {
+  font-size: var(--g-text-body-3-font-size, var(--pc-text-body-3-font-size));
+  line-height: var(--g-text-body-3-line-height, var(--pc-text-body-3-line-height));
+  padding: 15px;
+}
+.pc-unpublished-label_type_label {
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  display: inline-block;
+  padding: 0 8px;
+  border-radius: 2px;
+  height: 20px;
+  line-height: 20px;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './UnpublishedLabel.css';
+export type LabeLType = 'label' | 'line';
+export interface UnpublishedLabelProps {
+    type?: LabeLType;
+    className?: string;
+}
+declare const UnpublishedLabel: ({ className, children, type, }: React.PropsWithChildren<UnpublishedLabelProps>) => JSX.Element;
+export default UnpublishedLabel;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { block } from '../../utils';
+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')));
+export default UnpublishedLabel;

package/build/esm/components/UnpublishedLabel/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "label_non_published": "Unpublished"
+}

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

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

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

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

package/build/esm/components/UnpublishedLabel/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "label_non_published": "Не опубликовано"
+}

package/build/esm/components/VideoBlock/VideoBlock.css

@@ -0,0 +1,55 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-VideoBlock {
+  position: relative;
+}
+.pc-VideoBlock__preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pc-VideoBlock__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.pc-VideoBlock__image-wrapper {
+  height: 100%;
+  width: 100%;
+}
+.pc-VideoBlock__button {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  outline: none;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
+  border-radius: 50%;
+}
+.pc-VideoBlock__button:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-VideoBlock__button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-VideoBlock__icon {
+  margin-left: 1px;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { AnalyticsEventsBase } from '../../models/common';
+import './VideoBlock.css';
+export declare const AUTOPLAY_ATTRIBUTES: {
+    autoplay: number;
+    mute: number;
+};
+export declare function getHeight(width: number): number;
+export interface VideoBlockProps extends AnalyticsEventsBase {
+    id?: string;
+    stream?: string;
+    record?: string;
+    videoIframe?: string;
+    attributes?: Record<string, string>;
+    className?: string;
+    previewImg?: string;
+    playButton?: React.ReactNode;
+    playButtonId?: string;
+    height?: number;
+    fullscreen?: boolean;
+    autoplay?: boolean;
+    onImageLoad?: () => void;
+}
+declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
+export default VideoBlock;

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

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { PlayFill } from '@gravity-ui/icons';
+import { Icon, useActionHandlers, useUniqId } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import { v4 as uuidv4 } from 'uuid';
+import { useAnalytics } from '../../hooks/useAnalytics';
+import { DefaultEventNames } from '../../models/common';
+import { block, getPageSearchParams } from '../../utils';
+import Image from '../Image/Image';
+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=';
+const RECORD_RE = /[0-9A-Za-z_-]{11}/;
+const STREAM_RE = /[0-9A-Za-z_-]{23,25}/;
+const AUTOPLAY_DELAY = 300;
+export const AUTOPLAY_ATTRIBUTES = {
+    autoplay: 1,
+    mute: 1,
+};
+const NO_AUTOPLAY_ATTRIBUTES = {
+    autoplay: 0,
+};
+const b = block('VideoBlock');
+function getYoutubeVideoSrc(stream, record) {
+    if (!stream && !record) {
+        return null;
+    }
+    const [videoLink, url, re] = stream
+        ? [stream, STREAM_URL, STREAM_RE]
+        : [record, RECORD_URL, RECORD_RE];
+    const match = videoLink === null || videoLink === void 0 ? void 0 : videoLink.match(re);
+    let src;
+    if (match && match.length) {
+        src = url + match[0];
+    }
+    return src;
+}
+export function getHeight(width) {
+    return (width / 16) * 9;
+}
+const VideoBlock = (props) => {
+    const { stream, record, videoIframe, attributes, className, id, previewImg, playButton, playButtonId, height, fullscreen, analyticsEvents, autoplay, onImageLoad, } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
+    const src = videoIframe ? videoIframe : getYoutubeVideoSrc(stream, record);
+    const ref = useRef(null);
+    const [hidePreview, setHidePreview] = useState(false);
+    const [currentHeight, setCurrentHeight] = useState(height || undefined);
+    const fullId = useMemo(() => id || uuidv4(), [id]);
+    const buttonId = useUniqId();
+    const [isPlaying, setIsPlaying] = useState(!previewImg);
+    const iframeSrc = useMemo(() => {
+        if (src && isPlaying) {
+            try {
+                const url = new URL(src);
+                const searchParams = getPageSearchParams(Object.assign(Object.assign({}, (attributes || {})), (previewImg || autoplay ? AUTOPLAY_ATTRIBUTES : NO_AUTOPLAY_ATTRIBUTES)));
+                searchParams.forEach((value, key) => {
+                    url.searchParams.set(key, value);
+                });
+                return url.href;
+            }
+            catch (e) {
+                return src;
+            }
+        }
+        return undefined;
+    }, [attributes, autoplay, isPlaying, previewImg, src]);
+    const onPreviewClick = useCallback(() => {
+        handleAnalytics(analyticsEvents);
+        setIsPlaying(true);
+        setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
+    }, [handleAnalytics, analyticsEvents]);
+    const { onKeyDown: onPreviewKeyDown } = useActionHandlers(onPreviewClick);
+    useEffect(() => {
+        const updateSize = debounce(() => {
+            setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);
+        }, 100);
+        updateSize();
+        window.addEventListener('resize', updateSize, { passive: true });
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [height]);
+    const iframeContent = useMemo(() => {
+        return (React.createElement("iframe", { id: fullId, src: iframeSrc, width: "100%", height: "100%", title: i18n('iframe-title'), frameBorder: "0", allowFullScreen: true, allow: "autoplay; fullscreen; encrypted-media; accelerometer; gyroscope; picture-in-picture; clipboard-write; web-share; screen-wake-lock", loading: "lazy" }));
+    }, [fullId, iframeSrc]);
+    useEffect(() => {
+        setHidePreview(false);
+    }, [src]);
+    if (!src) {
+        return null;
+    }
+    return (React.createElement("div", { className: b(null, className), style: { height: currentHeight }, ref: ref },
+        iframeContent,
+        previewImg && !hidePreview && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick, onKeyDown: onPreviewKeyDown, role: "button", tabIndex: 0, "aria-labelledby": playButton ? playButtonId : buttonId },
+            React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper'), onLoad: onImageLoad }),
+            playButton || (React.createElement("button", { title: "Play", id: buttonId, className: b('button') },
+                React.createElement(Icon, { className: b('icon'), data: PlayFill, size: 24 })))))));
+};
+export default VideoBlock;

package/build/esm/components/VideoBlock/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Video frame"
+}

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

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

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

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

package/build/esm/components/VideoBlock/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "iframe-title": "Фрейм видеоблока"
+}

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

@@ -0,0 +1,10 @@
+import { ClassNameProps, Modifiers } from '../../models';
+import { QAProps } from '../../models/common';
+export interface YFMWrapperProps extends ClassNameProps, QAProps {
+    content: string;
+    modifiers?: Modifiers;
+    itemProp?: string;
+    id?: string;
+}
+declare const YFMWrapper: ({ content, modifiers, className, itemProp, id, qa }: YFMWrapperProps) => JSX.Element;
+export default YFMWrapper;

package/build/esm/components/YFMWrapper/YFMWrapper.js

@@ -0,0 +1,9 @@
+/* we won't use 'pc' class prefix here to let you opportunity to define yfm styles
+in your project via global 'yfm' class */
+import React from 'react';
+import toSnakeCase from 'snakecase-keys';
+import { HTML } from '../../components';
+import { cn } from '../../utils';
+const yfm = cn('yfm');
+const YFMWrapper = ({ content, modifiers, className, itemProp, id, qa }) => (React.createElement(HTML, { className: yfm(modifiers ? toSnakeCase(modifiers) : {}, className), itemProp: itemProp, id: id, qa: qa }, content));
+export default YFMWrapper;

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

@@ -0,0 +1,5 @@
+import { YandexFormProps } from '../../models';
+export declare const YANDEX_FORM_ORIGIN = "https://forms.yandex.ru";
+export declare const YANDEX_FORM_SECTION = "surveys";
+declare const YandexForm: (props: YandexFormProps) => JSX.Element;
+export default YandexForm;

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

@@ -0,0 +1,106 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { LocaleContext } from '../../context/localeContext';
+import { MobileContext } from '../../context/mobileContext';
+import { useAnalytics } from '../../hooks';
+import { DefaultEventNames } from '../../models/common';
+import { block } from '../../utils';
+import { HEADER_HEIGHT } from '../constants';
+export const YANDEX_FORM_ORIGIN = 'https://forms.yandex.ru';
+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 formContainerRef = useRef(null);
+    const iframeRef = useRef();
+    const yaFormOrigin = customFormOrigin || YANDEX_FORM_ORIGIN;
+    const yaFormSection = customFormSection || YANDEX_FORM_SECTION;
+    const handleAnalytics = useAnalytics(DefaultEventNames.YandexFormSubmit);
+    const isMobile = useContext(MobileContext);
+    const locale = useContext(LocaleContext);
+    const updateFormIframe = useCallback((container) => {
+        const queryParams = new URLSearchParams(location.search);
+        const url = location.origin + location.pathname;
+        queryParams.set('url', url);
+        queryParams.set('iframe', '1');
+        if (locale === null || locale === void 0 ? void 0 : locale.lang) {
+            queryParams.set('lang', locale.lang);
+        }
+        queryParams.set('theme', theme || 'cloud-www');
+        if (isMobile) {
+            queryParams.set('media-type', 'mobile');
+        }
+        if (params) {
+            Object.keys(params).forEach((param) => {
+                queryParams.set(param, params[param]);
+            });
+        }
+        const src = `${yaFormOrigin}/${yaFormSection}/${id}/?${queryParams}`;
+        if (iframeRef.current) {
+            iframeRef.current.src = src;
+        }
+        else {
+            iframeRef.current = document.createElement('iframe');
+            iframeRef.current.src = src;
+            iframeRef.current.id = containerId;
+            iframeRef.current.name = `form${id}`;
+            iframeRef.current.setAttribute('loading', 'lazy');
+            iframeRef.current.frameBorder = '0';
+            iframeRef.current.scrolling = 'no';
+            iframeRef.current.width = '100%';
+            container.appendChild(iframeRef.current);
+        }
+    }, [locale.lang, theme, isMobile, yaFormOrigin, yaFormSection, id, containerId, params]);
+    const handleSubmit = useCallback(() => {
+        if (formContainerRef && formContainerRef.current) {
+            const { top } = formContainerRef.current.getBoundingClientRect();
+            window.scrollBy(0, top - headerHeight);
+        }
+        handleAnalytics(analyticsEvents);
+        if (onSubmit) {
+            onSubmit();
+        }
+    }, [handleAnalytics, analyticsEvents, onSubmit, headerHeight]);
+    const handleMessage = useCallback(({ origin, data }) => {
+        if (origin !== yaFormOrigin) {
+            return;
+        }
+        try {
+            const parsed = JSON.parse(data);
+            const height = parsed['iframe-height'];
+            const { message, name, redirectUrl } = parsed;
+            if (name !== `form${id}`) {
+                return;
+            }
+            if (iframeRef.current && height && !message) {
+                iframeRef.current.height = `${height}px`;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+            }
+            if (message === 'sent' || redirectUrl) {
+                // event with redirectUrl is comming when form with redirect is used
+                // otherwise, message: 'sent' is not comming on such sort of forms
+                // to catch this event and handle analytics redirectUrl is added to condition
+                handleSubmit();
+            }
+        }
+        catch (error) {
+            return;
+        }
+    }, [yaFormOrigin, id, onLoad, handleSubmit]);
+    const addIframe = useCallback(() => {
+        const container = formContainerRef.current;
+        if (container) {
+            updateFormIframe(container);
+            window.addEventListener('message', handleMessage, { passive: true });
+        }
+    }, [updateFormIframe, handleMessage]);
+    useEffect(() => {
+        addIframe();
+        // Crunch for mobile chrome in lite mode
+        // https://support.google.com/chrome/answer/2392284?co=GENIE.Platform%3DAndroid&oco=1
+        setTimeout(() => onLoad === null || onLoad === void 0 ? void 0 : onLoad(), 1000);
+        return () => window.removeEventListener('message', handleMessage);
+    }, [id, addIframe, handleMessage, onLoad]);
+    return React.createElement("div", { ref: formContainerRef, className: b(null, className) });
+};
+export default YandexForm;