@gravity-ui/page-constructor 4.20.1 → 4.21.0

package/build/cjs/blocks/Table/schema.d.ts

@@ -31,6 +31,9 @@ export declare const TableBlock: {
                             contentType: string;
                         };
                     };
+                    hideLegend: {
+                        type: string;
+                    };
                     justify: {
                         type: string;
                         items: {

package/build/cjs/blocks/Table/schema.js

@@ -37,12 +37,14 @@ exports.TableBlock = {
                             type: 'string',
                             contentType: 'yfm',
                         },
+                    }, hideLegend: {
+                        type: 'boolean',
                     }, justify: {
                         type: 'array',
                         items: common_1.JustifyProps,
                     }, marker: {
                         type: 'string',
-                        enum: ['disk'],
+                        enum: ['disk', 'tick'],
                     } }),
             } }),
     },

package/build/cjs/blocks/Tabs/Tabs.js

@@ -16,7 +16,7 @@ const sub_blocks_1 = require("../../sub-blocks");
 const utils_2 = require("../../utils");
 const b = (0, utils_2.block)('tabs-block');
 const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
-    var _a;
+    var _a, _b;
     const [activeTab, setActiveTab] = (0, react_1.useState)(items[0].tabName);
     const [play, setPlay] = (0, react_1.useState)(false);
     const theme = (0, theme_1.useTheme)();
@@ -45,7 +45,7 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        react_1.default.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: ((_b = activeTabData.media) === null || _b === void 0 ? void 0 : _b.video) && mediaHeight, imageClassName: b('image') })))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && react_1.default.createElement("p", { className: b('caption') }, activeTabData.caption)));

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

@@ -34,8 +34,8 @@ const Image = (props) => {
     });
     if (parallax) {
         const parallaxLevel = 2;
-        springSetScrollY({ springScrollY: height && scrollY > height ? height : scrollY });
-        parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
+        springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
+        parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {

package/build/cjs/components/Table/Table.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const __1 = require("../");
+const icons_1 = require("../../icons");
 const utils_1 = require("../../utils");
 function getMarkerId(index) {
     if (isNaN(index)) {
@@ -13,20 +15,20 @@ function getMarkerId(index) {
 const b = (0, utils_1.block)('table');
 class Table extends react_1.default.Component {
     render() {
-        const { content, legend, marker = 'disk', className, caption } = this.props;
+        const { content, legend, hideLegend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
         return (react_1.default.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
-            legend && this.renderLegend(legend, marker)));
+            legend && !hideLegend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
         return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
+        return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }, type === 'tick' ? react_1.default.createElement(uikit_1.Icon, { data: Number(cell) === 1 ? icons_1.Tick : icons_1.Minus }) : null));
     }
     renderLegend(legend, marker) {
         return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },

package/build/cjs/icons/Minus.d.ts

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

package/build/cjs/icons/Minus.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Minus = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const Minus = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { fill: "#B5BFC6", fillRule: "evenodd", d: "M1.969 9c0-.466.378-.844.843-.844h12.376a.844.844 0 0 1 0 1.688H2.812A.844.844 0 0 1 1.97 9Z", clipRule: "evenodd" })));
+exports.Minus = Minus;

package/build/cjs/icons/Tick.d.ts

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

package/build/cjs/icons/Tick.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tick = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const Tick = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "none" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("g", { clipPath: "url(#a)" },
+        react_1.default.createElement("path", { fill: "#37F", fillRule: "evenodd", d: "M15.174 3.86a.844.844 0 0 1 .092 1.19l-6.75 7.874a.843.843 0 0 1-1.238.048L3.341 9.034a.844.844 0 1 1 1.193-1.193l3.293 3.293 6.157-7.183a.844.844 0 0 1 1.19-.092Z", clipRule: "evenodd" })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "a" },
+            react_1.default.createElement("path", { fill: "#fff", d: "M0 0h18v18H0z" })))));
+exports.Tick = Tick;

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

@@ -9,3 +9,5 @@ export * from './PreviewClose';
 export * from './NavigationClose';
 export * from './NavigationOpen';
 export * from './NavigationArrow';
+export * from './Tick';
+export * from './Minus';

package/build/cjs/icons/index.js

@@ -12,3 +12,5 @@ tslib_1.__exportStar(require("./PreviewClose"), exports);
 tslib_1.__exportStar(require("./NavigationClose"), exports);
 tslib_1.__exportStar(require("./NavigationOpen"), exports);
 tslib_1.__exportStar(require("./NavigationArrow"), exports);
