@gravity-ui/page-constructor 6.1.0 → 6.2.0-beta.2

package/build/cjs/components/Media/Image/Image.js

@@ -44,15 +44,15 @@ const Image = (props) => {
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {
         const itemData = (0, utils_2.getMediaImage)(item);
-        return ((0, jsx_runtime_1.jsx)(FullscreenImage_1.default, Object.assign({}, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage }), itemData.alt));
+        return ((0, jsx_runtime_1.jsx)(FullscreenImage_1.default, { ...itemData, imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage }, itemData.alt));
     };
     const imageBackground = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return ((0, jsx_runtime_1.jsx)(web_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate, children: (0, jsx_runtime_1.jsx)(BackgroundImage_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.backgroundImage })) }));
+        return ((0, jsx_runtime_1.jsx)(web_1.animated.div, { style: { transform: parallaxInterpolate }, "data-qa": qaAttributes.animate, children: (0, jsx_runtime_1.jsx)(BackgroundImage_1.default, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.backgroundImage }) }));
     };
     const imageOnly = (oneImage) => {
         const imageData = (0, utils_2.getMediaImage)(oneImage);
-        return ((0, jsx_runtime_1.jsx)(Image_1.default, Object.assign({}, imageData, { className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad })));
+        return ((0, jsx_runtime_1.jsx)(Image_1.default, { ...imageData, className: imageClass, style: { height }, qa: qaAttributes.imageView, onLoad: onLoad }));
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;

package/build/cjs/components/Media/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2CAA6E;AAC7E,0EAAuC;AAEvC,sFAAwD;AACxD,qDAA0F;AAC1F,mDAAsD;AACtD,uGAAoE;AACpE,uGAAoE;AACpE,yEAA0C;AAE1C,sCAAsC;AAItC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,uBAAuB,CAAC,CAAC;AAe5B,QAAA,oBAAoB,GAAG,cAAc,CAAC;AAEnD,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IACnC,MAAM,EACF,QAAQ,EACR,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,KAAK,EACL,UAAU,EACV,+BAA+B,EAC/B,EAAE,EACF,MAAM,GACT,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GACP,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,+BAA+B;QACzD,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;IAEtB,MAAM,YAAY,GAAG,IAAA,uBAAe,EAChC,EAAE,EACF,kBAAkB,EAClB,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,cAAc,CACjB,CAAC;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,EAAC,aAAa,EAAC,EAAE,gBAAgB,CAAC,GAAG,IAAA,eAAS,EAAC,GAAG,EAAE,CAAC,CAAC;QACzD,aAAa,EAAE,CAAC;QAChB,MAAM,EAAE,YAAM,CAAC,QAAQ;KAC1B,CAAC,CAAC,CAAC;IAEJ,IAAI,mBAAmB,GAA2C,EAAE,CAAC;IAErE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACtD,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,YAAY,EAAE,CAAC,CAAC,CAAC;YAEnD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;YACrE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;QACxE,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,IAAI,QAAQ,EAAE,CAAC;QACX,MAAM,aAAa,GAAG,CAAC,CAAC;QACxB,gBAAgB,CAAC,KAAK,CAAC,EAAC,aAAa,EAAE,MAAM,IAAI,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAC,CAAC,CAAC;QACvF,mBAAmB,GAAG,aAAa,CAAC,EAAE,CAClC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,MAAM,CAAC,KAAK,CAAC,GAAG,aAAa,KAAK,CAC/D,CAAC;IACN,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,EAAE,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAC,EAAE,cAAc,CAAC,CAAC;IAE/F,MAAM,qBAAqB,GAAG,CAAC,IAAgB,EAAE,EAAE;QAC/C,MAAM,QAAQ,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,CAAC;QAErC,OAAO,CACH,uBAAC,yBAAe,oBAER,QAAQ,IACZ,cAAc,EAAE,UAAU,EAC1B,UAAU,EAAE,EAAC,MAAM,EAAC,EACpB,EAAE,EAAE,YAAY,CAAC,eAAe,KAJ3B,QAAQ,CAAC,GAAG,CAKnB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;QAC7C,MAAM,SAAS,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,uBAAC,cAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,mBAAmB,EAAC,aAAW,YAAY,CAAC,OAAO,YAChF,uBAAC,yBAAe,oBACR,SAAS,IACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,eAAe,IAClC,GACS,CAClB,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,QAAoB,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,IAAA,qBAAa,EAAC,QAAQ,CAAC,CAAC;QAC1C,OAAO,CACH,uBAAC,eAAS,oBACF,SAAS,IACb,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,EAAC,MAAM,EAAC,EACf,EAAE,EAAE,YAAY,CAAC,SAAS,EAC1B,MAAM,EAAE,MAAM,IAChB,CACL,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,UAAwB,EAAE,EAAE;QAC7C,MAAM,cAAc,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,CAAC;QAE9D,OAAO,CACH,uBAAC,gBAAW,IAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAU,CAAC,SAAS,YACnD,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,uBAAC,KAAK,CAAC,QAAQ,cACV,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAD9C,KAAK,CAET,CACpB,CAAC,GACQ,CACjB,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACpE,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport SliderBlock from '../../../blocks/Slider/Slider';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    onLoad?: () => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (item: ImageProps) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"../../../../../src","sources":["components/Media/Image/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Interpolation, animated, config, useSpring} from '@react-spring/web';\nimport debounce from 'lodash/debounce';\n\nimport SliderBlock from '../../../blocks/Slider/Slider';\nimport {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models';\nimport {block, getQaAttrubutes} from '../../../utils';\nimport BackgroundImage from '../../BackgroundImage/BackgroundImage';\nimport FullscreenImage from '../../FullscreenImage/FullscreenImage';\nimport ImageView from '../../Image/Image';\n\nimport {getMediaImage} from './utils';\n\nimport './Image.scss';\n\nconst b = block('media-component-image');\n\nexport interface ImageAdditionProps {\n    imageClassName?: string;\n    isBackground?: boolean;\n    fullscreen?: boolean;\n    onLoad?: () => void;\n}\n\ninterface InnerImageProps {\n    hasVideoFallback: boolean;\n}\n\ntype ImageAllProps = ImageAdditionProps & MediaComponentImageProps & InnerImageProps & QAProps;\n\nexport const defaultAnimatedDivQa = 'animated-div';\n\nconst Image = (props: ImageAllProps) => {\n    const {\n        parallax,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        video,\n        fullscreen,\n        disableImageSliderForArrayInput,\n        qa,\n        onLoad,\n    } = props;\n    const image =\n        Array.isArray(props.image) && disableImageSliderForArrayInput\n            ? props.image[0]\n            : props.image;\n\n    const qaAttributes = getQaAttrubutes(\n        qa,\n        'fullscreen-image',\n        'animate',\n        'background-image',\n        'image-view',\n        'slider-block',\n    );\n    const [scrollY, setScrollY] = React.useState(0);\n    const [{springScrollY}, springSetScrollY] = useSpring(() => ({\n        springScrollY: 0,\n        config: config.molasses,\n    }));\n\n    let parallaxInterpolate: Interpolation<number, string> | string = '';\n\n    React.useEffect(() => {\n        if (parallax) {\n            const handleScroll = () => setScrollY(window.scrollY);\n            const debouncedHandler = debounce(handleScroll, 5);\n\n            window.addEventListener('scroll', debouncedHandler, {passive: true});\n            return () => window.removeEventListener('scroll', debouncedHandler);\n        }\n\n        return () => {};\n    });\n\n    if (parallax) {\n        const parallaxLevel = 2;\n        springSetScrollY.start({springScrollY: height && scrollY > height ? height : scrollY});\n        parallaxInterpolate = springScrollY.to(\n            (value) => `translateY(-${Number(value) / parallaxLevel}px)`,\n        );\n    }\n\n    const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName);\n\n    const renderFullscreenImage = (item: ImageProps) => {\n        const itemData = getMediaImage(item);\n\n        return (\n            <FullscreenImage\n                key={itemData.alt}\n                {...itemData}\n                imageClassName={imageClass}\n                imageStyle={{height}}\n                qa={qaAttributes.fullscreenImage}\n            />\n        );\n    };\n\n    const imageBackground = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <animated.div style={{transform: parallaxInterpolate}} data-qa={qaAttributes.animate}>\n                <BackgroundImage\n                    {...imageData}\n                    className={imageClass}\n                    style={{height}}\n                    qa={qaAttributes.backgroundImage}\n                />\n            </animated.div>\n        );\n    };\n\n    const imageOnly = (oneImage: ImageProps) => {\n        const imageData = getMediaImage(oneImage);\n        return (\n            <ImageView\n                {...imageData}\n                className={imageClass}\n                style={{height}}\n                qa={qaAttributes.imageView}\n                onLoad={onLoad}\n            />\n        );\n    };\n\n    const imageSlider = (imageArray: ImageProps[]) => {\n        const fullscreenItem = fullscreen === undefined || fullscreen;\n\n        return (\n            <SliderBlock slidesToShow={1} type={SliderType.MediaCard}>\n                {imageArray.map((item, index) => (\n                    <React.Fragment key={index}>\n                        {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)}\n                    </React.Fragment>\n                ))}\n            </SliderBlock>\n        );\n    };\n\n    if (Array.isArray(image)) {\n        return imageSlider(image);\n    }\n\n    if (fullscreen) {\n        return renderFullscreenImage(image);\n    }\n\n    return isBackground ? imageBackground(image) : imageOnly(image);\n};\n\nexport default Image;\n"]}

