@gravity-ui/page-constructor 3.0.0-alpha.6 → 4.0.0-beta.0

package/build/cjs/icons/index.js

@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrowConstructor"), exports);
 tslib_1.__exportStar(require("./ArrowSidebar"), exports);
 tslib_1.__exportStar(require("./Chevron"), exports);
-tslib_1.__exportStar(require("./FullScreen"), exports);
+tslib_1.__exportStar(require("./Fullscreen"), exports);
 tslib_1.__exportStar(require("./Github"), exports);
 tslib_1.__exportStar(require("./NavigationChevron"), exports);
 tslib_1.__exportStar(require("./PlayVideo"), exports);

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

@@ -212,7 +212,7 @@ export interface TabsBlockProps extends Animatable {
     items: TabsBlockItem[];
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleItemProps | string;
+    title?: TitleItemProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

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

@@ -169,7 +169,7 @@ export interface MediaComponentVideoProps extends AnalyticsEventsBase {
 export interface MediaComponentYoutubeProps {
     youtube: string;
     previewImg?: string;
-    fullScreen?: boolean;
+    fullscreen?: boolean;
 }
 export interface MediaComponentImageProps {
     image: ImageProps | ImageProps[] | ImageDeviceProps;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -94,7 +94,7 @@ export interface LayoutItemProps extends ClassNameProps {
     media: MediaProps;
     metaInfo?: string[];
     border?: boolean;
-    fullScreen?: boolean;
+    fullscreen?: boolean;
 }
 export type DividerModel = {
     type: SubBlockType.Divider;

package/build/cjs/schema/validators/common.d.ts

@@ -1114,6 +1114,9 @@ export declare const MediaProps: {
             type: string;
         })[];
     };
+    fullscreen: {
+        type: string;
+    };
 };
 export declare const YMapMarkerLabel: {
     type: string;

package/build/cjs/schema/validators/common.js

@@ -457,6 +457,9 @@ exports.MediaProps = {
         type: 'string',
     },
     dataLens: exports.DataLensProps,
+    fullscreen: {
+        type: 'boolean',
+    },
 };
 exports.YMapMarkerLabel = {
     type: 'object',

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,3 +1,3 @@
 import { LayoutItemProps } from '../../models';
-declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js

@@ -8,11 +8,11 @@ const utils_1 = require("../../utils");
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullScreen, className } = _a;
+    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className } = _a;
     return (react_1.default.createElement("div", { className: b(null, className) },
-        fullScreen && (0, utils_2.hasFullScreen)(media) ? (react_1.default.createElement(components_1.FullScreenMedia, { showFullScreenIcon: (0, utils_2.showFullScreenIcon)(media) }, (_a = {}) => {
-            var { className: mediaClassName } = _a, fullScreenMediaProps = tslib_1.__rest(_a, ["className"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullScreenMediaProps, { className: b('media', { border }, mediaClassName) })));
+        fullscreen && (0, utils_2.hasFullscreen)(media) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(media) }, (_a = {}) => {
+            var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName) })));
         })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }) }))),
         metaInfo && react_1.default.createElement(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }),
         react_1.default.createElement("div", { className: b('content') },

package/build/cjs/sub-blocks/LayoutItem/schema.d.ts

@@ -132,6 +132,9 @@ export declare const LayoutItem: {
                     type: string;
                 })[];
             };
