@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

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

@@ -1,5 +1,5 @@
 import { filteredItem } from '../../schema/validators/utils';
-export const urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
+export const imageUrlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
 const ImageBase = {
     alt: {
         type: 'string',
@@ -13,12 +13,12 @@ export const ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
     required: ['desktop', 'mobile'],
-    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: urlPattern }, tablet: {
+    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: imageUrlPattern }, tablet: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         }, mobile: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         } }),
 };
 export const ImageObjectProps = {
@@ -27,16 +27,17 @@ export const ImageObjectProps = {
     required: ['src'],
     properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         } }),
 };
 export const ImageProps = {
     oneOf: [
         {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
+            optionName: 'url',
         },
-        filteredItem(Object.assign({}, ImageObjectProps)),
-        filteredItem(Object.assign({}, ImageDeviceProps)),
+        filteredItem(Object.assign(Object.assign({}, ImageObjectProps), { optionName: 'options' })),
+        filteredItem(Object.assign(Object.assign({}, ImageDeviceProps), { optionName: 'device options' })),
     ],
 };

package/build/esm/components/Link/Link.css

@@ -5,7 +5,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
   display: flex;
@@ -15,14 +15,14 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-link-block__link:hover, .pc-link-block__link:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-link-block__link_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-link-block__link_has-arrow {
   display: inherit;
@@ -30,7 +30,7 @@ unpredictable css rules order in build */
 }
 .pc-link-block__link_has-arrow:hover, .pc-link-block__link_has-arrow:active {
   --pc-text-header-color: inherit;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-link-block__link_has-arrow .pc-link-block__content {
   white-space: normal;
@@ -39,7 +39,7 @@ unpredictable css rules order in build */
   transform: translateX(5px) rotate(-90deg);
 }
 .pc-link-block__link.pc-link-block__link_has-arrow.pc-link-block__link_theme_dark:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-link-block__arrow {
   position: relative;
@@ -48,17 +48,17 @@ unpredictable css rules order in build */
   transform: rotate(-90deg);
 }
 .pc-link-block_size_l {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-link-block_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-link-block_size_m .pc-link-block__arrow {
   top: 1px;
 }
 .pc-link-block_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }

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

@@ -21,8 +21,9 @@ const Image = (props) => {
     useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', _.debounce(handleScroll, 5), { passive: true });
-            return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
+            const debouncedHandler = _.debounce(handleScroll, 5);
+            window.addEventListener('scroll', debouncedHandler, { passive: true });
+            return () => window.removeEventListener('scroll', debouncedHandler);
         }
         return () => { };
     });