package/build/cjs/components/Media/Media.js

@@ -40,10 +40,10 @@ const Media = (props) => {
                 ratio,
             };
             if (fullscreen) {
-                result.push((0, jsx_runtime_1.jsx)(FullscreenVideo_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+                result.push((0, jsx_runtime_1.jsx)(FullscreenVideo_1.default, { ...videoProps, qa: qaAttributes.video }));
             }
             else {
-                result.push((0, jsx_runtime_1.jsx)(Video_1.default, Object.assign({}, videoProps, { qa: qaAttributes.video })));
+                result.push((0, jsx_runtime_1.jsx)(Video_1.default, { ...videoProps, qa: qaAttributes.video }));
             }
         }
         if (youtube || videoIframe) {
@@ -85,11 +85,19 @@ const Media = (props) => {
         margins,
     ]);
     const videoMicrodataScript = React.useMemo(() => {
-        var _a;
         const { name, description } = videoMicrodata || {};
-        const json = JSON.stringify(Object.assign(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, (videoMicrodata || {})), { name: name ? (0, microdata_1.sanitizeMicrodata)(name) : name, description: description ? (0, microdata_1.sanitizeMicrodata)(description) : description }));
+        const json = JSON.stringify({
+            '@context': 'http://schema.org/',
+            '@type': 'VideoObject',
+            uploadDate: microdata?.contentUpdatedDate,
+            contentUrl: video?.src?.[0] || videoIframe || youtube,
+            thumbnailUrl: previewImg,
+            ...(videoMicrodata || {}),
+            name: name ? (0, microdata_1.sanitizeMicrodata)(name) : name,
+            description: description ? (0, microdata_1.sanitizeMicrodata)(description) : description,
+        });
         return video || youtube || videoIframe ? ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: json } })) : null;
-    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa, children: [videoMicrodataScript, content] }));
 };
 exports.Media = Media;

package/build/cjs/components/Media/Media.js.map

