@gravity-ui/page-constructor 2.21.0 → 2.22.0-alpha

package/build/esm/components/BackLink/__tests__/BackLink.test.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LocationContext } from '../../../context/locationContext';
+import BackLink from '../BackLink';
+const backLinkProps = {
+    url: '#',
+    title: 'Button Title',
+    theme: 'default',
+    size: 's',
+    className: 'customClassName',
+    shouldHandleBackAction: true,
+    onClick: () => { },
+};
+describe('BackLink', () => {
+    test('Default render', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Has custom class', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(backLinkProps.className);
+    });
+    test('Should render <a /> tag', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { shouldHandleBackAction: false })));
+        const backLink = screen.getByRole('link');
+        expect(backLink).toBeVisible();
+        expect(backLink).toHaveAttribute('href', backLinkProps.url);
+    });
+    test('Should render title', async () => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps)));
+        const backLink = screen.getByText(backLinkProps.title);
+        expect(backLink).toBeInTheDocument();
+    });
+    test('Call onClick', async () => {
+        const user = userEvent.setup();
+        const handleClick = jest.fn();
+        render(React.createElement(LocationContext.Provider, { value: { history: { push: jest.fn() } } },
+            React.createElement(BackLink, Object.assign({}, backLinkProps, { onClick: handleClick }))));
+        const backLink = screen.getByRole('button');
+        await user.click(backLink);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('Render with given "%s" size', (size) => {
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { size: size })));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_size_${size}`);
+    });
+    test.each(new Array('default', 'special'))('Render with given "%s" theme', (theme) => {
+        const matchView = {
+            default: 'flat-secondary',
+            special: 'flat-contrast',
+        };
+        render(React.createElement(BackLink, Object.assign({}, backLinkProps, { theme: theme })));
+        const backLink = screen.getByRole('button');
+        expect(backLink).toHaveClass(`yc-button_view_${matchView[theme]}`);
+    });
+});

package/build/esm/components/BackgroundImage/BackgroundImage.js

@@ -4,8 +4,8 @@ import Image from '../Image/Image';
 import './BackgroundImage.css';
 const b = block('storage-background-image');
 const BackgroundImage = (props) => {
-    const { children, src, desktop, className, imageClassName, style, hide, qa } = props;
-    return (React.createElement("div", { className: b(null, className), style: style, "data-qa": qa },
+    const { children, src, desktop, className, imageClassName, style, hide } = props;
+    return (React.createElement("div", { className: b(null, className), style: style },
         (src || desktop) && !hide && React.createElement(Image, Object.assign({}, props, { className: b('img', imageClassName) })),
         children && React.createElement("div", { className: b('container') }, children)));
 };

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

@@ -1,5 +1,4 @@
-import { PropsWithChildren } from 'react';
-import { BlockBaseProps, ClassNameProps } from '../../models';
+import { BlockBaseProps, ClassNameProps, WithChildren } from '../../models';
 import './BlockBase.css';
-declare const BlockBase: (props: PropsWithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
+declare const BlockBase: (props: WithChildren<BlockBaseProps & ClassNameProps>) => JSX.Element;
 export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BlockDecoration } from '../../customization/BlockDecoration';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import Anchor from '../Anchor/Anchor';
@@ -8,8 +7,7 @@ const b = block('block-base');
 const BlockBase = (props) => {
     const { anchor, visible, children, className, resetPaddings, qa } = props;
     return (React.createElement(Col, { className: b({ ['reset-paddings']: resetPaddings }, className), visible: visible, reset: true, dataQa: qa },
-        React.createElement(BlockDecoration, null,
-            anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
-            children)));
+        anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
+        children));
 };
 export default BlockBase;

package/build/esm/components/BlockBase/__tests__/BlockBase.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/BlockBase/__tests__/BlockBase.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { qaIdByDefault } from '../../../components/Anchor/Anchor';
+import { GridColumnSize } from '../../../grid';
+import BlockBase from '../BlockBase';
+const qaId = 'block-base-component';
+describe('BlockBase', () => {
+    test('render component by default', async () => {
+        render(React.createElement(BlockBase, { qa: qaId }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).not.toBeDisabled();
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(BlockBase, { qa: qaId, className: className }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(className);
+    });
+    test('should reset paddings', () => {
+        render(React.createElement(BlockBase, { qa: qaId, resetPaddings: true }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass('pc-block-base_reset-paddings');
+    });
+    test.each(new Array(...Object.values(GridColumnSize)))('render with given "%s" size', (size) => {
+        render(React.createElement(BlockBase, { qa: qaId, visible: size }));
+        const component = screen.getByTestId(qaId);
+        expect(component).toHaveClass(`d-${size}-block`);
+    });
+    test('should have anchor', () => {
+        const anchor = {
+            text: 'anchor',
+            url: 'https://github.com/gravity-ui/',
+        };
+        render(React.createElement(BlockBase, { anchor: anchor }));
+        const component = screen.getByTestId(qaIdByDefault);
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('id', anchor.url);
+    });
+});

package/build/esm/components/Button/Button.css

@@ -45,7 +45,4 @@ unpredictable css rules order in build */
 }
 .pc-button-block_size_xl {
   --btn-image-margin: 25px;
-}
-.pc-button-block_width_max .pc-button-block__text {
-  width: 100%;
 }

package/build/esm/components/Button/Button.js

@@ -14,7 +14,7 @@ const b = block('button-block');
 const Button = (props) => {
     const handleMetrika = useMetrika();
     const { lang, tld } = useContext(LocaleContext);
-    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text, width } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text", "width"]);
+    const { className, metrikaGoals, pixelEvents, analyticsEvents, size = 'l', theme = 'normal', url, img, onClick: onClickOrigin, text } = props, rest = __rest(props, ["className", "metrikaGoals", "pixelEvents", "analyticsEvents", "size", "theme", "url", "img", "onClick", "text"]);
     const defaultImgPosition = 'left';
     const handleAnalytics = useAnalytics(DefaultEventNames.Button, url);
     const onClick = useCallback((e) => {
@@ -24,13 +24,12 @@ const Button = (props) => {
             onClickOrigin(e);
         }
     }, [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin]);
-    const buttonModifiers = { size, theme, width };
     const buttonImg = img instanceof Object
         ? { url: img.url, position: img.position || defaultImgPosition, alt: img.alt }
         : { url: img, position: defaultImgPosition };
     const buttonClass = img
-        ? b(Object.assign({ position: buttonImg.position }, buttonModifiers), className)
-        : b(Object.assign({}, buttonModifiers), className);
+        ? b({ position: buttonImg.position, size, theme }, className)
+        : b({ size, theme }, className);
     const buttonProps = Object.assign(Object.assign({}, rest), { onClick });
     if (theme === 'app-store' || theme === 'google-play') {
         const platform = theme === 'app-store' ? Platform.IOS : Platform.ANDROID;
@@ -43,7 +42,7 @@ const Button = (props) => {
         image = undefined;
     }
     const buttonTheme = theme === 'scale' ? 'accent' : theme;
-    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined, width: width }, buttonProps),
+    return (React.createElement(CommonButton, Object.assign({ className: buttonClass, view: toCommonView(buttonTheme), size: toCommonSize(size), href: url ? setUrlTld(url, tld) : undefined }, buttonProps),
         icon && buttonImg.position === 'left' ? icon : null,
         React.createElement("span", { className: b('content') },
             image && buttonImg.position === 'left' ? image : null,

package/build/esm/components/Button/__tests__/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/Button/__tests__/Button.test.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from '../Button';
+import { ICON_QA } from '../utils';
+const qaId = 'button-component';
+const buttonProps = {
+    text: 'Button Text',
+    url: 'https://github.com/gravity-ui/',
+    target: '_blank',
+    img: {
+        url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/icon_1_light.svg',
+        position: 'left',
+        alt: 'alt-text',
+    },
+};
+const buttonViews = [
+    'normal',
+    'action',
+    'outlined',
+    'outlined-info',
+    'outlined-danger',
+    'raised',
+    'flat',
+    'flat-info',
+    'flat-danger',
+    'flat-secondary',
+    'normal-contrast',
+    'outlined-contrast',
+    'flat-contrast',
+    'github',
+    'scale',
+    'monochrome',
+];
+describe('Button', () => {
+    test('render button by default', async () => {
+        render(React.createElement(Button, { text: buttonProps.text }));
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toBeVisible();
+        expect(button).not.toBeDisabled();
+    });
+    test('should render <a /> tag', async () => {
+        render(React.createElement(Button, { text: buttonProps.text, url: buttonProps.url, target: buttonProps.target }));
+        const button = screen.getByRole('link');
+        expect(button).toBeVisible();
+        expect(button).toHaveAttribute('href', buttonProps.url);
+        expect(button).toHaveAttribute('target', buttonProps.target);
+    });
+    test('call onClick', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(React.createElement(Button, { text: buttonProps.text, onClick: handleOnClick }));
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+    });
+    test.each(new Array('s', 'm', 'l', 'xl'))('render with given "%s" size', (size) => {
+        render(React.createElement(Button, { text: buttonProps.text, size: size, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_size_${size}`);
+    });
+    test.each(new Array(...buttonViews))('render with given "%s" view', (theme) => {
+        render(React.createElement(Button, { text: buttonProps.text, theme: theme, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(`pc-button-block_theme_${theme}`);
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(Button, { text: buttonProps.text, className: className, qa: qaId }));
+        const button = screen.getByTestId(qaId);
+        expect(button).toHaveClass(className);
+    });
+    test('should render icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByRole('img');
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+    test('should render github icon', () => {
+        render(React.createElement(Button, { text: buttonProps.text, img: buttonProps.img, theme: "github" }));
+        const button = screen.getByRole('button');
+        const iconComponent = screen.getByTestId(ICON_QA);
+        expect(iconComponent).toBeVisible();
+        expect(button).toContainElement(iconComponent);
+    });
+});

package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/components/ButtonTabs/__tests__/ButtonTabs.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ButtonTabs from '../ButtonTabs';
+const qaId = 'button-tabs-component';
+const items = [
+    {
+        id: '0',
+        title: 'tab-1',
+    },
+    {
+        id: '1',
+        title: 'tab-2',
+    },
+    {
+        id: '2',
+        title: 'tab-3',
+    },
+];
+describe('ButtonTabs', () => {
+    test('render ButtonTabs by default', async () => {
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId }));
+        const buttonTabs = screen.getByTestId(qaId);
+        expect(buttonTabs).toBeInTheDocument();
+        expect(buttonTabs).toBeVisible();
+        expect(buttonTabs).not.toBeDisabled();
+    });
+    test('has active tab', async () => {
+        const activeTabId = 1;
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, activeTab: String(activeTabId) }));
+        const buttons = screen.getAllByRole('button');
+        buttons.forEach((button, index) => {
+            if (index === activeTabId) {
+                expect(button).toHaveClass('pc-button-tabs__item_active');
+            }
+            expect(button).toHaveClass('pc-button-block_theme_normal');
+        });
+    });
+    test('add className', () => {
+        const className = 'my-class';
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, className: className }));
+        const buttonTabs = screen.getByTestId(qaId);
+        expect(buttonTabs).toHaveClass(className);
+    });
+    test('call onSelectTab', async () => {
+        const user = userEvent.setup();
+        const handleOnClick = jest.fn();
+        render(React.createElement(ButtonTabs, { items: items, qa: qaId, onSelectTab: handleOnClick }));
+        const buttons = screen.getAllByRole('button');
+        buttons.forEach(async (button, i) => {
+            await user.click(button);
+            expect(handleOnClick).toHaveBeenCalledTimes(i + 1);
+        });
+    });
+});

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