@@ -38,7 +39,7 @@ const Image = (props) => {
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
-        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate } },
+        return (React.createElement(animated.div, { style: { transform: parallaxInterpolate || 'none' } },
             React.createElement(BackgroundImage, Object.assign({}, imageData, { className: imageClass, style: { height } }))));
     };
     const imageOnly = (oneImage) => {

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

@@ -39,7 +39,7 @@ export const Media = (props) => {
             }
         }
         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, analyticsEvents: analyticsEvents }));
         }
         if (dataLens) {
             result = React.createElement(DataLens, { dataLens: dataLens });

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

@@ -45,6 +45,7 @@ const Video = (props) => {
         return video.src.length && !hasVideoFallback ? (React.createElement("div", { className: b('wrap', videoClassName), style: { height } },
             React.createElement("video", { disablePictureInPicture: true, playsInline: true, 
                 // @ts-ignore
+                // eslint-disable-next-line react/no-unknown-property
                 pip: "false", className: b('item'), ref: ref, preload: "metadata", muted: true }, getVideoTypesWithPriority(video.src).map(({ src, type }, index) => (React.createElement("source", { key: index, src: src, type: type })))))) : null;
     }, [video, videoClassName, hasVideoFallback, height]);
     switch (video.type) {

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

@@ -4,9 +4,9 @@ import { block } from '../../utils';
 import './MediaBaseContent.css';
 const b = block('media-base-content');
 const MediaContent = (props) => {
-    const { title, description, button, links, buttons = [], additionalInfo, size = 'l' } = props;
+    const { title, description, button, links, buttons = [], additionalInfo, size = 'l', list, } = props;
     const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;
     return (React.createElement("div", { className: b() },
-        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
+        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, list: list, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
 };
 export default MediaContent;

package/build/esm/components/MetaInfo/MetaInfo.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-meta-info {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   display: flex;
   align-items: center;
   font-weight: 500;

package/build/esm/components/MetaInfo/MetaInfo.js

@@ -2,5 +2,5 @@ import React from 'react';
 import { block } from '../../utils';
 import './MetaInfo.css';
 const b = block('meta-info');
-const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+const MetaInfo = ({ items, className }) => (React.createElement("h4", { className: b(null, className) }, items.map((metaInfoItem) => (React.createElement("span", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
 export default MetaInfo;

package/build/esm/components/OverflowScroller/OverflowScroller.css

@@ -28,7 +28,7 @@
   width: 32px;
   height: calc(100% - 1px);
   cursor: pointer;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-overflow-scroller__arrow_type_left {
   left: 0;

package/build/esm/components/ReactPlayer/CustomBarControls.css

@@ -12,7 +12,7 @@ unpredictable css rules order in build */
   position: relative;
   width: 64px;
   height: 64px;
-  background: var(--yc-color-base-background);
+  background: var(--g-color-base-background);
   transition: background-color 300ms;
 }
 .pc-CustomBarControls__button:hover {

package/build/esm/components/ReactPlayer/ReactPlayer.css

@@ -28,8 +28,8 @@ unpredictable css rules order in build */
   border-radius: 166px;
 }
 .pc-ReactPlayer__button_theme_blue {
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
 }
 .pc-ReactPlayer__button_theme_grey {
   color: var(--pc-text-header-color);

package/build/esm/components/Table/Table.css

@@ -1,8 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-table {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
   margin-top: 32px;
 }
 .pc-table__table {
@@ -16,7 +16,7 @@ unpredictable css rules order in build */
   font-weight: 500;
 }
 .pc-table__row:first-child .pc-table__cell {
-  border-bottom-color: var(--yc-color-line-generic-active);
+  border-bottom-color: var(--g-color-line-generic-active);
   align-items: flex-end;
   padding-top: 0;
 }
@@ -25,7 +25,7 @@ unpredictable css rules order in build */
   display: flex;
   flex: 1;
   align-items: center;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-table__cell:first-child {
   flex: 2;
@@ -49,18 +49,18 @@ unpredictable css rules order in build */
   box-sizing: border-box;
 }
 .pc-table__marker_type_disk.pc-table__marker_index_0 {
-  background-color: var(--yc-color-infographics-neutral-light);
+  background-color: var(--g-color-base-neutral-light);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_1 {
-  background-color: var(--yc-my-color-brand-normal);
+  background-color: var(--g-color-base-brand);
 }
 .pc-table__marker_type_disk.pc-table__marker_index_2 {
-  border: 1px solid var(--yc-color-text-hint);
+  border: 1px solid var(--g-color-text-hint);
 }
 .pc-table__legend {
   display: flex;
   margin-top: 20px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-table__legend-item {
   display: flex;

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

@@ -4,13 +4,13 @@ unpredictable css rules order in build */
   margin-top: 12px;
 }
 .pc-title__description .yfm {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-title__description_titleSize_s, .pc-title__description_titleSize_xs {
   margin-top: 8px;
 }
 .pc-title__description_titleSize_s .yfm, .pc-title__description_titleSize_xs .yfm {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }

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

@@ -11,42 +11,42 @@ unpredictable css rules order in build */
   text-align: right;
 }
 .pc-title-item_size_xs {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 .pc-title-item_size_s {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   margin-top: 32px;
 }
 .pc-title-item_size_m {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   margin-top: 48px;
 }
 @media (max-width: 576px) {
   .pc-title-item_size_m {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-title-item_size_l {
-  font-size: var(--yc-text-display-4-font-size);
-  line-height: var(--yc-text-display-4-line-height);
+  font-size: var(--g-text-display-4-font-size);
+  line-height: var(--g-text-display-4-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   margin-top: 96px;
 }
 @media (max-width: 577px) {
   .pc-title-item_size_l {
-    font-size: var(--yc-text-display-2-font-size);
-    line-height: var(--yc-text-display-2-line-height);
+    font-size: var(--g-text-display-2-font-size);
+    line-height: var(--g-text-display-2-line-height);
   }
 }
 .pc-title-item__arrow {
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
 }
 .pc-title-item__text a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -92,8 +92,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-title-item__text a:hover, .pc-title-item__text a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-title-item__wrapper {
   white-space: nowrap;

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

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

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

@@ -22,7 +22,7 @@ export function getArrowSize(size, isMobile) {
 }
 const TitleItem = (props) => {
     const isMobile = useContext(MobileContext);
-    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, dataQa, resetMargin = true, } = props;
+    const { textSize = 'm', text, anchor, justify, url, onClick, custom, className, qa, resetMargin = true, } = props;
     const { hostname } = useContext(LocationContext);
     const textMarkup = (React.createElement(React.Fragment, null,
         React.createElement(HTML, { className: b('text') }, text),
@@ -47,7 +47,7 @@ const TitleItem = (props) => {
         anchor && React.createElement(Anchor, { id: anchor, className: b('anchor') }),
         React.createElement(getHeaderTag(textSize), {
             className: b({ size: textSize, justify, 'reset-margin': resetMargin }, className),
-            'data-qa': `${dataQa}-header`,
+            'data-qa': `${qa}-header`,
         }, content)));
 };
 export default TitleItem;

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

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

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

@@ -39,8 +39,8 @@ unpredictable css rules order in build */
   position: absolute;
   width: 64px;
   height: 64px;
-  color: var(--yc-color-base-background);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-base-background);
+  background-color: var(--g-color-base-brand);
   border-radius: 50%;
 }
 .pc-VideoBlock__icon {

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import { AnalyticsEventsBase } from '../../models/common';
 import './VideoBlock.css';
 export declare const AUTOPLAY_ATTRIBUTES: {
     autoplay: number;
     mute: number;
 };
 export declare function getHeight(width: number): number;
-export interface VideoBlockProps {
+export interface VideoBlockProps extends AnalyticsEventsBase {
     id?: string;
     stream?: string;
     record?: string;

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

@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Icon } from '@gravity-ui/uikit';
 import _ from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
+import { useAnalytics } from '../../hooks/useAnalytics';
 import { PlayVideo } from '../../icons';
+import { DefaultEventNames } from '../../models/common';
 import { block, getPageSearchParams } from '../../utils';
 import Image from '../Image/Image';
 import i18n from './i18n';
@@ -35,7 +37,8 @@ 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, analyticsEvents, } = props;
+    const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
     const src = getVideoSrc(stream, record);
     const ref = useRef(null);
     const iframeRef = useRef();
@@ -44,11 +47,12 @@ const VideoBlock = (props) => {
     const [currentHeight, setCurrentHeight] = useState(height || undefined);
     const fullId = id || uuidv4();
     const onPreviewClick = useCallback(() => {
+        handleAnalytics(analyticsEvents);
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${getPageSearchParams(Object.assign(Object.assign({}, AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
         }
         setTimeout(() => setHidePreview(true), AUTOPLAY_DELAY);
-    }, [src, attributes]);
+    }, [handleAnalytics, analyticsEvents, src, attributes]);
     useEffect(() => {
         const updateSize = _.debounce(() => {
             setCurrentHeight(ref.current ? Math.round(getHeight(ref.current.offsetWidth)) : undefined);

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

@@ -1,4 +1,6 @@
-export declare const DEFAULT_THEME = "light";
+import { Theme } from '../models';
+export declare const DEFAULT_THEME = Theme.Light;
+export declare const UIKIT_ROOT_CLASS = "g-root";
 export declare const KEY: {
     ENTER: string;
     TAB: string;

package/build/esm/components/constants.js

@@ -1,4 +1,6 @@
-export const DEFAULT_THEME = 'light';
+import { Theme } from '../models';
+export const DEFAULT_THEME = Theme.Light;
+export const UIKIT_ROOT_CLASS = 'g-root';
 export const KEY = {
     ENTER: 'Enter',
     TAB: 'Tab',

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

@@ -8,7 +8,7 @@ export declare const blockMap: {
     "media-block": (props: import("./models").MediaBlockProps) => JSX.Element;
     "info-block": (props: import("./models").InfoBlockProps) => JSX.Element;
     "table-block": (props: import("./models").TableBlockProps) => JSX.Element;
-    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, }: import("./models").TabsBlockProps) => JSX.Element;
+    "tabs-block": ({ items, title, description, animated, tabsColSizes, centered, direction, contentSize, }: import("./models").TabsBlockProps) => JSX.Element;
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;

package/build/esm/containers/Loadable/Loadable.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { ConstructorItem, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
+import { ConstructorBlock, CustomItem, FetchLoadableData, LoadableData, LoadableProps } from '../../models';
 import './Loadable.css';
 export interface LoadableState {
     loading: boolean;
@@ -9,7 +9,7 @@ export interface LoadableState {
 export interface LoadableComponentsProps extends Omit<PropsWithChildren<LoadableProps>, 'source'> {
     Component: CustomItem;
     ChildComponent: CustomItem;
-    block: ConstructorItem;
+    block: ConstructorBlock;
     blockKey: string;
     fetch: FetchLoadableData;
 }