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

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

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import { AnimatableProps, BlockBaseProps, ButtonBlock, MediaProps, mediaDirection, } from '../../schema/validators/common';
+import { AnimatableProps, BlockBaseProps, ButtonBlock, MediaProps, mediaDirection, withTheme, } from '../../schema/validators/common';
 import { ContentBase } from '../../sub-blocks/Content/schema';
 export const Media = {
     type: 'object',
@@ -28,6 +28,6 @@ export const MediaBlock = {
     'media-block': {
         additionalProperties: false,
         required: ['title', 'media'],
-        properties: Object.assign(Object.assign({}, MediaBlockBaseProps), { media: Media }),
+        properties: Object.assign(Object.assign({}, MediaBlockBaseProps), { media: withTheme(Media) }),
     },
 };

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-PromoFeaturesBlock__card-title {
-  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);
 }
 .pc-PromoFeaturesBlock__card-container {
   display: flex;
@@ -23,7 +23,7 @@ unpredictable css rules order in build */
   background-color: inherit;
 }
 .pc-PromoFeaturesBlock__background_grey {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock_grey {
   padding: 64px 0;
@@ -44,8 +44,8 @@ unpredictable css rules order in build */
   margin-bottom: 8px;
 }
 .pc-PromoFeaturesBlock__card-text {
-  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-PromoFeaturesBlock__card-media {
   margin-top: 16px;
@@ -57,24 +57,24 @@ unpredictable css rules order in build */
   padding: 32px;
 }
 .pc-PromoFeaturesBlock__card_light {
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
 }
 .pc-PromoFeaturesBlock__card_default {
-  background-color: var(--yc-color-base-misc);
+  background-color: var(--g-color-base-misc-light);
 }
 .pc-PromoFeaturesBlock__card_accent {
-  color: var(--yc-color-text-light-primary);
-  background-color: var(--yc-color-base-special);
+  color: var(--g-color-text-light-primary);
+  background-color: var(--g-color-base-brand);
 }
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-title,
 .pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-text > .yfm * {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-PromoFeaturesBlock__card_accent-light {
-  background-color: var(--yc-color-base-selection);
+  background-color: var(--pc-color-base-copper);
 }
 .pc-PromoFeaturesBlock__card_primary {
-  background-color: var(--yc-color-promo-base-gold);
+  background-color: var(--pc-color-base-gold);
 }
 @media (min-width: 769px) {
   .pc-PromoFeaturesBlock.pc-AnimateBlock .pc-PromoFeaturesBlock__card-container-column, .pc-AnimateBlock .pc-PromoFeaturesBlock .pc-PromoFeaturesBlock__card-container-column {

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

@@ -9,6 +9,7 @@ export declare const PromoFeaturesItem: {
         text: {
             type: string;
             contentType: string;
+            inputType: string;
         };
         theme: {
             enum: string[];
@@ -22,7 +23,8 @@ export declare const PromoFeaturesItem: {
                     type: string;
                 };
                 image: {
-                    anyOf: ({
+                    oneOf: ({
+                        optionName: string;
                         oneOf: ({
                             type: string;
                             properties: {
@@ -33,7 +35,10 @@ export declare const PromoFeaturesItem: {
                         } | {
                             type: string;
                             pattern: string;
+                            optionName: string;
                         })[];
+                        type?: undefined;
+                        items?: undefined;
                     } | {
                         type: string;
                         items: {
@@ -47,8 +52,10 @@ export declare const PromoFeaturesItem: {
                             } | {
                                 type: string;
                                 pattern: string;
+                                optionName: string;
                             })[];
                         };
+                        optionName: string;
                     })[];
                 };
                 video: {
@@ -63,7 +70,8 @@ export declare const PromoFeaturesItem: {
                             };
                         };
                         loop: {
-                            anyOf: ({
+                            oneOf: ({
+                                optionName: string;
                                 type: string;
                                 additionalProperties: boolean;
                                 required: string[];
@@ -77,6 +85,7 @@ export declare const PromoFeaturesItem: {
                                 };
                             } | {
                                 type: string;
+                                optionName: string;
                             })[];
                         };
                         type: {
@@ -86,13 +95,13 @@ export declare const PromoFeaturesItem: {
                         muted: {
                             type: string;
                         };
-                        playing: {
+                        autoplay: {
                             type: string;
                         };
                         elapsedTime: {
                             type: string;
                         };
-                        playIcon: {
+                        playButton: {
                             type: string;
                             additionalProperties: boolean;
                             properties: {
@@ -130,6 +139,10 @@ export declare const PromoFeaturesItem: {
                 };
                 dataLens: {
                     oneOf: ({
+                        type: string;
+                        optionName: string;
+                    } | {
+                        optionName: string;
                         type: string;
                         additionalProperties: boolean;
                         required: string[];
@@ -142,13 +155,89 @@ export declare const PromoFeaturesItem: {
                                 enum: string[];
                             };
                         };
-                    } | {
-                        type: string;
                     })[];
                 };
                 fullscreen: {
                     type: string;
                 };
+                analyticsEvents: {
+                    anyOf: ({
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    } | {
+                        type: string;
+                        items: {
+                            type: string;
+                            additionalProperties: {
+                                type: string;
+                            };
+                            required: string[];
+                            properties: {
+                                name: {
+                                    type: string;
+                                };
+                                type: {
+                                    type: string;
+                                };
+                                counters: {
+                                    type: string;
+                                    additionalProperties: boolean;
+                                    required: never[];
+                                    properties: {
+                                        include: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                        exclude: {
+                                            type: string;
+                                            items: {
+                                                type: string;
+                                            };
+                                        };
+                                    };
+                                };
+                                context: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    })[];
+                };
             };
         };
     };
@@ -174,6 +263,10 @@ export declare const PromoFeaturesBlock: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -193,13 +286,12 @@ export declare const PromoFeaturesBlock: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
                 })[];
             };
             description: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             animated: {
                 type: string;
@@ -229,7 +321,9 @@ export declare const PromoFeaturesBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -12,6 +12,7 @@ export const PromoFeaturesItem = {
         text: {
             type: 'string',
             contentType: 'yfm',
+            inputType: 'textarea',
         },
         theme: {
             enum: ['accent', 'accent-light', 'primary'],

package/build/esm/blocks/Questions/Questions.css

@@ -12,23 +12,23 @@ unpredictable css rules order in build */
 }
 .pc-QuestionsBlock__item {
   padding-bottom: 32px;
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
 }
 .pc-QuestionsBlock__item + .pc-QuestionsBlock__item {
   padding-top: 32px;
 }
 .pc-QuestionsBlock__item-title {
-  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);
   position: relative;
   padding-right: 24px;
   cursor: pointer;
 }
 .pc-QuestionsBlock__item-title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -36,23 +36,23 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-QuestionsBlock__item-title a:hover, .pc-QuestionsBlock__item-title 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-QuestionsBlock__text {
-  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: 12px;
 }
 .pc-QuestionsBlock__arrow {
   position: absolute;
   right: 0;
   top: 0;
-  color: var(--yc-color-text-info);
+  color: var(--g-color-text-primary);
 }
 .pc-QuestionsBlock__link {
-  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);
 }
 @media (max-width: 769px) {
   .pc-QuestionsBlock__title {

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

@@ -16,6 +16,11 @@ export declare const QuestionsBlock: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -35,14 +40,13 @@ export declare const QuestionsBlock: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
-                    contentType: string;
+                    contentType?: undefined;
                 })[];
             };
             text: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             additionalInfo: {
                 type: string;
@@ -70,6 +74,17 @@ export declare const QuestionsBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;
@@ -95,7 +110,9 @@ export declare const QuestionsBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/esm/blocks/Share/Share.css

@@ -5,10 +5,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-share-block__title {
-  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);
   text-align: center;
   font-weight: normal;
 }
@@ -20,27 +20,29 @@ unpredictable css rules order in build */
 .pc-share-block__item.pc-share-block__item {
   display: flex;
   justify-content: center;
-  width: 48px;
+  align-items: center;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 48px !important;
   height: 48px;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item_type_vk {
-  background-color: var(--yc-color-vk);
+  background-color: var(--pc-color-vk);
 }
 .pc-share-block__item.pc-share-block__item_type_facebook {
-  background-color: var(--yc-color-facebook);
+  background-color: var(--pc-color-facebook);
 }
 .pc-share-block__item.pc-share-block__item_type_twitter {
-  background-color: var(--yc-color-twitter);
+  background-color: var(--pc-color-twitter);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_telegram {
-  background-color: var(--yc-color-telegram);
+  background-color: var(--pc-color-telegram);
 }
 .pc-share-block__item.pc-share-block__item_type_linkedin {
-  background-color: var(--yc-color-linkedin);
+  background-color: var(--pc-color-linkedin);
 }
 .pc-share-block__item.pc-share-block__item.pc-share-block__item.pc-share-block__item:before {
   border-radius: 100%;
@@ -48,14 +50,14 @@ unpredictable css rules order in build */
 
 .pc-share-block__item.pc-share-block__item:hover:before {
   /* stylelint-disable-next-line declaration-no-important */
-  background-color: var(--yc-color-base-generic) !important;
+  background-color: var(--g-color-base-generic) !important;
   border-radius: 100%;
 }
 .pc-share-block__item.pc-share-block__item + .pc-share-block__item.pc-share-block__item {
   margin-left: 12px;
 }
 .pc-share-block__item.pc-share-block__item svg {
-  color: var(--yc-color-base-background);
+  color: var(--g-color-base-background);
 }
 
 @media (max-width: 577px) {

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

@@ -14,7 +14,9 @@ export declare const ShareBlock: {
                 };
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

package/build/esm/blocks/Slider/Arrow/Arrow.css

@@ -3,7 +3,7 @@
 }
 
 .pc-slider-block-arrow__button:hover {
-  box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+  box-shadow: 0px 4px 24px var(--g-color-sfx-shadow), 0px 2px 8px var(--g-color-sfx-shadow);
   cursor: pointer;
 }
 
@@ -43,14 +43,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   width: 42px;
   height: 42px;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   border-radius: 100%;
-  background-color: var(--yc-color-base-background);
+  background-color: var(--g-color-base-background);
   box-shadow: 0 4px 24px var(--pc-color-sfx-shadow), 0 2px 8px var(--pc-color-sfx-shadow);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 .pc-slider-block-arrow:hover .pc-slider-block-arrow__button {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
   box-shadow: 0 2px 12px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
 }
 .pc-slider-block-arrow__icon {

package/build/esm/blocks/Slider/Arrow/Arrow.js

@@ -5,6 +5,6 @@ import './Arrow.css';
 const b = block('slider-block-arrow');
 const Arrow = ({ type, handleClick, className, size = 16 }) => (React.createElement("div", { className: b({ type }, className) },
     React.createElement("button", { className: b('button'), onClick: () => handleClick && handleClick(type) },
-        React.createElement("div", { className: b('icon-wrapper') },
+        React.createElement("span", { className: b('icon-wrapper') },
             React.createElement(ToggleArrow, { size: size, type: 'horizontal', iconType: "navigation", className: b('icon') })))));
 export default Arrow;

package/build/esm/blocks/Slider/Slider.css

@@ -133,8 +133,8 @@ unpredictable css rules order in build */
   display: inline-flex;
   justify-content: center;
 }
-.pc-SliderBlock__dots-list div.pc-SliderBlock__bar,
-.pc-SliderBlock__dots-list div.pc-SliderBlock__dot {
+.pc-SliderBlock__dots-list li.pc-SliderBlock__bar,
+.pc-SliderBlock__dots-list li.pc-SliderBlock__dot {
   margin: calc(12px / 2) 8px;
   top: 0;
 }
@@ -143,17 +143,17 @@ unpredictable css rules order in build */
   width: 8px;
   height: 8px;
   border-radius: 100%;
-  background-color: var(--yc-color-line-generic-accent);
+  background-color: var(--g-color-line-generic-accent);
   cursor: pointer;
 }
 .pc-SliderBlock__dot:hover {
-  background-color: var(--yc-color-line-generic-accent-hover);
+  background-color: var(--g-color-line-generic-accent-hover);
 }
 .pc-SliderBlock__dot + .pc-SliderBlock__dot {
   margin-left: 16px;
 }
 .pc-SliderBlock__dot_active {
-  background-color: var(--yc-color-line-generic-active);
+  background-color: var(--g-color-line-generic-active);
 }
 .pc-SliderBlock__bar {
   position: absolute;
@@ -180,19 +180,19 @@ unpredictable css rules order in build */
   position: absolute;
   top: 0;
   left: 0;
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_size_l {
-  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);
 }
 .pc-SliderBlock__footer .pc-SliderBlock__disclaimer_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-SliderBlock__footer .pc-SliderBlock__disclaimer_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);
 }
 @media (min-width: 769px) {
   .pc-SliderBlock__animate-slides.pc-AnimateBlock .slick-slide, .pc-AnimateBlock .pc-SliderBlock__animate-slides .slick-slide {

package/build/esm/blocks/Slider/Slider.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import _ from 'lodash';
 import SlickSlider from 'react-slick';
 import Anchor from '../../components/Anchor/Anchor';
@@ -25,7 +25,7 @@ export const SliderBlock = (props) => {
     const { isServer } = useContext(SSRContext);
     const isMobile = useContext(MobileContext);
     const [breakpoint, setBreakpoint] = useState(BREAKPOINTS.xl);
-    const [disclosedChildren] = useState(() => discloseAllNestedChildren(children));
+    const disclosedChildren = useMemo(() => discloseAllNestedChildren(children), [children]);
     const childrenCount = disclosedChildren.length;
     const [slidesToShow] = useState(getSlidesToShowWithDefaults({
         contentLength: childrenCount,
@@ -121,13 +121,13 @@ export const SliderBlock = (props) => {
     const renderBar = () => {
         const barPosition = (DOT_GAP + DOT_WIDTH) * currentIndex;
         const barWidth = DOT_WIDTH + (DOT_GAP + DOT_WIDTH) * (slidesCountByBreakpoint - 1);
-        return (slidesCountByBreakpoint > 1 && (React.createElement("div", { className: b('bar'), style: {
+        return (slidesCountByBreakpoint > 1 && (React.createElement("li", { className: b('bar'), style: {
                 left: barPosition,
                 width: barWidth,
             } })));
     };
     const renderDot = (index) => {
-        return (React.createElement("div", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
+        return (React.createElement("li", { key: index, className: b('dot', { active: index === currentIndex }), onClick: () => handleDotClick(index) }));
     };
     const renderNavigation = () => {
         if (childrenCount <= slidesCountByBreakpoint || !dots || childrenCount === 1) {