+            fullscreen: {
+                type: string;
+            };
         };
         content: Partial<{
             title: {
@@ -209,7 +212,7 @@ export declare const LayoutItem: {
         border: {
             type: string;
         };
-        fullScreen: {
+        fullscreen: {
             type: string;
         };
         type: {};

package/build/cjs/sub-blocks/LayoutItem/schema.js

@@ -12,7 +12,7 @@ exports.LayoutItem = {
     required: ['content', 'media'],
     properties: Object.assign(Object.assign({}, common_1.BaseProps), { media: common_1.MediaProps, content: (0, lodash_1.omit)(schema_2.ContentBase, ['colSize', 'size', 'centered']), metaInfo: schema_1.default, border: {
             type: 'boolean',
-        }, fullScreen: {
+        }, fullscreen: {
             type: 'boolean',
         } }),
 };

package/build/cjs/sub-blocks/LayoutItem/utils.d.ts

@@ -24,5 +24,5 @@ export declare const getLayoutItemLinks: (links: LayoutItemProps['content']['lin
     }[] | undefined;
     className?: string | undefined;
 }[] | undefined;
-export declare const hasFullScreen: ({ dataLens, image }: MediaProps) => boolean;
-export declare const showFullScreenIcon: ({ youtube }: MediaProps) => boolean;
+export declare const hasFullscreen: ({ dataLens, image }: MediaProps) => boolean;
+export declare const showFullscreenIcon: ({ youtube }: MediaProps) => boolean;

package/build/cjs/sub-blocks/LayoutItem/utils.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showFullScreenIcon = exports.hasFullScreen = exports.getLayoutItemLinks = void 0;
+exports.showFullscreenIcon = exports.hasFullscreen = exports.getLayoutItemLinks = void 0;
 const getLayoutItemLinks = (links) => links === null || links === void 0 ? void 0 : links.map((link) => (Object.assign({ theme: 'normal' }, link)));
 exports.getLayoutItemLinks = getLayoutItemLinks;
-const hasFullScreen = ({ dataLens, image }) => {
-    // datalens and slider media card don't support fullScreen mode
+const hasFullscreen = ({ dataLens, image }) => {
+    // datalens and slider media card don't support fullscreen mode
     return !(dataLens || Array.isArray(image));
 };
-exports.hasFullScreen = hasFullScreen;
-const showFullScreenIcon = ({ youtube }) => !youtube;
-exports.showFullScreenIcon = showFullScreenIcon;
+exports.hasFullscreen = hasFullscreen;
+const showFullscreenIcon = ({ youtube }) => !youtube;
+exports.showFullscreenIcon = showFullscreenIcon;

package/build/cjs/sub-blocks/MediaCard/schema.d.ts

@@ -134,6 +134,9 @@ export declare const MediaCardBlock: {
                     type: string;
                 })[];
             };
+            fullscreen: {
+                type: string;
+            };
             type: {};
             when: {};
         };

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -10,6 +10,6 @@ const DEFAULT_SIZES = {
 };
 const b = block('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
-    React.createElement(Title, { title: title, subtitle: description }),
+    (title || description) && React.createElement(Title, { title: title, subtitle: description }),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

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

@@ -1,6 +1,6 @@
 export declare const CardLayoutProps: {
     additionalProperties: boolean;
-    required: string[];
+    required: never[];
     properties: {
         colSizes: {
             type: string;
@@ -76,7 +76,7 @@ export declare const CardLayoutProps: {
 export declare const CardLayoutBlock: {
     'card-layout-block': {
         additionalProperties: boolean;
-        required: string[];
+        required: never[];
         properties: {
             colSizes: {
                 type: string;

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

@@ -1,7 +1,7 @@
 import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, containerSizesObject, } from '../../schema/validators/common';
 export const CardLayoutProps = {
     additionalProperties: false,
-    required: ['title'],
+    required: [],
     properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { colSizes: containerSizesObject, children: ChildrenCardsProps }),
 };
 export const CardLayoutBlock = {

package/build/esm/blocks/FilterBlock/FilterBlock.js

@@ -1,10 +1,10 @@
 import React, { useMemo, useState } from 'react';
+import { CardLayoutBlock } from '..';
 import { AnimateBlock, Title } from '../../components';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
-import { ConstructorBlocks } from '../../containers/PageConstructor/components/ConstructorBlocks';
+import { ConstructorItem } from '../../containers/PageConstructor/components/ConstructorItem';
 import { Col, Row } from '../../grid';
-import { BlockType } from '../../models';
-import { block } from '../../utils';
+import { block, getBlockKey } from '../../utils';
 import i18n from './i18n';
 import './FilterBlock.css';
 const b = block('filter-block');
@@ -22,25 +22,21 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
-    const container = useMemo(() => {
+    const cards = useMemo(() => {
         const itemsToShow = actualTag
             ? items.filter((item) => item.tags.includes(actualTag))
             : items;
-        return [
-            {
-                type: BlockType.CardLayoutBlock,
-                title: '',
-                colSizes: colSizes,
-                children: itemsToShow.map((item) => item.card),
-            },
-        ];
-    }, [actualTag, items, colSizes]);
+        return itemsToShow.map((item) => item.card);
+    }, [actualTag, items]);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         title && (React.createElement(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })),
         tabButtons.length && (React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         React.createElement(Row, { className: b('block-container') },
-            React.createElement(ConstructorBlocks, { items: container }))));
+            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+                const key = getBlockKey(card, index);
+                return React.createElement(ConstructorItem, { data: card, blockKey: key, key: key });
+            })))));
 };
 export default FilterBlock;

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

@@ -137,6 +137,9 @@ export declare const HeaderBackgroundProps: {
                 type: string;
             })[];
         };