@@ -1,10 +1,10 @@
 import { CSSProperties } from 'react';
 import { ImageProps } from '../Image/Image';
-import './FullScreenImage.css';
+import './FullscreenImage.css';
 export interface FullScreenImageProps extends ImageProps {
     imageClassName?: string;
     modalImageClass?: string;
     imageStyle?: CSSProperties;
 }
-declare const FullScreenImage: (props: FullScreenImageProps) => JSX.Element;
-export default FullScreenImage;
+declare const FullscreenImage: (props: FullScreenImageProps) => JSX.Element;
+export default FullscreenImage;

package/build/esm/components/FullscreenImage/FullscreenImage.js

@@ -4,20 +4,20 @@ import { FullScreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
 import Image from '../Image/Image';
 import i18n from './i18n';
-import './FullScreenImage.css';
+import './FullscreenImage.css';
 const b = block('FullScreenImage');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
-const FullScreenImage = (props) => {
+const FullscreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt') } = props;
     const [isOpened, setIsOpened] = useState(false);
     const [isMouseEnter, setIsMouseEnter] = useState(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
-    const showFullScreenIcon = () => setIsMouseEnter(true);
-    const hideFullScreenIcon = () => setIsMouseEnter(false);
+    const showFullscreenIcon = () => setIsMouseEnter(true);
+    const hideFullscreenIcon = () => setIsMouseEnter(false);
     return (React.createElement("div", { className: b() },
-        React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
+        React.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullscreenIcon, onMouseLeave: hideFullscreenIcon },
             React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             React.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
                 React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
@@ -27,4 +27,4 @@ const FullScreenImage = (props) => {
                     React.createElement(Icon, { data: PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
-export default FullScreenImage;
+export default FullscreenImage;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+import './FullscreenMedia.css';
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullScreen' | 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export interface FullScreenMediaProps {
+    /**
+     * @deprecated use showFullscreenIcon
+     */
+    showFullScreenIcon?: boolean;
+    showFullscreenIcon?: boolean;
+    children: (props?: ChildMediaRenderProps) => JSX.Element;
+}
+declare const FullscreenMedia: ({ children, showFullScreenIcon, showFullscreenIcon, }: FullScreenMediaProps) => JSX.Element;
+export default FullscreenMedia;

package/build/esm/components/FullscreenMedia/{FullScreenMedia.js → FullscreenMedia.js}

@@ -3,12 +3,12 @@ import { Icon, Modal } from '@gravity-ui/uikit';
 import { MobileContext } from '../../context/mobileContext';
 import { FullScreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
-import './FullScreenMedia.css';
+import './FullscreenMedia.css';
 const b = block('full-screen-media');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 30;
 const getMediaClass = (type) => b('modal-media', { type });
-const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
+const FullscreenMedia = ({ children, showFullScreenIcon = true, showFullscreenIcon = true, }) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
     const openModal = (e) => {
@@ -22,7 +22,7 @@ const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
             children({ className: b('inline-media') }),
-            showFullScreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+            showFullScreenIcon && showFullscreenIcon && (React.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
                 React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
         isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             React.createElement("div", { className: b('modal-content') },
@@ -35,4 +35,4 @@ const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
                     fullScreen: true,
                 }))))));
 };
-export default FullScreenMedia;
+export default FullscreenMedia;

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

@@ -5,7 +5,6 @@ export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDevi
     className?: string;
     onClick?: MouseEventHandler;
     containerClassName?: string;
-    qa?: string;
 }
 declare const Image: (props: ImageProps) => JSX.Element | null;
 export default Image;

package/build/esm/components/Image/Image.js

@@ -9,7 +9,7 @@ const checkWebP = (src) => {
 };
 const Image = (props) => {
     const projectSettings = useContext(ProjectSettingsContext);
-    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, qa, } = props;
+    const { src: imageSrc, alt = i18n('img-alt'), disableCompress, tablet, desktop, mobile, style, className, onClick, containerClassName, } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
     const src = imageSrc || desktop;
     if (!src) {
@@ -19,7 +19,7 @@ const Image = (props) => {
         disableCompress ||
         !isCompressible(src) ||
         imgLoadingError;
-    return (React.createElement("picture", { className: containerClassName, "data-qa": qa },
+    return (React.createElement("picture", { className: containerClassName },
         mobile && (React.createElement(Fragment, null,
             !disableWebp && (React.createElement("source", { srcSet: checkWebP(mobile), type: "image/webp", media: `(max-width: ${BREAKPOINTS.sm}px)` })),
             React.createElement("source", { srcSet: mobile, media: `(max-width: ${BREAKPOINTS.sm}px)` }))),

package/build/esm/components/Media/FullscreenVideo/FullscreenVideo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoAllProps } from '../Video/Video';
+declare const FullscreenVideo: React.FC<VideoAllProps>;
+export default FullscreenVideo;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import FullscreenMedia from '../../FullscreenMedia/FullscreenMedia';
+import Video from '../Video/Video';
+const FullscreenVideo = (props) => {
+    return (React.createElement(FullscreenMedia, null, (classNames) => React.createElement(Video, Object.assign({}, props, classNames))));
+};
+export default FullscreenVideo;

package/build/esm/components/Media/Image/Image.d.ts

@@ -3,6 +3,7 @@ import './Image.css';
 export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
+    fullscreen?: boolean;
 }
 interface InnerImageProps {
     hasVideoFallback: boolean;

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

@@ -5,13 +5,13 @@ import SliderBlock from '../../../blocks/Slider/Slider';
 import { SliderType } from '../../../models';
 import { block } from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
-import FullScreenImage from '../../FullscreenImage/FullscreenImage';
+import FullscreenImage from '../../FullscreenImage/FullscreenImage';
 import ImageView from '../../Image/Image';
 import { getMediaImage } from './utils';
 import './Image.css';
 const b = block('media-component-image');
 const Image = (props) => {
-    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video } = props;
+    const { parallax, image, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, } = props;
     const [scrollY, setScrollY] = useState(0);
     const [{ springScrollY }, springSetScrollY] = useSpring(() => ({
         springScrollY: 0,
@@ -32,10 +32,10 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const imageSlider = (imageArray) => (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => {
+    const fullscreenImage = (item) => {
         const itemData = getMediaImage(item);
-        return (React.createElement(FullScreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
-    })));
+        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height } })));
+    };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
         return (React.createElement(animated.div, { style: { transform: parallaxInterpolate } },
@@ -45,9 +45,16 @@ const Image = (props) => {
         const imageData = getMediaImage(oneImage);
         return React.createElement(ImageView, Object.assign({}, imageData, { className: imageClass, style: { height } }));
     };
+    const imageSlider = (imageArray) => {
+        const fullscreenItem = fullscreen === undefined || fullscreen;
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item) => fullscreenItem ? fullscreenImage(item) : imageOnly(item))));
+    };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
+    if (fullscreen) {
+        return fullscreenImage(image);
+    }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };
 export default Image;

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

@@ -2,24 +2,44 @@ import React, { useMemo, useState } from 'react';
 import { block } from '../../utils';
 import YoutubeBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
+import FullscreenVideo from './FullscreenVideo/FullscreenVideo';
 import Image from './Image/Image';
 import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, analyticsEvents, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, fullscreen, analyticsEvents, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullScreen || fullscreen }));
         }
         if (video) {
-            result.push(React.createElement(Video, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, analyticsEvents: analyticsEvents, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
+            const videoProps = {
+                key: 'video',
+                video,
+                videoClassName,
+                height,
+                metrika,
+                analyticsEvents,
+                playVideo,
+                previewImg,
+                playButton,
+                customBarControlsClassName,
+                hasVideoFallback,
+                setHasVideoFallback,
+            };
+            if (fullScreen || fullscreen) {
+                result.push(React.createElement(FullscreenVideo, Object.assign({}, videoProps)));
+            }
+            else {
+                result.push(React.createElement(Video, Object.assign({}, videoProps)));
+            }
         }
         if (youtube) {
-            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
+            result = (React.createElement(YoutubeBlock, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullscreen: fullScreen || fullscreen }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -44,6 +64,7 @@ export const Media = (props) => {
         customBarControlsClassName,
         youtubeClassName,
         fullScreen,
+        fullscreen,
     ]);
     return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

package/build/esm/components/Media/Video/Video.d.ts

@@ -11,6 +11,6 @@ interface InnerVideoProps {
     setHasVideoFallback: React.Dispatch<boolean>;
     hasVideoFallback: boolean;
 }
-type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
+export type VideoAllProps = VideoAdditionProps & MediaComponentVideoProps & InnerVideoProps;
 declare const Video: (props: VideoAllProps) => JSX.Element | null;
 export default Video;

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

@@ -14,7 +14,11 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
+    /**
+     * @deprecated use fullscreen
+     */
     fullScreen?: boolean;
+    fullscreen?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

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

@@ -35,7 +35,7 @@ export function getHeight(width) {
     return (width / 16) * 9;
 }
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen, fullscreen, } = props;
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
     const iframeRef = useRef();
@@ -78,14 +78,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen, fullscreen]);
     useEffect(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (React.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && !fullscreen && (React.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         React.createElement(Image, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (React.createElement("button", { className: b('button') },
             React.createElement(Icon, { className: b('icon'), data: PlayVideo, size: 24 })))))));