@@ -1 +1 @@
-{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        videoIframe,\n        youtube,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}
+{"version":3,"file":"Media.js","sourceRoot":"../../../../src","sources":["components/Media/Media.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,sEAAwD;AAExD,gDAAmD;AACnD,wDAAwD;AACxD,qFAAwD;AAExD,8EAA2C;AAC3C,mGAAgE;AAChE,wEAAqC;AACrC,qEAAwD;AACxD,qEAAwD;AAIxD,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,OAAO,CAAC,CAAC;AASlB,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC1C,MAAM,EACF,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,EACX,QAAQ,EACR,KAAK,EACL,MAAM,EACN,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,eAAe,EACf,SAAS,EACT,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,+BAA+B,EAC/B,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAO,EACP,cAAc,GACjB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,EAAC,SAAS,EAAC,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAY,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,IAAA,uBAAe,EAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,MAAM,GAA8C,EAAE,CAAC;QAE3D,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,CAAC,IAAI,CACP,uBAAC,eAAK,IAEF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,+BAA+B,EAAE,+BAA+B,EAChE,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,EAAE,EAAE,YAAY,CAAC,KAAK,EACtB,MAAM,EAAE,WAAW,IAXf,OAAO,CAYb,CACL,CAAC;QACN,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACR,MAAM,UAAU,GAAG;gBACf,GAAG,EAAE,OAAO;gBACZ,KAAK;gBACL,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,SAAS;gBACT,UAAU;gBACV,UAAU;gBACV,0BAA0B;gBAC1B,gBAAgB;gBAChB,mBAAmB;gBACnB,KAAK;aACR,CAAC;YAEF,IAAI,UAAU,EAAE,CAAC;gBACb,MAAM,CAAC,IAAI,CAAC,uBAAC,yBAAe,OAAK,UAAU,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CAAC,CAAC;YAC7E,CAAC;iBAAM,CAAC;gBACJ,MAAM,CAAC,IAAI,CAAC,uBAAC,eAAK,OAAK,UAAU,EAAE,EAAE,EAAE,YAAY,CAAC,KAAK,GAAI,CAAC,CAAC;YACnE,CAAC;QACL,CAAC;QAED,IAAI,OAAO,IAAI,WAAW,EAAE,CAAC;YACzB,MAAM,GAAG,CACL,uBAAC,oBAAgB,IACb,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,gBAAgB,CAAC,EACzC,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,EAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAC,EACtC,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GAC1B,CACL,CAAC;QACN,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACX,MAAM,GAAG,uBAAC,kBAAQ,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;QAC9C,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,GAAG,uBAAC,gBAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;QAC1D,CAAC;QAED,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE;QACC,KAAK;QACL,KAAK;QACL,WAAW;QACX,OAAO;QACP,QAAQ;QACR,MAAM;QACN,QAAQ;QACR,+BAA+B;QAC/B,MAAM;QACN,cAAc;QACd,YAAY;QACZ,gBAAgB;QAChB,UAAU;QACV,YAAY,CAAC,KAAK;QAClB,YAAY,CAAC,KAAK;QAClB,WAAW;QACX,cAAc;QACd,eAAe;QACf,SAAS;QACT,UAAU;QACV,UAAU;QACV,0BAA0B;QAC1B,KAAK;QACL,gBAAgB;QAChB,QAAQ;QACR,OAAO;KACV,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5C,MAAM,EAAC,IAAI,EAAE,WAAW,EAAC,GAAG,cAAc,IAAI,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;YACxB,UAAU,EAAE,oBAAoB;YAChC,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,SAAS,EAAE,kBAAkB;YACzC,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,OAAO;YACrD,YAAY,EAAE,UAAU;YACxB,GAAG,CAAC,cAAc,IAAI,EAAE,CAAC;YACzB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAA,6BAAiB,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;YAC3C,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,IAAA,6BAAiB,EAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW;SAC1E,CAAC,CAAC;QAEH,OAAO,KAAK,IAAI,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,CACrC,mCAAQ,IAAI,EAAC,qBAAqB,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,GAAI,CACjF,CAAC,CAAC,CAAC,IAAI,CAAC;IACb,CAAC,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7F,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,eAAe,EAAE,KAAK,EAAC,aAAW,EAAE,aAC3E,oBAAoB,EACpB,OAAO,IACN,CACT,CAAC;AACN,CAAC,CAAC;AAhKW,QAAA,KAAK,SAgKhB;AAEF,kBAAe,aAAK,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {InnerContext} from '../../context/innerContext';\nimport {MediaProps, QAProps} from '../../models';\nimport {block, getQaAttrubutes} from '../../utils';\nimport {sanitizeMicrodata} from '../../utils/microdata';\nimport IframeVideoBlock from '../VideoBlock/VideoBlock';\n\nimport DataLens from './DataLens/DataLens';\nimport FullscreenVideo from './FullscreenVideo/FullscreenVideo';\nimport Iframe from './Iframe/Iframe';\nimport Image, {ImageAdditionProps} from './Image/Image';\nimport Video, {VideoAdditionProps} from './Video/Video';\n\nimport './Media.scss';\n\nconst b = block('Media');\n\nexport interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {\n    className?: string;\n    youtubeClassName?: string;\n    autoplay?: boolean;\n    onImageLoad?: () => void;\n}\n\nexport const Media = (props: MediaAllProps) => {\n    const {\n        image,\n        video,\n        youtube,\n        videoIframe,\n        dataLens,\n        color,\n        height,\n        previewImg,\n        parallax = false,\n        fullscreen,\n        analyticsEvents,\n        className,\n        imageClassName,\n        videoClassName,\n        youtubeClassName,\n        disableImageSliderForArrayInput,\n        playVideo = true,\n        isBackground,\n        playButton,\n        customBarControlsClassName,\n        qa,\n        ratio,\n        autoplay,\n        onImageLoad,\n        iframe,\n        margins,\n        videoMicrodata,\n    } = props;\n\n    const [hasVideoFallback, setHasVideoFallback] = React.useState(false);\n    const {microdata} = React.useContext(InnerContext);\n\n    const qaAttributes = getQaAttrubutes(qa, 'video');\n\n    const content = React.useMemo(() => {\n        let result: React.ReactElement | React.ReactElement[] = [];\n\n        if (image) {\n            result.push(\n                <Image\n                    key=\"image\"\n                    parallax={parallax}\n                    image={image}\n                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}\n                    height={height}\n                    imageClassName={imageClassName}\n                    isBackground={isBackground}\n                    video={video}\n                    hasVideoFallback={hasVideoFallback}\n                    fullscreen={fullscreen}\n                    qa={qaAttributes.image}\n                    onLoad={onImageLoad}\n                />,\n            );\n        }\n\n        if (video) {\n            const videoProps = {\n                key: 'video',\n                video,\n                videoClassName,\n                height,\n                analyticsEvents,\n                playVideo,\n                previewImg,\n                playButton,\n                customBarControlsClassName,\n                hasVideoFallback,\n                setHasVideoFallback,\n                ratio,\n            };\n\n            if (fullscreen) {\n                result.push(<FullscreenVideo {...videoProps} qa={qaAttributes.video} />);\n            } else {\n                result.push(<Video {...videoProps} qa={qaAttributes.video} />);\n            }\n        }\n\n        if (youtube || videoIframe) {\n            result = (\n                <IframeVideoBlock\n                    className={b('youtube', youtubeClassName)}\n                    record={youtube}\n                    videoIframe={videoIframe}\n                    attributes={{color: 'white', rel: '0'}}\n                    previewImg={previewImg}\n                    height={height}\n                    fullscreen={fullscreen}\n                    analyticsEvents={analyticsEvents}\n                    autoplay={autoplay}\n                    onImageLoad={onImageLoad}\n                />\n            );\n        }\n\n        if (dataLens) {\n            result = <DataLens dataLens={dataLens} />;\n        }\n\n        if (iframe) {\n            result = <Iframe iframe={iframe} margins={margins} />;\n        }\n\n        return result;\n    }, [\n        image,\n        video,\n        videoIframe,\n        youtube,\n        dataLens,\n        iframe,\n        parallax,\n        disableImageSliderForArrayInput,\n        height,\n        imageClassName,\n        isBackground,\n        hasVideoFallback,\n        fullscreen,\n        qaAttributes.image,\n        qaAttributes.video,\n        onImageLoad,\n        videoClassName,\n        analyticsEvents,\n        playVideo,\n        previewImg,\n        playButton,\n        customBarControlsClassName,\n        ratio,\n        youtubeClassName,\n        autoplay,\n        margins,\n    ]);\n\n    const videoMicrodataScript = React.useMemo(() => {\n        const {name, description} = videoMicrodata || {};\n        const json = JSON.stringify({\n            '@context': 'http://schema.org/',\n            '@type': 'VideoObject',\n            uploadDate: microdata?.contentUpdatedDate,\n            contentUrl: video?.src?.[0] || videoIframe || youtube,\n            thumbnailUrl: previewImg,\n            ...(videoMicrodata || {}),\n            name: name ? sanitizeMicrodata(name) : name,\n            description: description ? sanitizeMicrodata(description) : description,\n        });\n\n        return video || youtube || videoIframe ? (\n            <script type=\"application/ld+json\" dangerouslySetInnerHTML={{__html: json}} />\n        ) : null;\n    }, [microdata?.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);\n\n    return (\n        <div className={b(null, className)} style={{backgroundColor: color}} data-qa={qa}>\n            {videoMicrodataScript}\n            {content}\n        </div>\n    );\n};\n\nexport default Media;\n"]}

package/build/cjs/components/MediaBase/MediaBase.js