+        fullscreen: {
+            type: string;
+        };
     };
 };
 export declare const HeaderProperties: {
@@ -424,6 +427,9 @@ export declare const HeaderProperties: {
                         type: string;
                     })[];
                 };
+                fullscreen: {
+                    type: string;
+                };
             };
         } | {
             type: string;
@@ -757,6 +763,9 @@ export declare const HeaderBlock: {
                                 type: string;
                             })[];
                         };
+                        fullscreen: {
+                            type: string;
+                        };
                     };
                 } | {
                     type: string;

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

@@ -294,6 +294,9 @@ export declare const HeaderSliderBlock: {
                                             type: string;
                                         })[];
                                     };
+                                    fullscreen: {
+                                        type: string;
+                                    };
                                 };
                             } | {
                                 type: string;

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

@@ -131,6 +131,9 @@ export declare const Media: {
                 type: string;
             })[];
         };
+        fullscreen: {
+            type: string;
+        };
     };
 };
 export declare const MediaBlockBaseProps: {
@@ -608,6 +611,9 @@ export declare const MediaBlock: {
                             type: string;
                         })[];
                     };
+                    fullscreen: {
+                        type: string;
+                    };
                 };
             };
             description: {

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

@@ -146,6 +146,9 @@ export declare const PromoFeaturesItem: {
                         type: string;
                     })[];
                 };
+                fullscreen: {
+                    type: string;
+                };
             };
         };
     };

package/build/esm/blocks/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useContext, useRef, useState } from 'react';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
-import FullScreenImage from '../../components/FullscreenImage/FullscreenImage';
+import FullscreenImage from '../../components/FullscreenImage/FullscreenImage';
 import { getMediaImage } from '../../components/Media/Image/utils';
 import Media from '../../components/Media/Media';
 import Title from '../../components/Title/Title';
@@ -44,7 +44,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
         }, className: b('col', { centered: centered }) },
         React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
         imageProps && (React.createElement(Fragment, null,
-            React.createElement(FullScreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
+            React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));
     const onSelectTab = (id, e) => {
         setActiveTab(id);

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

@@ -142,6 +142,9 @@ export declare const tabsItem: {
                             type: string;
                         })[];
                     };
