@gravity-ui/page-constructor 3.14.0 → 3.16.0

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

@@ -121,6 +121,17 @@ export declare const InfoBlock: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                 }>;
             };
             rightContent: {
@@ -194,6 +205,17 @@ export declare const InfoBlock: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                 }>;
             };
             type: {};

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

@@ -426,6 +426,17 @@ export declare const MapBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             animated: {
                 type: string;
             };

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

@@ -542,6 +542,17 @@ export declare const MediaBlockBaseProps: {
             };
         };
     };
+    list: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
     animated: {
         type: string;
     };
@@ -1132,6 +1143,17 @@ export declare const MediaBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             animated: {
                 type: string;
             };

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

@@ -74,6 +74,17 @@ export declare const QuestionsBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -450,6 +450,17 @@ export declare const tabsItem: {
             type: string;
             enum: string[];
         } | undefined;
+        list?: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        } | undefined;
     };
 };
 export declare const TabsBlock: {

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/models/constructor-items/blocks.d.ts

@@ -154,14 +154,11 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     disableShadow?: boolean;
 }
-export interface MediaContentProps {
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
     title: string;
     description?: string;
-    additionalInfo?: string;
+    /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
-    links?: LinkProps[];
-    buttons?: ButtonProps[];
-    size?: ContentSize;
 }
 export interface MediaBlockProps extends MediaBaseBlockProps {
     media: ThemeSupporting<MediaProps>;
@@ -259,6 +256,11 @@ export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }
+export interface ContentItemProps {
+    title?: string;
+    text?: string;
+    icon: ThemedImage;
+}
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     text?: string;
@@ -269,6 +271,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    list?: ContentItemProps[];
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",

package/build/esm/navigation/components/MobileNavigation/MobileNavigation.js

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 import React from 'react';
 import { Portal } from '@gravity-ui/uikit';
 import Foldable from '../../../components/Foldable/Foldable';
+import { useMount } from '../../../hooks';
 import { block } from '../../../utils';
 import { ItemColumnName, NavigationLayout } from '../../models';
 import { NavigationList } from '../NavigationList/NavigationList';