+tslib_1.__exportStar(require("./Tick"), exports);
+tslib_1.__exportStar(require("./Minus"), exports);

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

@@ -189,6 +189,7 @@ export interface InfoBlockProps {
 export interface TableProps {
     content: string[][];
     legend?: string[];
+    hideLegend?: boolean;
     justify?: Justify[];
     marker?: LegendTableMarkerType;
     /**

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

@@ -50,7 +50,7 @@ export type HeaderImageSize = 's' | 'm';
 export type HeaderOffset = 'default' | 'large';
 export type Justify = 'start' | 'center' | 'end';
 export type ColumnsCount = 1 | 2 | 3 | 4;
-export type LegendTableMarkerType = 'disk';
+export type LegendTableMarkerType = 'disk' | 'tick';
 export type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';
 export type MediaDirection = 'media-content' | 'content-media';
 export type PriceDescriptionColor = 'cornflower' | 'black';

package/build/cjs/sub-blocks/HubspotForm/HubspotForm.css

@@ -99,6 +99,14 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input select:focus {
   border: 1px solid var(--g-color-line-generic-active);
 }
+.pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input {
+  float: none;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 100% !important;
+}
+.pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input + .hs-input {
+  margin-top: 10px;
+}
 .pc-hubspot-form .hs-form-field:not(.hs-fieldtype-textarea):not(.hs-fieldtype-booleancheckbox) {
   display: flex;
   flex-wrap: wrap;

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

@@ -31,6 +31,9 @@ export declare const TableBlock: {
                             contentType: string;
                         };
                     };
+                    hideLegend: {
+                        type: string;
+                    };
                     justify: {
                         type: string;
                         items: {

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

@@ -34,12 +34,14 @@ export const TableBlock = {
                             type: 'string',
                             contentType: 'yfm',
                         },
+                    }, hideLegend: {
+                        type: 'boolean',
                     }, justify: {
                         type: 'array',
                         items: JustifyProps,
                     }, marker: {
                         type: 'string',
-                        enum: ['disk'],
+                        enum: ['disk', 'tick'],
                     } }),
             } }),
     },

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

@@ -13,7 +13,7 @@ import { block, getThemedValue } from '../../utils';
 import './Tabs.css';
 const b = block('tabs-block');
 export const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
-    var _a;
+    var _a, _b;
     const [activeTab, setActiveTab] = useState(items[0].tabName);
     const [play, setPlay] = useState(false);
     const theme = useTheme();
@@ -42,7 +42,7 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
-        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaHeight })))),
+        React.createElement("div", { ref: ref }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: ((_b = activeTabData.media) === null || _b === void 0 ? void 0 : _b.video) && mediaHeight, imageClassName: b('image') })))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && React.createElement("p", { className: b('caption') }, activeTabData.caption)));

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

@@ -31,8 +31,8 @@ const Image = (props) => {
     });
     if (parallax) {
         const parallaxLevel = 2;
-        springSetScrollY({ springScrollY: height && scrollY > height ? height : scrollY });
-        parallaxInterpolate = springScrollY.interpolate((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
+        springSetScrollY.start({ springScrollY: height && scrollY > height ? height : scrollY });
+        parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
     const renderFullscreenImage = (item) => {

package/build/esm/components/Table/Table.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { Icon } from '@gravity-ui/uikit';
 import { HTML, YFMWrapper } from '../';
+import { Minus, Tick } from '../../icons';
 import { block } from '../../utils';
 import './Table.css';
 function getMarkerId(index) {
@@ -11,20 +13,20 @@ function getMarkerId(index) {
 const b = block('table');
 export default class Table extends React.Component {
     render() {
-        const { content, legend, marker = 'disk', className, caption } = this.props;
+        const { content, legend, hideLegend, marker = 'disk', className, caption } = this.props;
         if (!content || !content.length || !content[0].length) {
             return null;
         }
         return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
             this.renderTable(content, marker, legend),
-            legend && this.renderLegend(legend, marker)));
+            legend && !hideLegend && this.renderLegend(legend, marker)));
     }
     renderTable(content, marker, legend) {
         const justify = this.getDefaultJustify(content, this.props.justify);
         return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
     }
     renderMarker(type, cell) {
-        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
+        return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }, type === 'tick' ? React.createElement(Icon, { data: Number(cell) === 1 ? Tick : Minus }) : null));
     }
     renderLegend(legend, marker) {
         return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },

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

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

package/build/esm/icons/Minus.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const Minus = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("path", { fill: "#B5BFC6", fillRule: "evenodd", d: "M1.969 9c0-.466.378-.844.843-.844h12.376a.844.844 0 0 1 0 1.688H2.812A.844.844 0 0 1 1.97 9Z", clipRule: "evenodd" })));

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

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

package/build/esm/icons/Tick.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { a11yHiddenSvgProps } from '../utils/svg';
+export const Tick = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "none" }, a11yHiddenSvgProps, props),
+    React.createElement("g", { clipPath: "url(#a)" },
+        React.createElement("path", { fill: "#37F", fillRule: "evenodd", d: "M15.174 3.86a.844.844 0 0 1 .092 1.19l-6.75 7.874a.843.843 0 0 1-1.238.048L3.341 9.034a.844.844 0 1 1 1.193-1.193l3.293 3.293 6.157-7.183a.844.844 0 0 1 1.19-.092Z", clipRule: "evenodd" })),
+    React.createElement("defs", null,
+        React.createElement("clipPath", { id: "a" },
+            React.createElement("path", { fill: "#fff", d: "M0 0h18v18H0z" })))));

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

@@ -9,3 +9,5 @@ export * from './PreviewClose';
 export * from './NavigationClose';
 export * from './NavigationOpen';
 export * from './NavigationArrow';
+export * from './Tick';
+export * from './Minus';

package/build/esm/icons/index.js

@@ -9,3 +9,5 @@ export * from './PreviewClose';
 export * from './NavigationClose';
 export * from './NavigationOpen';
 export * from './NavigationArrow';
+export * from './Tick';
+export * from './Minus';

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

@@ -189,6 +189,7 @@ export interface InfoBlockProps {
 export interface TableProps {
     content: string[][];
     legend?: string[];
+    hideLegend?: boolean;
     justify?: Justify[];
     marker?: LegendTableMarkerType;
     /**

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

@@ -50,7 +50,7 @@ export type HeaderImageSize = 's' | 'm';
 export type HeaderOffset = 'default' | 'large';
 export type Justify = 'start' | 'center' | 'end';
 export type ColumnsCount = 1 | 2 | 3 | 4;
-export type LegendTableMarkerType = 'disk';
+export type LegendTableMarkerType = 'disk' | 'tick';
 export type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';
 export type MediaDirection = 'media-content' | 'content-media';
 export type PriceDescriptionColor = 'cornflower' | 'black';

package/build/esm/sub-blocks/HubspotForm/HubspotForm.css

@@ -99,6 +99,14 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input select:focus {
   border: 1px solid var(--g-color-line-generic-active);
 }
+.pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input {
+  float: none;
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 100% !important;
+}
+.pc-hubspot-form .hs-form-field .input .hs-fieldtype-intl-phone.hs-input .hs-input + .hs-input {
+  margin-top: 10px;
+}
 .pc-hubspot-form .hs-form-field:not(.hs-fieldtype-textarea):not(.hs-fieldtype-booleancheckbox) {
   display: flex;
   flex-wrap: wrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.20.1",
+  "version": "4.21.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -93,7 +93,7 @@
     "react-monaco-editor": "^0.53.0",
     "react-player": "^2.9.0",
     "react-slick": "^0.29.0",
-    "react-spring": "^9.7.3",
+    "react-spring": "^9.7.2",
     "react-transition-group": "^4.4.2",
     "react-waypoint": "^10.1.0",
     "sanitize-html": "2.6.1",

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

@@ -189,6 +189,7 @@ export interface InfoBlockProps {
 export interface TableProps {
     content: string[][];
     legend?: string[];
+    hideLegend?: boolean;
     justify?: Justify[];
     marker?: LegendTableMarkerType;
     /**

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

@@ -50,7 +50,7 @@ export type HeaderImageSize = 's' | 'm';
 export type HeaderOffset = 'default' | 'large';
 export type Justify = 'start' | 'center' | 'end';
 export type ColumnsCount = 1 | 2 | 3 | 4;
-export type LegendTableMarkerType = 'disk';
+export type LegendTableMarkerType = 'disk' | 'tick';
 export type LinkTheme = 'file-link' | 'normal' | 'back' | 'underline';
 export type MediaDirection = 'media-content' | 'content-media';
 export type PriceDescriptionColor = 'cornflower' | 'black';