+                    fullscreen: {
+                        type: string;
+                    };
                 };
             } | {
                 type: string;

package/build/esm/components/FullscreenImage/{FullScreenImage.css → FullscreenImage.css}

@@ -1,24 +1,24 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-FullScreenImage__image {
+.pc-fullscreen-image__image {
   cursor: pointer;
 }
-.pc-FullScreenImage__image-wrapper {
+.pc-fullscreen-image__image-wrapper {
   position: relative;
 }
-.pc-FullScreenImage__modal-content {
+.pc-fullscreen-image__modal-content {
   position: relative;
 }
-.pc-FullScreenImage__modal-image {
+.pc-fullscreen-image__modal-image {
   display: block;
   max-width: 1232px;
   max-height: 70vh;
   overflow: hidden;
 }
-.pc-FullScreenImage__modal .yc-modal__content, .pc-FullScreenImage__modal-image {
+.pc-fullscreen-image__modal .yc-modal__content, .pc-fullscreen-image__modal-image {
   border-radius: var(--pc-border-radius);
 }
-.pc-FullScreenImage__icon-wrapper {
+.pc-fullscreen-image__icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -33,28 +33,28 @@ unpredictable css rules order in build */
   opacity: 0;
   transition: 0.3s;
 }
-.pc-FullScreenImage__icon-wrapper_visible {
+.pc-fullscreen-image__icon-wrapper_visible {
   opacity: 1;
 }
-.pc-FullScreenImage__icon {
+.pc-fullscreen-image__icon {
   color: var(--yc-color-text-hint);
 }
-.pc-FullScreenImage__icon_hover:hover {
+.pc-fullscreen-image__icon_hover:hover {
   color: var(--yc-color-text-secondary);
 }
 @media (max-width: 1185px) {
-  .pc-FullScreenImage__modal-image {
+  .pc-fullscreen-image__modal-image {
     width: 100%;
   }
 }
 @media (max-width: 1081px) {
-  .pc-FullScreenImage__image {
+  .pc-fullscreen-image__image {
     pointer-events: none;
   }
-  .pc-FullScreenImage__icon-wrapper {
+  .pc-fullscreen-image__icon-wrapper {
     display: none;
   }
-  .pc-FullScreenImage__modal {
+  .pc-fullscreen-image__modal {
     display: none !important; /* stylelint-disable-line declaration-no-important */
   }
 }

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

@@ -1,10 +1,10 @@
 import { CSSProperties } from 'react';
 import { ImageProps } from '../Image/Image';
-import './FullScreenImage.css';
-export interface FullScreenImageProps extends ImageProps {
+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

@@ -1,30 +1,30 @@
 import React, { useState } from 'react';
 import { Icon, Modal } from '@gravity-ui/uikit';
-import { FullScreen, PreviewClose } from '../../icons';
+import { Fullscreen, PreviewClose } from '../../icons';
 import { block } from '../../utils';
 import Image from '../Image/Image';
 import i18n from './i18n';
-import './FullScreenImage.css';
-const b = block('FullScreenImage');
+import './FullscreenImage.css';
+const b = block('fullscreen-image');
 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') }))),
+                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') },
                 React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
                     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/FullscreenImage/i18n/index.js

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

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

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

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

@@ -1,14 +1,14 @@
 import React, { useContext, useState } from 'react';
 import { Icon, Modal } from '@gravity-ui/uikit';
 import { MobileContext } from '../../context/mobileContext';
-import { FullScreen, PreviewClose } from '../../icons';
+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 }) => {
     const [isOpened, setIsOpened] = useState(false);
     const isMobile = useContext(MobileContext);
     const openModal = (e) => {
@@ -22,8 +22,8 @@ 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 },
-                React.createElement(Icon, { data: FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
+            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') },
                 React.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
@@ -32,7 +32,7 @@ const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
                     imageClassName: getMediaClass('image'),
                     videoClassName: getMediaClass('video'),
                     youtubeClassName: getMediaClass('youtube'),
-                    fullScreen: true,
+                    fullscreen: true,
                 }))))));
 };
-export default FullScreenMedia;
+export default FullscreenMedia;

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 renderFullscreenImage = (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 ? renderFullscreenImage(item) : imageOnly(item))));
+    };
     if (Array.isArray(image)) {
         return imageSlider(image);
     }
+    if (fullscreen) {
+        return renderFullscreenImage(image);
+    }
     return isBackground ? imageBackground(image) : imageOnly(image);
 };
 export default Image;