@@ -12,7 +12,7 @@ const MediaBaseContent_1 = tslib_1.__importDefault(require("./MediaBaseContent.j
 const b = (0, utils_1.block)('media-base');
 const Card = () => null;
 const MediaBase = (props) => {
-    const { children, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, onScroll, mediaOnlyColSizes = { all: 12, md: 8 } } = props, mediaContentProps = tslib_1.__rest(props, ["children", "largeMedia", "direction", "mobileDirection", "animated", "mediaOnly", "onScroll", "mediaOnlyColSizes"]);
+    const { children, largeMedia, direction = 'content-media', mobileDirection = 'content-media', animated, mediaOnly, onScroll, mediaOnlyColSizes = { all: 12, md: 8 }, ...mediaContentProps } = props;
     const { title, description } = mediaContentProps;
     const mediaSizes = React.useMemo(() => {
         return mediaOnly
@@ -22,8 +22,8 @@ const MediaBase = (props) => {
     const contentSizes = React.useMemo(() => {
         return { [grid_1.GridColumnSize.Md]: largeMedia ? 4 : 6, [grid_1.GridColumnSize.All]: 12 };
     }, [largeMedia]);
-    const mediaContent = !mediaOnly && (0, jsx_runtime_1.jsx)(MediaBaseContent_1.default, Object.assign({}, mediaContentProps));
-    const card = children.type === Card ? children === null || children === void 0 ? void 0 : children.props.children : null;
+    const mediaContent = !mediaOnly && (0, jsx_runtime_1.jsx)(MediaBaseContent_1.default, { ...mediaContentProps });
+    const card = children.type === Card ? children?.props.children : null;
     return ((0, jsx_runtime_1.jsxs)(AnimateBlock_1.default, { className: b(), onScroll: onScroll, animate: animated, children: [mediaOnly && ((0, jsx_runtime_1.jsx)(Title_1.default, { className: b('header'), title: title, subtitle: description, colSizes: mediaOnlyColSizes })), (0, jsx_runtime_1.jsx)(grid_1.Grid, { children: (0, jsx_runtime_1.jsxs)(grid_1.Row, { className: b('row', {
                         reverse: direction === 'media-content',
                         'mobile-reverse': mobileDirection === 'media-content',

package/build/cjs/components/MediaBase/MediaBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAA0C,GAAG,EAAE,CAAC,IAAI,CAAC;AAOxD,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EACF,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,eAAe,EAC3B,eAAe,GAAG,eAAe,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,iBAAiB,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,KAEpC,KAAK,EADF,iBAAiB,kBACpB,KAAK,EAVH,oHAUL,CAAQ,CAAC;IACV,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,iBAAiB,CAAC;IAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,SAAS;YACZ,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC;YAC5B,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,uBAAC,0BAAY,oBAAK,iBAAiB,EAAI,CAAC;IAC3E,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,OAAO,CACH,wBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,aAC9D,SAAS,IAAI,CACV,uBAAC,eAAK,IACF,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,iBAAiB,GAC7B,CACL,EACD,uBAAC,WAAI,cACD,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,SAAS,KAAK,eAAe;wBACtC,gBAAgB,EAAE,eAAe,KAAK,eAAe;qBACxD,CAAC,aAEF,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,YAC5C,YAAY,GACX,EACL,IAAI,CAAC,CAAC,CAAC,CACJ,uBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,YAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,GACrC,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACH,IACI,CAClB,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,SAAS,aAwDpB;AAEF,iBAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: React.FC<React.PropsWithChildren<{}>> = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n    children: React.ReactElement;\n    onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n    const {\n        children,\n        largeMedia,\n        direction = 'content-media',\n        mobileDirection = 'content-media',\n        animated,\n        mediaOnly,\n        onScroll,\n        mediaOnlyColSizes = {all: 12, md: 8},\n        ...mediaContentProps\n    } = props;\n    const {title, description} = mediaContentProps;\n\n    const mediaSizes = React.useMemo(() => {\n        return mediaOnly\n            ? {[GridColumnSize.All]: 12}\n            : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n    }, [mediaOnly, largeMedia]);\n\n    const contentSizes = React.useMemo(() => {\n        return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n    }, [largeMedia]);\n\n    const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n    const card = children.type === Card ? children?.props.children : null;\n\n    return (\n        <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n            {mediaOnly && (\n                <Title\n                    className={b('header')}\n                    title={title}\n                    subtitle={description}\n                    colSizes={mediaOnlyColSizes}\n                />\n            )}\n            <Grid>\n                <Row\n                    className={b('row', {\n                        reverse: direction === 'media-content',\n                        'mobile-reverse': mobileDirection === 'media-content',\n                    })}\n                >\n                    <Col className={b('content')} sizes={contentSizes}>\n                        {mediaContent}\n                    </Col>\n                    {card ? (\n                        <Col sizes={mediaSizes}>\n                            <div className={b('card')}>{card}</div>\n                        </Col>\n                    ) : null}\n                </Row>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}
+{"version":3,"file":"MediaBase.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBase.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,2FAAsE;AACtE,8CAA0D;AAE1D,gDAAkC;AAClC,sEAAmC;AAEnC,qFAA8C;AAI9C,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,IAAI,GAA0C,GAAG,EAAE,CAAC,IAAI,CAAC;AAOxD,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IAC/C,MAAM,EACF,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,eAAe,EAC3B,eAAe,GAAG,eAAe,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,iBAAiB,GAAG,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAC,EACpC,GAAG,iBAAiB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,EAAC,KAAK,EAAE,WAAW,EAAC,GAAG,iBAAiB,CAAC;IAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,SAAS;YACZ,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC;YAC5B,CAAC,CAAC,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC9E,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,OAAO,EAAC,CAAC,qBAAc,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAc,CAAC,GAAG,CAAC,EAAE,EAAE,EAAC,CAAC;IAC/E,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,uBAAC,0BAAY,OAAK,iBAAiB,GAAI,CAAC;IAC3E,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAEtE,OAAO,CACH,wBAAC,sBAAY,IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,aAC9D,SAAS,IAAI,CACV,uBAAC,eAAK,IACF,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,QAAQ,EAAE,iBAAiB,GAC7B,CACL,EACD,uBAAC,WAAI,cACD,wBAAC,UAAG,IACA,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;wBAChB,OAAO,EAAE,SAAS,KAAK,eAAe;wBACtC,gBAAgB,EAAE,eAAe,KAAK,eAAe;qBACxD,CAAC,aAEF,uBAAC,UAAG,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,YAC5C,YAAY,GACX,EACL,IAAI,CAAC,CAAC,CAAC,CACJ,uBAAC,UAAG,IAAC,KAAK,EAAE,UAAU,YAClB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,GACrC,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACH,IACI,CAClB,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,SAAS,aAwDpB;AAEF,iBAAS,CAAC,IAAI,GAAG,IAAI,CAAC;AAEtB,kBAAe,iBAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport AnimateBlock from '../../components/AnimateBlock/AnimateBlock';\nimport {Col, Grid, GridColumnSize, Row} from '../../grid';\nimport {MediaBaseBlockProps} from '../../models';\nimport {block} from '../../utils';\nimport Title from '../Title/Title';\n\nimport MediaContent from './MediaBaseContent';\n\nimport './MediaBase.scss';\n\nconst b = block('media-base');\n\nconst Card: React.FC<React.PropsWithChildren<{}>> = () => null;\n\ninterface MediaBaseProps extends MediaBaseBlockProps {\n    children: React.ReactElement;\n    onScroll?: () => void;\n}\n\nexport const MediaBase = (props: MediaBaseProps) => {\n    const {\n        children,\n        largeMedia,\n        direction = 'content-media',\n        mobileDirection = 'content-media',\n        animated,\n        mediaOnly,\n        onScroll,\n        mediaOnlyColSizes = {all: 12, md: 8},\n        ...mediaContentProps\n    } = props;\n    const {title, description} = mediaContentProps;\n\n    const mediaSizes = React.useMemo(() => {\n        return mediaOnly\n            ? {[GridColumnSize.All]: 12}\n            : {[GridColumnSize.Md]: largeMedia ? 8 : 6, [GridColumnSize.All]: 12};\n    }, [mediaOnly, largeMedia]);\n\n    const contentSizes = React.useMemo(() => {\n        return {[GridColumnSize.Md]: largeMedia ? 4 : 6, [GridColumnSize.All]: 12};\n    }, [largeMedia]);\n\n    const mediaContent = !mediaOnly && <MediaContent {...mediaContentProps} />;\n    const card = children.type === Card ? children?.props.children : null;\n\n    return (\n        <AnimateBlock className={b()} onScroll={onScroll} animate={animated}>\n            {mediaOnly && (\n                <Title\n                    className={b('header')}\n                    title={title}\n                    subtitle={description}\n                    colSizes={mediaOnlyColSizes}\n                />\n            )}\n            <Grid>\n                <Row\n                    className={b('row', {\n                        reverse: direction === 'media-content',\n                        'mobile-reverse': mobileDirection === 'media-content',\n                    })}\n                >\n                    <Col className={b('content')} sizes={contentSizes}>\n                        {mediaContent}\n                    </Col>\n                    {card ? (\n                        <Col sizes={mediaSizes}>\n                            <div className={b('card')}>{card}</div>\n                        </Col>\n                    ) : null}\n                </Row>\n            </Grid>\n        </AnimateBlock>\n    );\n};\n\nMediaBase.Card = Card;\n\nexport default MediaBase;\n"]}

package/build/cjs/components/MediaBase/MediaBaseContent.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils/index.js");
 const b = (0, utils_1.block)('media-base-content');
 const MediaContent = (props) => {
     const { title, description, button, links, buttons = [], additionalInfo, size = 'l', list, } = props;
-    const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;
+    const allButtons = button ? [{ ...button, size: 'xl' }, ...buttons] : buttons;
     return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(sub_blocks_1.Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, list: list, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } }) }));
 };
 exports.default = MediaContent;

package/build/cjs/components/MediaBase/MediaBaseContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBaseContent.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBaseContent.tsx"],"names":[],"mappings":";;;AAGA,0DAAyC;AACzC,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,oBAAoB,CAAC,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9C,MAAM,EACF,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,OAAO,GAAG,EAAE,EACZ,cAAc,EACd,IAAI,GAAG,GAAG,EACV,IAAI,GACP,GAAG,KAAK,CAAC;IACV,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,iCAAK,MAAM,KAAE,IAAI,EAAE,IAAkB,KAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1F,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,oBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,GAC7B,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import {ButtonSize} from '@gravity-ui/uikit';\n\nimport {MediaContentProps} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block} from '../../utils';\n\nimport './MediaBaseContent.scss';\n\nconst b = block('media-base-content');\n\nconst MediaContent = (props: MediaContentProps) => {\n    const {\n        title,\n        description,\n        button,\n        links,\n        buttons = [],\n        additionalInfo,\n        size = 'l',\n        list,\n    } = props;\n    const allButtons = button ? [{...button, size: 'xl' as ButtonSize}, ...buttons] : buttons;\n    return (\n        <div className={b()}>\n            <Content\n                title={title}\n                text={description}\n                links={links}\n                theme=\"default\"\n                buttons={allButtons}\n                list={list}\n                additionalInfo={additionalInfo}\n                size={size}\n                colSizes={{all: 12, md: 12}}\n            />\n        </div>\n    );\n};\n\nexport default MediaContent;\n"]}
+{"version":3,"file":"MediaBaseContent.js","sourceRoot":"../../../../src","sources":["components/MediaBase/MediaBaseContent.tsx"],"names":[],"mappings":";;;AAGA,0DAAyC;AACzC,gDAAkC;AAIlC,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,oBAAoB,CAAC,CAAC;AAEtC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9C,MAAM,EACF,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,OAAO,GAAG,EAAE,EACZ,cAAc,EACd,IAAI,GAAG,GAAG,EACV,IAAI,GACP,GAAG,KAAK,CAAC;IACV,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,MAAM,EAAE,IAAI,EAAE,IAAkB,EAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1F,OAAO,CACH,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,oBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,GAC7B,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,YAAY,CAAC","sourcesContent":["import {ButtonSize} from '@gravity-ui/uikit';\n\nimport {MediaContentProps} from '../../models';\nimport {Content} from '../../sub-blocks';\nimport {block} from '../../utils';\n\nimport './MediaBaseContent.scss';\n\nconst b = block('media-base-content');\n\nconst MediaContent = (props: MediaContentProps) => {\n    const {\n        title,\n        description,\n        button,\n        links,\n        buttons = [],\n        additionalInfo,\n        size = 'l',\n        list,\n    } = props;\n    const allButtons = button ? [{...button, size: 'xl' as ButtonSize}, ...buttons] : buttons;\n    return (\n        <div className={b()}>\n            <Content\n                title={title}\n                text={description}\n                links={links}\n                theme=\"default\"\n                buttons={allButtons}\n                list={list}\n                additionalInfo={additionalInfo}\n                size={size}\n                colSizes={{all: 12, md: 12}}\n            />\n        </div>\n    );\n};\n\nexport default MediaContent;\n"]}

package/build/cjs/components/OutsideClick/OutsideClick.js

@@ -6,18 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop.js"));
 class OutsideClick extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.ref = React.createRef();
-        this.handleOutsideClick = (e) => {
-            if (e.target &&
-                this.ref &&
-                this.ref.current &&
-                !this.ref.current.contains(e.target)) {
-                this.props.onOutsideClick();
-            }
-        };
-    }
+    ref = React.createRef();
     componentDidMount() {
         document.addEventListener('click', this.handleOutsideClick, { passive: true });
     }
@@ -28,6 +17,14 @@ class OutsideClick extends React.Component {
         const { children, className, onClick } = this.props;
         return ((0, jsx_runtime_1.jsx)("div", { className: className, ref: this.ref, onClick: onClick, onKeyDown: noop_1.default, role: onClick ? 'button' : 'group', tabIndex: onClick ? 0 : -1, children: children }));
     }
+    handleOutsideClick = (e) => {
+        if (e.target &&
+            this.ref &&
+            this.ref.current &&
+            !this.ref.current.contains(e.target)) {
+            this.props.onOutsideClick();
+        }
+    };
 }
 exports.default = OutsideClick;
 //# sourceMappingURL=OutsideClick.js.map

package/build/cjs/components/OutsideClick/OutsideClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutsideClick.js","sourceRoot":"../../../../src","sources":["components/OutsideClick/OutsideClick.tsx"],"names":[],"mappings":";;;;AAAA,kCAAkC;AAClC,qDAA+B;AAE/B,kEAA+B;AAQ/B,MAAqB,YAAa,SAAQ,KAAK,CAAC,SAE/C;IAFD;;QAGI,QAAG,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QA2BxC,uBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IACI,CAAC,CAAC,MAAM;gBACR,IAAI,CAAC,GAAG;gBACR,IAAI,CAAC,GAAG,CAAC,OAAO;gBAChB,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAC9C,CAAC;gBACC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAChC,CAAC;QACL,CAAC,CAAC;IACN,CAAC;IAnCG,iBAAiB;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IACjF,CAAC;IAED,oBAAoB;QAChB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACF,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAElD,OAAO,CACH,gCACI,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAI,EACf,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAClC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAEzB,QAAQ,GACP,CACT,CAAC;IACN,CAAC;CAYJ;AAxCD,+BAwCC","sourcesContent":["//TODO move into cloud components?\nimport * as React from 'react';\n\nimport noop from 'lodash/noop';\n\nexport interface OutsideClickProps {\n    onOutsideClick: () => void;\n    className?: string;\n    onClick?: () => void;\n}\n\nexport default class OutsideClick extends React.Component<\n    React.PropsWithChildren<OutsideClickProps>\n> {\n    ref = React.createRef<HTMLDivElement>();\n\n    componentDidMount() {\n        document.addEventListener('click', this.handleOutsideClick, {passive: true});\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this.handleOutsideClick);\n    }\n\n    render() {\n        const {children, className, onClick} = this.props;\n\n        return (\n            <div\n                className={className}\n                ref={this.ref}\n                onClick={onClick}\n                onKeyDown={noop}\n                role={onClick ? 'button' : 'group'}\n                tabIndex={onClick ? 0 : -1}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    handleOutsideClick = (e: MouseEvent) => {\n        if (\n            e.target &&\n            this.ref &&\n            this.ref.current &&\n            !this.ref.current.contains(e.target as Node)\n        ) {\n            this.props.onOutsideClick();\n        }\n    };\n}\n"]}
+{"version":3,"file":"OutsideClick.js","sourceRoot":"../../../../src","sources":["components/OutsideClick/OutsideClick.tsx"],"names":[],"mappings":";;;;AAAA,kCAAkC;AAClC,qDAA+B;AAE/B,kEAA+B;AAQ/B,MAAqB,YAAa,SAAQ,KAAK,CAAC,SAE/C;IACG,GAAG,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;IAExC,iBAAiB;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IACjF,CAAC;IAED,oBAAoB;QAChB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnE,CAAC;IAED,MAAM;QACF,MAAM,EAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAElD,OAAO,CACH,gCACI,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAI,EACf,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAClC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAEzB,QAAQ,GACP,CACT,CAAC;IACN,CAAC;IAED,kBAAkB,GAAG,CAAC,CAAa,EAAE,EAAE;QACnC,IACI,CAAC,CAAC,MAAM;YACR,IAAI,CAAC,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,OAAO;YAChB,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAC9C,CAAC;YACC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;QAChC,CAAC;IACL,CAAC,CAAC;CACL;AAxCD,+BAwCC","sourcesContent":["//TODO move into cloud components?\nimport * as React from 'react';\n\nimport noop from 'lodash/noop';\n\nexport interface OutsideClickProps {\n    onOutsideClick: () => void;\n    className?: string;\n    onClick?: () => void;\n}\n\nexport default class OutsideClick extends React.Component<\n    React.PropsWithChildren<OutsideClickProps>\n> {\n    ref = React.createRef<HTMLDivElement>();\n\n    componentDidMount() {\n        document.addEventListener('click', this.handleOutsideClick, {passive: true});\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this.handleOutsideClick);\n    }\n\n    render() {\n        const {children, className, onClick} = this.props;\n\n        return (\n            <div\n                className={className}\n                ref={this.ref}\n                onClick={onClick}\n                onKeyDown={noop}\n                role={onClick ? 'button' : 'group'}\n                tabIndex={onClick ? 0 : -1}\n            >\n                {children}\n            </div>\n        );\n    }\n\n    handleOutsideClick = (e: MouseEvent) => {\n        if (\n            e.target &&\n            this.ref &&\n            this.ref.current &&\n            !this.ref.current.contains(e.target as Node)\n        ) {\n            this.props.onOutsideClick();\n        }\n    };\n}\n"]}

package/build/cjs/components/OverflowScroller/OverflowScroller.js

@@ -12,55 +12,12 @@ const TRANSITION_TIME = 300;
 const PADDING_SIZE = 24;
 const DEFAULT_ARROW_SIZE = 18;
 class OverflowScroller extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            arrows: [],
-            scrollValue: 0,
-        };
-        this.containerRef = React.createRef();
-        this.wrapperRef = React.createRef();
-        // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
-        this.checkOverflow = (0, debounce_1.default)(() => {
-            if (this.containerRef &&
-                this.containerRef.current &&
-                this.wrapperRef &&
-                this.wrapperRef.current) {
-                const containerWidth = this.containerRef.current.offsetWidth;
-                const wrapperWidth = this.wrapperRef.current.offsetWidth;
-                const scrollValue = 0;
-                const arrows = wrapperWidth < containerWidth ? [] : ['right'];
-                this.setState({ scrollValue, arrows });
-            }
-        }, 100);
-        this.handleScrollClick = (e, arrow) => {
-            const { scrollValue, arrows } = this.state;
-            const { onScrollStart } = this.props;
-            if (this.containerRef &&
-                this.containerRef.current &&
-                this.wrapperRef &&
-                this.wrapperRef.current) {
-                const containerWidth = this.containerRef.current.offsetWidth;
-                const wrapperWidth = this.wrapperRef.current.offsetWidth;
-                const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
-                const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
-                const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
-                const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
-                let newArrows = ['left', 'right'];
-                if (newScrollValue + containerWidth >= wrapperWidth) {
-                    newArrows = ['left'];
-                }
-                else if (!newScrollValue) {
-                    newArrows = ['right'];
-                }
-                this.setState({ arrows: newArrows, scrollValue: newScrollValue });
-                if (onScrollStart) {
-                    onScrollStart();
-                }
-                e.stopPropagation();
-            }
-        };
-    }
+    state = {
+        arrows: [],
+        scrollValue: 0,
+    };
+    containerRef = React.createRef();
+    wrapperRef = React.createRef();
     componentDidMount() {
         this.checkOverflow();
         window.addEventListener('resize', this.checkOverflow, { passive: true });
@@ -85,6 +42,46 @@ class OverflowScroller extends React.Component {
                 'padding-right': paddingRight,
             }), children: [(0, jsx_runtime_1.jsx)("div", { className: b(null, className), ref: this.containerRef, children: (0, jsx_runtime_1.jsx)("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef, children: children }) }), arrows.map((direction) => ((0, jsx_runtime_1.jsx)("button", { className: b('arrow', { type: direction }, arrowClassName), onClick: (e) => this.handleScrollClick(e, direction), "aria-label": (0, i18n_1.i18n)(direction), children: (0, jsx_runtime_1.jsx)(__1.ToggleArrow, { size: arrowSize, type: 'horizontal', iconType: "navigation" }) }, direction)))] }));
     }
+    // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp
+    checkOverflow = (0, debounce_1.default)(() => {
+        if (this.containerRef &&
+            this.containerRef.current &&
+            this.wrapperRef &&
+            this.wrapperRef.current) {
+            const containerWidth = this.containerRef.current.offsetWidth;
+            const wrapperWidth = this.wrapperRef.current.offsetWidth;
+            const scrollValue = 0;
+            const arrows = wrapperWidth < containerWidth ? [] : ['right'];
+            this.setState({ scrollValue, arrows });
+        }
+    }, 100);
+    handleScrollClick = (e, arrow) => {
+        const { scrollValue, arrows } = this.state;
+        const { onScrollStart } = this.props;
+        if (this.containerRef &&
+            this.containerRef.current &&
+            this.wrapperRef &&
+            this.wrapperRef.current) {
+            const containerWidth = this.containerRef.current.offsetWidth;
+            const wrapperWidth = this.wrapperRef.current.offsetWidth;
+            const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
+            const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
+            const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
+            const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
+            let newArrows = ['left', 'right'];
+            if (newScrollValue + containerWidth >= wrapperWidth) {
+                newArrows = ['left'];
+            }
+            else if (!newScrollValue) {
+                newArrows = ['right'];
+            }
+            this.setState({ arrows: newArrows, scrollValue: newScrollValue });
+            if (onScrollStart) {
+                onScrollStart();
+            }
+            e.stopPropagation();
+        }
+    };
 }
 exports.default = OverflowScroller;
 //# sourceMappingURL=OverflowScroller.js.map

package/build/cjs/components/OverflowScroller/OverflowScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowScroller.js","sourceRoot":"../../../../src","sources":["components/OverflowScroller/OverflowScroller.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport debounce from 'lodash/debounce';\n\nimport {ToggleArrow} from '..';\nimport {block} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './OverflowScroller.scss';\n\nconst b = block('overflow-scroller');\nconst TRANSITION_TIME = 300;\nconst PADDING_SIZE = 24;\nconst DEFAULT_ARROW_SIZE = 18;\n\ntype Arrow = 'left' | 'right';\n\nexport interface OverflowScrollerProps {\n    className?: string;\n    onScrollStart?: () => void;\n    onScrollEnd?: () => void;\n    arrowSize?: number;\n    arrowClassName?: string;\n}\n\nexport interface OverflowScrollerState {\n    arrows: Arrow[];\n    scrollValue: number;\n}\n\nexport default class OverflowScroller extends React.Component<\n    React.PropsWithChildren<OverflowScrollerProps>,\n    OverflowScrollerState\n> {\n    state = {\n        arrows: [] as Arrow[],\n        scrollValue: 0,\n    };\n    containerRef = React.createRef<HTMLDivElement>();\n    wrapperRef = React.createRef<HTMLDivElement>();\n\n    componentDidMount() {\n        this.checkOverflow();\n        window.addEventListener('resize', this.checkOverflow, {passive: true});\n    }\n\n    componentDidUpdate(\n        _prepvProps: OverflowScrollerProps,\n        {scrollValue: prevScrollValue}: OverflowScrollerState,\n    ) {\n        const {onScrollEnd} = this.props;\n\n        if (prevScrollValue !== this.state.scrollValue && onScrollEnd) {\n            setTimeout(onScrollEnd, TRANSITION_TIME + 100);\n        }\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('resize', this.checkOverflow);\n    }\n\n    render() {\n        const {className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE} = this.props;\n        const {arrows, scrollValue} = this.state;\n        const wrapperStyle = arrows.length ? {left: -scrollValue} : {left: 0};\n        const paddingLeft = arrows.includes('left');\n        const paddingRight = arrows.includes('right');\n\n        return (\n            <div\n                className={b('container', {\n                    'padding-left': paddingLeft,\n                    'padding-right': paddingRight,\n                })}\n            >\n                <div className={b(null, className)} ref={this.containerRef}>\n                    <div className={b('wrapper')} style={wrapperStyle} ref={this.wrapperRef}>\n                        {children}\n                    </div>\n                </div>\n                {arrows.map((direction: Arrow) => (\n                    <button\n                        key={direction}\n                        className={b('arrow', {type: direction}, arrowClassName)}\n                        onClick={(e: React.MouseEvent) => this.handleScrollClick(e, direction)}\n                        aria-label={i18n(direction)}\n                    >\n                        <ToggleArrow size={arrowSize} type={'horizontal'} iconType=\"navigation\" />\n                    </button>\n                ))}\n            </div>\n        );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp\n    private checkOverflow = debounce(() => {\n        if (\n            this.containerRef &&\n            this.containerRef.current &&\n            this.wrapperRef &&\n            this.wrapperRef.current\n        ) {\n            const containerWidth = this.containerRef.current.offsetWidth;\n            const wrapperWidth = this.wrapperRef.current.offsetWidth;\n            const scrollValue = 0;\n            const arrows: Arrow[] = wrapperWidth < containerWidth ? [] : ['right'];\n\n            this.setState({scrollValue, arrows});\n        }\n    }, 100);\n\n    private handleScrollClick = (e: React.MouseEvent, arrow: Arrow) => {\n        const {scrollValue, arrows} = this.state;\n        const {onScrollStart} = this.props;\n\n        if (\n            this.containerRef &&\n            this.containerRef.current &&\n            this.wrapperRef &&\n            this.wrapperRef.current\n        ) {\n            const containerWidth = this.containerRef.current.offsetWidth;\n            const wrapperWidth = this.wrapperRef.current.offsetWidth;\n            const hiddenWidth =\n                arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;\n            const padding =\n                arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;\n            const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;\n            const newScrollValue =\n                arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;\n            let newArrows: Arrow[] = ['left', 'right'];\n\n            if (newScrollValue + containerWidth >= wrapperWidth) {\n                newArrows = ['left'];\n            } else if (!newScrollValue) {\n                newArrows = ['right'];\n            }\n\n            this.setState({arrows: newArrows, scrollValue: newScrollValue});\n\n            if (onScrollStart) {\n                onScrollStart();\n            }\n\n            e.stopPropagation();\n        }\n    };\n}\n"]}
+{"version":3,"file":"OverflowScroller.js","sourceRoot":"../../../../src","sources":["components/OverflowScroller/OverflowScroller.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport debounce from 'lodash/debounce';\n\nimport {ToggleArrow} from '..';\nimport {block} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './OverflowScroller.scss';\n\nconst b = block('overflow-scroller');\nconst TRANSITION_TIME = 300;\nconst PADDING_SIZE = 24;\nconst DEFAULT_ARROW_SIZE = 18;\n\ntype Arrow = 'left' | 'right';\n\nexport interface OverflowScrollerProps {\n    className?: string;\n    onScrollStart?: () => void;\n    onScrollEnd?: () => void;\n    arrowSize?: number;\n    arrowClassName?: string;\n}\n\nexport interface OverflowScrollerState {\n    arrows: Arrow[];\n    scrollValue: number;\n}\n\nexport default class OverflowScroller extends React.Component<\n    React.PropsWithChildren<OverflowScrollerProps>,\n    OverflowScrollerState\n> {\n    state = {\n        arrows: [] as Arrow[],\n        scrollValue: 0,\n    };\n    containerRef = React.createRef<HTMLDivElement>();\n    wrapperRef = React.createRef<HTMLDivElement>();\n\n    componentDidMount() {\n        this.checkOverflow();\n        window.addEventListener('resize', this.checkOverflow, {passive: true});\n    }\n\n    componentDidUpdate(\n        _prepvProps: OverflowScrollerProps,\n        {scrollValue: prevScrollValue}: OverflowScrollerState,\n    ) {\n        const {onScrollEnd} = this.props;\n\n        if (prevScrollValue !== this.state.scrollValue && onScrollEnd) {\n            setTimeout(onScrollEnd, TRANSITION_TIME + 100);\n        }\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('resize', this.checkOverflow);\n    }\n\n    render() {\n        const {className, arrowClassName, children, arrowSize = DEFAULT_ARROW_SIZE} = this.props;\n        const {arrows, scrollValue} = this.state;\n        const wrapperStyle = arrows.length ? {left: -scrollValue} : {left: 0};\n        const paddingLeft = arrows.includes('left');\n        const paddingRight = arrows.includes('right');\n\n        return (\n            <div\n                className={b('container', {\n                    'padding-left': paddingLeft,\n                    'padding-right': paddingRight,\n                })}\n            >\n                <div className={b(null, className)} ref={this.containerRef}>\n                    <div className={b('wrapper')} style={wrapperStyle} ref={this.wrapperRef}>\n                        {children}\n                    </div>\n                </div>\n                {arrows.map((direction: Arrow) => (\n                    <button\n                        key={direction}\n                        className={b('arrow', {type: direction}, arrowClassName)}\n                        onClick={(e: React.MouseEvent) => this.handleScrollClick(e, direction)}\n                        aria-label={i18n(direction)}\n                    >\n                        <ToggleArrow size={arrowSize} type={'horizontal'} iconType=\"navigation\" />\n                    </button>\n                ))}\n            </div>\n        );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/member-ordering, react/sort-comp\n    private checkOverflow = debounce(() => {\n        if (\n            this.containerRef &&\n            this.containerRef.current &&\n            this.wrapperRef &&\n            this.wrapperRef.current\n        ) {\n            const containerWidth = this.containerRef.current.offsetWidth;\n            const wrapperWidth = this.wrapperRef.current.offsetWidth;\n            const scrollValue = 0;\n            const arrows: Arrow[] = wrapperWidth < containerWidth ? [] : ['right'];\n\n            this.setState({scrollValue, arrows});\n        }\n    }, 100);\n\n    private handleScrollClick = (e: React.MouseEvent, arrow: Arrow) => {\n        const {scrollValue, arrows} = this.state;\n        const {onScrollStart} = this.props;\n\n        if (\n            this.containerRef &&\n            this.containerRef.current &&\n            this.wrapperRef &&\n            this.wrapperRef.current\n        ) {\n            const containerWidth = this.containerRef.current.offsetWidth;\n            const wrapperWidth = this.wrapperRef.current.offsetWidth;\n            const hiddenWidth =\n                arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;\n            const padding =\n                arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;\n            const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;\n            const newScrollValue =\n                arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;\n            let newArrows: Arrow[] = ['left', 'right'];\n\n            if (newScrollValue + containerWidth >= wrapperWidth) {\n                newArrows = ['left'];\n            } else if (!newScrollValue) {\n                newArrows = ['right'];\n            }\n\n            this.setState({arrows: newArrows, scrollValue: newScrollValue});\n\n            if (onScrollStart) {\n                onScrollStart();\n            }\n\n            e.stopPropagation();\n        }\n    };\n}\n"]}

package/build/cjs/components/ReactPlayer/ReactPlayer.js

@@ -71,13 +71,13 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         };
     }, [playerRef]);
     React.useEffect(() => {
-        if (ref.current && !(playingVideoRef === null || playingVideoRef === void 0 ? void 0 : playingVideoRef.contains(ref.current))) {
+        if (ref.current && !playingVideoRef?.contains(ref.current)) {
             setMuted(true);
         }
     }, [playingVideoRef]);
     React.useEffect(() => {
         if (showPreview) {
-            playerRef === null || playerRef === void 0 ? void 0 : playerRef.showPreview();
+            playerRef?.showPreview();
         }
     }, [showPreview, playerRef]);
     React.useEffect(() => {
@@ -93,7 +93,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     }, [isPlaying, started]);
     React.useEffect(() => {
         if (started && !Number.isNaN(Number(elapsedTime))) {
-            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(elapsedTime !== null && elapsedTime !== void 0 ? elapsedTime : 0, 'seconds');
+            playerRef?.seekTo(elapsedTime ?? 0, 'seconds');
         }
     }, [elapsedTime, playerRef, started]);
     React.useEffect(() => {
@@ -106,7 +106,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
                     parseFloat(paddingLeft) -
                     parseFloat(paddingRight);
                 setWidth(newWidth);
-                setCurrentHeight(Math.floor(getHeight(newWidth, ratio !== null && ratio !== void 0 ? ratio : (autoRatio ? actualRatio : undefined))));
+                setCurrentHeight(Math.floor(getHeight(newWidth, ratio ?? (autoRatio ? actualRatio : undefined))));
             }
         }, 200);
         updateSize();
@@ -115,8 +115,8 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [actualRatio, autoRatio, ratio]);
-    const playEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
-    const stopEvents = React.useMemo(() => eventsArray === null || eventsArray === void 0 ? void 0 : eventsArray.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
+    const playEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === models_1.PredefinedEventTypes.Play), [eventsArray]);
+    const stopEvents = React.useMemo(() => eventsArray?.filter((e) => e.type === models_1.PredefinedEventTypes.Stop), [eventsArray]);
     const playIcon = React.useMemo(() => {
         let playButtonContent;
         switch (type) {
@@ -156,7 +156,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
     ]);
     const handleClickPreview = React.useCallback(() => {
         setIsPlaying(true);
-        onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview();
+        onClickPreview?.();
         handleAnalytics(playEvents);
     }, [onClickPreview, handleAnalytics, playEvents]);
     const onPause = React.useCallback(() => {
@@ -206,7 +206,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         if (loop) {
             setPlayedPercent(0);
             setIsPlaying(true);
-            playerRef === null || playerRef === void 0 ? void 0 : playerRef.seekTo(0);
+            playerRef?.seekTo(0);
         }
         setEnded(true);
     }, [loop, playerRef]);
@@ -219,8 +219,7 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [isPlaying, onPlay, onPause]);
     const handleClick = React.useCallback(() => {
-        var _a;
-        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        buttonRef.current?.click();
         if (controls === models_1.MediaVideoControlsType.Custom) {
             if (customControlsType === models_1.CustomControlsType.WithMuteButton) {
                 changeMute(muted);
@@ -231,10 +230,9 @@ exports.ReactPlayerBlock = React.forwardRef((props, originRef) => {
         }
     }, [controls, customControlsType, changeMute, muted, onPlayClick]);
     const handleKeyDown = React.useCallback((e) => {
-        var _a;
         const key = e.key.toLowerCase();
         if (key === 'enter') {
-            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            buttonRef.current?.click();
         }
     }, []);
     const onFocusIn = React.useCallback(() => setHovered(true), []);