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

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, 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 }));
         }
         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) {
+                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 }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });
@@ -43,7 +63,7 @@ export const Media = (props) => {
         playButton,
         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,7 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
-    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 } = 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]);
     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 && (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 })))))));

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

@@ -33,6 +33,6 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
-export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/esm/components/index.js

@@ -33,4 +33,4 @@ export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
-export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
+export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';

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

@@ -23,7 +23,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;

package/build/esm/grid/Col/Col.d.ts

@@ -7,4 +7,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     dataQa?: string;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "sizes" | "offsets" | "orders" | "hidden" | "visible" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "className" | "reset" | "visible" | "sizes" | "offsets" | "orders" | "hidden" | "alignSelf" | "justifyContent" | "dataQa"> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/icons/Fullscreen.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Fullscreen: React.FC<React.SVGProps<SVGSVGElement>>;

package/build/esm/icons/{FullScreen.js → Fullscreen.js}

@@ -1,4 +1,4 @@
 import React from 'react';
 import { a11yHiddenSvgProps } from '../utils/svg';
-export const FullScreen = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, a11yHiddenSvgProps, props),
+export const Fullscreen = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, a11yHiddenSvgProps, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18 4.654v.291a10 10 0 0 0-1.763 1.404l-2.944 2.944a1 1 0 0 0 1.414 1.414l2.933-2.932A9.996 9.996 0 0 0 19.05 6h.296l-.09.39A9.993 9.993 0 0 0 19 8.64v.857a1 1 0 0 0 2 0V4.503a1.5 1.5 0 0 0-1.5-1.5L14.5 3a1 1 0 1 0 0 2h.861a10 10 0 0 0 2.249-.256l.39-.09zM4.95 18a10 10 0 0 1 1.41-1.775l2.933-2.932a1 1 0 0 1 1.414 1.414l-2.944 2.944A9.998 9.998 0 0 1 6 19.055v.291l.39-.09A9.993 9.993 0 0 1 8.64 19h.86a1 1 0 0 1 0 2l-5-.003a1.5 1.5 0 0 1-1.5-1.5V14.5a1 1 0 1 1 2 0v.861a10 10 0 0 1-.256 2.249l-.09.39h.296z" })));

package/build/esm/icons/index.d.ts

@@ -1,7 +1,7 @@
 export * from './ArrowConstructor';
 export * from './ArrowSidebar';
 export * from './Chevron';
-export * from './FullScreen';
+export * from './Fullscreen';
 export * from './Github';
 export * from './NavigationChevron';
 export * from './PlayVideo';

package/build/esm/icons/index.js

@@ -1,7 +1,7 @@
 export * from './ArrowConstructor';
 export * from './ArrowSidebar';
 export * from './Chevron';
-export * from './FullScreen';
+export * from './Fullscreen';
 export * from './Github';
 export * from './NavigationChevron';
 export * from './PlayVideo';

package/build/esm/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/esm/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/esm/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/esm/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/esm/schema/validators/common.js

@@ -453,6 +453,9 @@ export const MediaProps = {
         type: 'string',
     },
     dataLens: DataLensProps,
+    fullscreen: {
+        type: 'boolean',
+    },
 };
 export const YMapMarkerLabel = {
     type: 'object',

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

@@ -1,4 +1,4 @@
 import { LayoutItemProps } from '../../models';
 import './LayoutItem.css';
-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/esm/sub-blocks/LayoutItem/LayoutItem.js

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { Content } from '..';
-import { FullScreenMedia, Media, MetaInfo } from '../../components';
+import { FullscreenMedia, Media, MetaInfo } from '../../components';
 import { block } from '../../utils';
-import { getLayoutItemLinks, hasFullScreen, showFullScreenIcon } from './utils';
+import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
 const b = block('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullScreen, className } = _a;
+    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, className } = _a;
     return (React.createElement("div", { className: b(null, className) },
-        fullScreen && hasFullScreen(media) ? (React.createElement(FullScreenMedia, { showFullScreenIcon: showFullScreenIcon(media) }, (_a = {}) => {
-            var { className: mediaClassName } = _a, fullScreenMediaProps = __rest(_a, ["className"]);
-            return (React.createElement(Media, Object.assign({}, media, fullScreenMediaProps, { className: b('media', { border }, mediaClassName) })));
+        fullscreen && hasFullscreen(media) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(media) }, (_a = {}) => {
+            var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
+            return (React.createElement(Media, Object.assign({}, media, fullscreenMediaProps, { className: b('media', { border }, mediaClassName) })));
         })) : (React.createElement(Media, Object.assign({}, media, { className: b('media', { border }) }))),
         metaInfo && React.createElement(MetaInfo, { items: metaInfo, className: b('meta-info') }),
         React.createElement("div", { className: b('content') },

package/build/esm/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/esm/sub-blocks/LayoutItem/schema.js

@@ -8,7 +8,7 @@ export const LayoutItem = {
     required: ['content', 'media'],
     properties: Object.assign(Object.assign({}, BaseProps), { media: MediaProps, content: omit(ContentBase, ['colSize', 'size', 'centered']), metaInfo: metaInfo, border: {
             type: 'boolean',
-        }, fullScreen: {
+        }, fullscreen: {
             type: 'boolean',
         } }),
 };

package/build/esm/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/esm/sub-blocks/LayoutItem/utils.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.0.0-alpha.6",
+  "version": "4.0.0-beta.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -139,8 +139,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

package/server/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/server/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/server/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/components/FullscreenMedia/FullScreenMedia.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { MediaAllProps } from '../Media/Media';
-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/cjs/icons/FullScreen.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const FullScreen: React.FC<React.SVGProps<SVGSVGElement>>;

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

@@ -1,10 +0,0 @@
-/// <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/icons/FullScreen.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const FullScreen: React.FC<React.SVGProps<SVGSVGElement>>;