@@ -9,7 +10,9 @@ import './MobileNavigation.css';
 const b = block('mobile-navigation');
 const MobileNavigation = (_a) => {
     var { isOpened, topItems, bottomItems } = _a, props = __rest(_a, ["isOpened", "topItems", "bottomItems"]);
-    if (typeof window === 'undefined') {
+    const [isMounted, setIsMounted] = React.useState(false);
+    useMount(() => setIsMounted(true));
+    if (!isMounted) {
         return null;
     }
     return (React.createElement(Portal, null,

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

@@ -86,6 +86,17 @@ export declare const cardSchemas: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];
@@ -279,6 +290,17 @@ export declare const cardSchemas: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -105,6 +105,17 @@ export declare const BackgroundCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -84,6 +84,17 @@ export declare const BasicCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/Content/Content.js

@@ -3,6 +3,7 @@ import { Button, Title, YFMWrapper } from '../../components';
 import LinkBlock from '../../components/Link/Link';
 import { Col } from '../../grid';
 import { block } from '../../utils';
+import ContentList from './ContentList/ContentList';
 import './Content.css';
 const b = block('content');
 function getTextSize(size) {
@@ -33,7 +34,7 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, } = props;
+    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, } = props;
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
@@ -42,6 +43,7 @@ const Content = (props) => {
         title && React.createElement(Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
+        (list === null || list === void 0 ? void 0 : list.length) ? React.createElement(ContentList, { list: list, size: size }) : null,
         additionalInfo && (React.createElement("div", { className: b('notice') },
             React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,

package/build/esm/sub-blocks/Content/ContentList/ContentList.css

@@ -0,0 +1,48 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-content-list_size_l {
+  margin-top: 24px;
+}
+.pc-content-list_size_l .pc-content-list__title {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  margin: 0 0 8px;
+}
+.pc-content-list_size_l .pc-content-list__icon {
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-right: 12px;
+}
+.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-content-list_size_s {
+  margin-top: 16px;
+}
+.pc-content-list_size_s .pc-content-list__title {
+  font-size: var(--yc-text-subheader-3-font-size);
+  line-height: var(--yc-text-subheader-3-line-height);
+  margin: 0 0 calc(8px / 2);
+}
+.pc-content-list_size_s .pc-content-list__icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-right: 8px;
+}
+.pc-content-list_size_s .pc-content-list__text {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+.pc-content-list_size_s .pc-content-list__item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-content-list__icon {
+  display: block;
+}
+.pc-content-list__item {
+  display: flex;
+}

package/build/esm/sub-blocks/Content/ContentList/ContentList.d.ts

@@ -0,0 +1,8 @@
+import { ContentItemProps, ContentSize } from '../../../models';
+import './ContentList.css';
+interface ContentListProps {
+    list: ContentItemProps[];
+    size: ContentSize;
+}
+declare const ContentList: ({ list, size }: ContentListProps) => JSX.Element;
+export default ContentList;

package/build/esm/sub-blocks/Content/ContentList/ContentList.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { YFMWrapper } from '../../../components';
+import Image from '../../../components/Image/Image';
+import { getMediaImage } from '../../../components/Media/Image/utils';
+import { ThemeValueContext } from '../../../context/theme/ThemeValueContext';
+import { block, getThemedValue } from '../../../utils';
+import './ContentList.css';
+const b = block('content-list');
+const ContentList = ({ list, size }) => {
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    return (React.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
+        const { icon, title, text } = item;
+        const iconThemed = getThemedValue(icon, theme);
+        const iconData = getMediaImage(iconThemed);
+        return (React.createElement("div", { className: b('item'), key: uuidv4() },
+            React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
+            React.createElement("div", null,
+                title && React.createElement("h4", { className: b('title') }, title),
+                text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
+    })));
+};
+export default ContentList;

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

@@ -1,3 +1,41 @@
+export declare const ContentItem: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        title: {
+            type: string;
+            contentType: string;
+        };
+        text: {
+            type: string;
+            contentType: string;
+        };
+        icon: {
+            oneOf: (({
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            } & {
+                optionName: string;
+            }) | {
+                type: string;
+                additionalProperties: boolean;
+                required: import("../..").Theme[];
+                properties: {};
+                optionName: string;
+            })[];
+        };
+    };
+};
 export declare const ContentBase: {
     title: {
         oneOf: ({
@@ -67,6 +105,17 @@ export declare const ContentBase: {
         type: string;
         enum: string[];
     };
+    list: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
 };
 export declare const ContentBlock: {
     content: {
@@ -144,6 +193,17 @@ export declare const ContentBlock: {
                 type: string;
                 enum: string[];
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
         };
     };
 };

package/build/esm/sub-blocks/Content/schema.js

@@ -1,5 +1,21 @@
-import { ButtonBlock, LinkProps, TitleProps, containerSizesArray, contentSizes, contentThemes, sizeNumber, } from '../../schema/validators/common';
+import { ImageProps } from '../../components/Image/schema';
+import { ButtonBlock, LinkProps, TitleProps, containerSizesArray, contentSizes, contentThemes, sizeNumber, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
+export const ContentItem = {
+    additionalProperties: false,
+    required: ['icon'],
+    properties: {
+        title: {
+            type: 'string',
+            contentType: 'text',
+        },
+        text: {
+            type: 'string',
+            contentType: 'yfm',
+        },
+        icon: withTheme(ImageProps),
+    },
+};
 export const ContentBase = {
     title: {
         oneOf: [
@@ -30,6 +46,7 @@ export const ContentBase = {
         type: 'string',
         enum: contentThemes,
     },
+    list: filteredArray(ContentItem),
 };
 export const ContentBlock = {
     content: {

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

@@ -293,6 +293,17 @@ export declare const LayoutItem: {
                 type: string;
                 enum: string[];
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
         }>;
         metaInfo: {
             type: string;

package/build/esm/text-transform/config.js

@@ -48,7 +48,7 @@ function parsePriceDetailedBlock(transformer, block) {
 }
 const parseContentLayout = (transformer, content) => {
     if (content) {
-        const { text, additionalInfo } = content;
+        const { text, additionalInfo, list } = content;
         /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
         if (text) {
             content.text = transformer(text);
@@ -56,6 +56,14 @@ const parseContentLayout = (transformer, content) => {
         if (additionalInfo) {
             content.additionalInfo = transformer(additionalInfo);
         }
+        if (list) {
+            content.list = list.map((item) => {
+                if (item === null || item === void 0 ? void 0 : item.text) {
+                    return Object.assign(Object.assign({}, item), { text: transformer(item.text) });
+                }
+                return item;
+            });
+        }
         /* eslint-enable no-not-accumulator-reassign/no-not-accumulator-reassign */
     }
     return content;
@@ -184,6 +192,11 @@ export const config = {
             fields: ['title', 'additionalInfo'],
             transformer: yfmTransformer,
         },
+        {
+            fields: ['list'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['text']),
+        },
     ],
     [BlockType.MapBlock]: [
         ...blockHeaderTransformer,
@@ -258,6 +271,11 @@ export const config = {
             transformer: typografTransformer,
             parser: parseTitle,
         },
+        {
+            fields: ['list'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['text']),
+        },
     ],
     [BlockType.InfoBlock]: [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "3.14.0",
+  "version": "3.16.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,7 +80,7 @@
     "test:watch": "jest --watchAll"
   },
   "dependencies": {
-    "@gravity-ui/dynamic-forms": "^1.9.2",
+    "@gravity-ui/dynamic-forms": "^1.11.0",
     "@gravity-ui/i18n": "^1.0.0",
     "ajv": "^8.12.0",
     "bem-cn-lite": "^4.0.0",

package/server/models/constructor-items/blocks.d.ts

@@ -154,14 +154,11 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     disableShadow?: boolean;
 }
-export interface MediaContentProps {
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
     title: string;
     description?: string;
-    additionalInfo?: string;
+    /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
-    links?: LinkProps[];
-    buttons?: ButtonProps[];
-    size?: ContentSize;
 }
 export interface MediaBlockProps extends MediaBaseBlockProps {
     media: ThemeSupporting<MediaProps>;
@@ -259,6 +256,11 @@ export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }
+export interface ContentItemProps {
+    title?: string;
+    text?: string;
+    icon: ThemedImage;
+}
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     text?: string;
@@ -269,6 +271,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    list?: ContentItemProps[];
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",

package/server/text-transform/config.js

@@ -61,7 +61,7 @@ function parsePriceDetailedBlock(transformer, block) {
 }
 const parseContentLayout = (transformer, content) => {
     if (content) {
-        const { text, additionalInfo } = content;
+        const { text, additionalInfo, list } = content;
         /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
         if (text) {
             content.text = transformer(text);
@@ -69,6 +69,14 @@ const parseContentLayout = (transformer, content) => {
         if (additionalInfo) {
             content.additionalInfo = transformer(additionalInfo);
         }
+        if (list) {
+            content.list = list.map((item) => {
+                if (item === null || item === void 0 ? void 0 : item.text) {
+                    return Object.assign(Object.assign({}, item), { text: transformer(item.text) });
+                }
+                return item;
+            });
+        }
         /* eslint-enable no-not-accumulator-reassign/no-not-accumulator-reassign */
     }
     return content;
@@ -197,6 +205,11 @@ exports.config = {
             fields: ['title', 'additionalInfo'],
             transformer: common_1.yfmTransformer,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.MapBlock]: [
         ...exports.blockHeaderTransformer,
@@ -271,6 +284,11 @@ exports.config = {
             transformer: common_1.typografTransformer,
             parser: parseTitle,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.InfoBlock]: [
         {