@gravity-ui/page-constructor 4.45.0 → 4.47.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +1 -1
  2. package/build/cjs/blocks/Header/schema.d.ts +33 -3
  3. package/build/cjs/blocks/HeaderSlider/schema.d.ts +11 -1
  4. package/build/cjs/blocks/Media/schema.d.ts +22 -2
  5. package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +11 -1
  6. package/build/cjs/blocks/Tabs/schema.d.ts +11 -1
  7. package/build/cjs/components/Media/Iframe/Iframe.css +0 -4
  8. package/build/cjs/components/Media/Iframe/Iframe.js +64 -4
  9. package/build/cjs/grid/Col/Col.d.ts +1 -1
  10. package/build/cjs/models/constructor-items/common.d.ts +4 -2
  11. package/build/cjs/schema/constants.d.ts +11 -1
  12. package/build/cjs/schema/validators/common.d.ts +11 -1
  13. package/build/cjs/schema/validators/common.js +5 -1
  14. package/build/cjs/schema/validators/components.d.ts +1 -0
  15. package/build/cjs/schema/validators/components.js +1 -0
  16. package/build/cjs/schema/validators/sub-blocks.d.ts +1 -0
  17. package/build/cjs/schema/validators/sub-blocks.js +1 -0
  18. package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +11 -1
  19. package/build/cjs/sub-blocks/MediaCard/schema.d.ts +11 -1
  20. package/build/esm/blocks/Header/schema.d.ts +33 -3
  21. package/build/esm/blocks/HeaderSlider/schema.d.ts +11 -1
  22. package/build/esm/blocks/Media/schema.d.ts +22 -2
  23. package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +11 -1
  24. package/build/esm/blocks/Tabs/schema.d.ts +11 -1
  25. package/build/esm/components/Media/Iframe/Iframe.css +0 -4
  26. package/build/esm/components/Media/Iframe/Iframe.js +64 -4
  27. package/build/esm/grid/Col/Col.d.ts +1 -1
  28. package/build/esm/models/constructor-items/common.d.ts +4 -2
  29. package/build/esm/schema/constants.d.ts +11 -1
  30. package/build/esm/schema/validators/common.d.ts +11 -1
  31. package/build/esm/schema/validators/common.js +5 -1
  32. package/build/esm/schema/validators/components.d.ts +1 -0
  33. package/build/esm/schema/validators/components.js +1 -0
  34. package/build/esm/schema/validators/sub-blocks.d.ts +1 -0
  35. package/build/esm/schema/validators/sub-blocks.js +1 -0
  36. package/build/esm/sub-blocks/LayoutItem/schema.d.ts +11 -1
  37. package/build/esm/sub-blocks/MediaCard/schema.d.ts +11 -1
  38. package/package.json +4 -1
  39. package/server/models/constructor-items/common.d.ts +4 -2
  40. package/widget/index.js +1 -1
package/README.md CHANGED
@@ -151,7 +151,7 @@ The page constructor uses the `bootstrap` grid and its implementation based on R
151
151
  Usage example:
152
152
 
153
153
  ```jsx
154
- import {Grid, Row, Col} from '@gravity-ui/page-constructor/';
154
+ import {Grid, Row, Col} from '@gravity-ui/page-constructor';
155
155
 
156
156
  const Page: React.FC<PageProps> = ({children}) => (
157
157
  <Grid>
@@ -266,11 +266,21 @@ export declare const HeaderBackgroundProps: {
266
266
  type: string;
267
267
  };
268
268
  height: {
269
- type: string;
269
+ oneOf: ({
270
+ type: string;
271
+ enum?: undefined;
272
+ } | {
273
+ type: string;
274
+ enum: string[];
275
+ })[];
270
276
  };
271
277
  width: {
272
278
  type: string;
273
279
  };
280
+ justifyContent: {
281
+ type: string;
282
+ enum: string[];
283
+ };
274
284
  };
275
285
  };
276
286
  margins: {
@@ -726,11 +736,21 @@ export declare const HeaderProperties: {
726
736
  type: string;
727
737
  };
728
738
  height: {
729
- type: string;
739
+ oneOf: ({
740
+ type: string;
741
+ enum?: undefined;
742
+ } | {
743
+ type: string;
744
+ enum: string[];
745
+ })[];
730
746
  };
731
747
  width: {
732
748
  type: string;
733
749
  };
750
+ justifyContent: {
751
+ type: string;
752
+ enum: string[];
753
+ };
734
754
  };
735
755
  };
736
756
  margins: {
@@ -1235,11 +1255,21 @@ export declare const HeaderBlock: {
1235
1255
  type: string;
1236
1256
  };
1237
1257
  height: {
1238
- type: string;
1258
+ oneOf: ({
1259
+ type: string;
1260
+ enum?: undefined;
1261
+ } | {
1262
+ type: string;
1263
+ enum: string[];
1264
+ })[];
1239
1265
  };
1240
1266
  width: {
1241
1267
  type: string;
1242
1268
  };
1269
+ justifyContent: {
1270
+ type: string;
1271
+ enum: string[];
1272
+ };
1243
1273
  };
1244
1274
  };
1245
1275
  margins: {
@@ -457,11 +457,21 @@ export declare const HeaderSliderBlock: {
457
457
  type: string;
458
458
  };
459
459
  height: {
460
- type: string;
460
+ oneOf: ({
461
+ type: string;
462
+ enum?: undefined;
463
+ } | {
464
+ type: string;
465
+ enum: string[];
466
+ })[];
461
467
  };
462
468
  width: {
463
469
  type: string;
464
470
  };
471
+ justifyContent: {
472
+ type: string;
473
+ enum: string[];
474
+ };
465
475
  };
466
476
  };
467
477
  margins: {
@@ -260,11 +260,21 @@ export declare const Media: {
260
260
  type: string;
261
261
  };
262
262
  height: {
263
- type: string;
263
+ oneOf: ({
264
+ type: string;
265
+ enum?: undefined;
266
+ } | {
267
+ type: string;
268
+ enum: string[];
269
+ })[];
264
270
  };
265
271
  width: {
266
272
  type: string;
267
273
  };
274
+ justifyContent: {
275
+ type: string;
276
+ enum: string[];
277
+ };
268
278
  };
269
279
  };
270
280
  margins: {
@@ -931,11 +941,21 @@ export declare const MediaBlock: {
931
941
  type: string;
932
942
  };
933
943
  height: {
934
- type: string;
944
+ oneOf: ({
945
+ type: string;
946
+ enum?: undefined;
947
+ } | {
948
+ type: string;
949
+ enum: string[];
950
+ })[];
935
951
  };
936
952
  width: {
937
953
  type: string;
938
954
  };
955
+ justifyContent: {
956
+ type: string;
957
+ enum: string[];
958
+ };
939
959
  };
940
960
  };
941
961
  margins: {
@@ -276,11 +276,21 @@ export declare const PromoFeaturesItem: {
276
276
  type: string;
277
277
  };
278
278
  height: {
279
- type: string;
279
+ oneOf: ({
280
+ type: string;
281
+ enum?: undefined;
282
+ } | {
283
+ type: string;
284
+ enum: string[];
285
+ })[];
280
286
  };
281
287
  width: {
282
288
  type: string;
283
289
  };
290
+ justifyContent: {
291
+ type: string;
292
+ enum: string[];
293
+ };
284
294
  };
285
295
  };
286
296
  margins: {
@@ -271,11 +271,21 @@ export declare const tabsItem: {
271
271
  type: string;
272
272
  };
273
273
  height: {
274
- type: string;
274
+ oneOf: ({
275
+ type: string;
276
+ enum?: undefined;
277
+ } | {
278
+ type: string;
279
+ enum: string[];
280
+ })[];
275
281
  };
276
282
  width: {
277
283
  type: string;
278
284
  };
285
+ justifyContent: {
286
+ type: string;
287
+ enum: string[];
288
+ };
279
289
  };
280
290
  };
281
291
  margins: {
@@ -11,8 +11,4 @@ unpredictable css rules order in build */
11
11
  }
12
12
  .pc-media-component-iframe .pc-media-component-iframe__iframe {
13
13
  border-radius: 0;
14
- }
15
- .pc-media-component-iframe__item {
16
- width: 100%;
17
- height: 100%;
18
14
  }
@@ -1,14 +1,74 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
- const react_1 = tslib_1.__importDefault(require("react"));
4
+ const react_1 = tslib_1.__importStar(require("react"));
5
+ const uuid_1 = require("uuid");
5
6
  const utils_1 = require("../../../utils");
6
7
  const i18n_1 = tslib_1.__importDefault(require("./i18n"));
7
8
  const b = (0, utils_1.block)('media-component-iframe');
8
9
  const Iframe = (props) => {
9
10
  const { iframe, margins = true } = props;
10
- const { height = 400, src, width, name, title } = iframe;
11
- return iframe ? (react_1.default.createElement("div", { className: b({ margins }), style: { height } },
12
- react_1.default.createElement("iframe", { className: b('item'), loading: "lazy", title: title || (0, i18n_1.default)('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
11
+ const { height = 400, src, width = '100%', name, title, justifyContent = 'center' } = iframe;
12
+ const formContainerRef = (0, react_1.useRef)(null);
13
+ const iframeRef = (0, react_1.useRef)();
14
+ const { current: iframeId } = (0, react_1.useRef)((0, uuid_1.v4)());
15
+ const updateIframe = (0, react_1.useCallback)((container) => {
16
+ if (iframeRef.current) {
17
+ iframeRef.current.src = src;
18
+ }
19
+ else {
20
+ const iframeWidth = typeof width === 'number' ? `${width}px` : width;
21
+ let iframeHeight = typeof height === 'number' ? `${height}px` : height;
22
+ if (height === 'auto') {
23
+ iframeHeight = undefined;
24
+ }
25
+ iframeRef.current = document.createElement('iframe');
26
+ iframeRef.current.src = src;
27
+ iframeRef.current.id = iframeId;
28
+ iframeRef.current.name = name || iframeId;
29
+ iframeRef.current.setAttribute('loading', 'lazy');
30
+ iframeRef.current.setAttribute('title', title || (0, i18n_1.default)('iframe-title'));
31
+ iframeRef.current.frameBorder = '0';
32
+ iframeRef.current.scrolling = 'no';
33
+ iframeRef.current.width = iframeWidth;
34
+ iframeRef.current.style.width = iframeWidth;
35
+ if (iframeHeight) {
36
+ iframeRef.current.style.height = iframeHeight;
37
+ }
38
+ container.appendChild(iframeRef.current);
39
+ }
40
+ }, [src, width, iframeId, name, title, height]);
41
+ const handleMessage = (0, react_1.useCallback)(({ data }) => {
42
+ if (height !== 'auto' && typeof height === 'number' && iframeRef.current) {
43
+ iframeRef.current.height = `${height}px`;
44
+ return;
45
+ }
46
+ try {
47
+ const parsed = JSON.parse(data);
48
+ const iframeHeight = parsed['iframe-height'];
49
+ const { message, name: iframeName } = parsed;
50
+ if (iframeName !== name && iframeName !== iframeId) {
51
+ return;
52
+ }
53
+ if (iframeRef.current && iframeHeight && !message) {
54
+ iframeRef.current.height = `${iframeHeight}px`;
55
+ }
56
+ }
57
+ catch (error) {
58
+ return;
59
+ }
60
+ }, [height, iframeId, name]);
61
+ const addIframe = (0, react_1.useCallback)(() => {
62
+ const container = formContainerRef.current;
63
+ if (container) {
64
+ updateIframe(container);
65
+ window.addEventListener('message', handleMessage, { passive: true });
66
+ }
67
+ }, [updateIframe, handleMessage]);
68
+ (0, react_1.useEffect)(() => {
69
+ addIframe();
70
+ return () => window.removeEventListener('message', handleMessage);
71
+ }, [addIframe, handleMessage]);
72
+ return iframe ? (react_1.default.createElement("div", { className: b({ margins }), ref: formContainerRef, style: { height, textAlign: justifyContent } })) : null;
13
73
  };
14
74
  exports.default = Iframe;
@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
5
5
  style?: CSSProperties;
6
6
  children?: React.ReactNode;
7
7
  }
8
- export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
8
+ export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "justifyContent" | "offsets" | "orders" | "alignSelf"> & React.RefAttributes<HTMLDivElement>>;
@@ -257,12 +257,14 @@ export interface DataLensObjectProps {
257
257
  id: string;
258
258
  theme: 'dark' | 'light';
259
259
  }
260
+ export type JustifyValues = 'left' | 'right' | 'center';
260
261
  export interface IframeProps {
261
262
  src: string;
262
- width?: number;
263
- height?: number;
263
+ width?: number | string;
264
+ height?: number | string;
264
265
  title?: string;
265
266
  name?: string;
267
+ justifyContent?: JustifyValues;
266
268
  }
267
269
  export type DataLensProps = string | DataLensObjectProps;
268
270
  export interface AuthorItem {
@@ -1530,11 +1530,21 @@ export declare const cardSchemas: {
1530
1530
  type: string;
1531
1531
  };
1532
1532
  height: {
1533
- type: string;
1533
+ oneOf: ({
1534
+ type: string;
1535
+ enum?: undefined;
1536
+ } | {
1537
+ type: string;
1538
+ enum: string[];
1539
+ })[];
1534
1540
  };
1535
1541
  width: {
1536
1542
  type: string;
1537
1543
  };
1544
+ justifyContent: {
1545
+ type: string;
1546
+ enum: string[];
1547
+ };
1538
1548
  };
1539
1549
  };
1540
1550
  margins: {
@@ -1388,11 +1388,21 @@ export declare const MediaProps: {
1388
1388
  type: string;
1389
1389
  };
1390
1390
  height: {
1391
- type: string;
1391
+ oneOf: ({
1392
+ type: string;
1393
+ enum?: undefined;
1394
+ } | {
1395
+ type: string;
1396
+ enum: string[];
1397
+ })[];
1392
1398
  };
1393
1399
  width: {
1394
1400
  type: string;
1395
1401
  };
1402
+ justifyContent: {
1403
+ type: string;
1404
+ enum: string[];
1405
+ };
1396
1406
  };
1397
1407
  };
1398
1408
  margins: {
@@ -526,11 +526,15 @@ const IframeProps = {
526
526
  type: 'string',
527
527
  },
528
528
  height: {
529
- type: 'number',
529
+ oneOf: [{ type: 'number' }, { type: 'string', enum: ['auto'] }],
530
530
  },
531
531
  width: {
532
532
  type: 'number',
533
533
  },
534
+ justifyContent: {
535
+ type: 'string',
536
+ enum: ['left', 'right', 'center'],
537
+ },
534
538
  },
535
539
  };
536
540
  exports.MediaProps = {
@@ -1,2 +1,3 @@
1
1
  export * from '../../components/Author/schema';
2
2
  export * from '../../components/Image/schema';
3
+ export * from '../../components/YandexForm/schema';
@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  tslib_1.__exportStar(require("../../components/Author/schema"), exports);
5
5
  tslib_1.__exportStar(require("../../components/Image/schema"), exports);
6
+ tslib_1.__exportStar(require("../../components/YandexForm/schema"), exports);
@@ -7,3 +7,4 @@ export * from '../../sub-blocks/Quote/schema';
7
7
  export * from '../../sub-blocks/Divider/schema';
8
8
  export * from '../../sub-blocks/BasicCard/schema';
9
9
  export * from '../../sub-blocks/PriceCard/schema';
10
+ export * from '../../sub-blocks/HubspotForm/schema';
@@ -10,3 +10,4 @@ tslib_1.__exportStar(require("../../sub-blocks/Quote/schema"), exports);
10
10
  tslib_1.__exportStar(require("../../sub-blocks/Divider/schema"), exports);
11
11
  tslib_1.__exportStar(require("../../sub-blocks/BasicCard/schema"), exports);
12
12
  tslib_1.__exportStar(require("../../sub-blocks/PriceCard/schema"), exports);
13
+ tslib_1.__exportStar(require("../../sub-blocks/HubspotForm/schema"), exports);
@@ -261,11 +261,21 @@ export declare const LayoutItem: {
261
261
  type: string;
262
262
  };
263
263
  height: {
264
- type: string;
264
+ oneOf: ({
265
+ type: string;
266
+ enum?: undefined;
267
+ } | {
268
+ type: string;
269
+ enum: string[];
270
+ })[];
265
271
  };
266
272
  width: {
267
273
  type: string;
268
274
  };
275
+ justifyContent: {
276
+ type: string;
277
+ enum: string[];
278
+ };
269
279
  };
270
280
  };
271
281
  margins: {
@@ -266,11 +266,21 @@ export declare const MediaCardBlock: {
266
266
  type: string;
267
267
  };
268
268
  height: {
269
- type: string;
269
+ oneOf: ({
270
+ type: string;
271
+ enum?: undefined;
272
+ } | {
273
+ type: string;
274
+ enum: string[];
275
+ })[];
270
276
  };
271
277
  width: {
272
278
  type: string;
273
279
  };
280
+ justifyContent: {
281
+ type: string;
282
+ enum: string[];
283
+ };
274
284
  };
275
285
  };
276
286
  margins: {
@@ -266,11 +266,21 @@ export declare const HeaderBackgroundProps: {
266
266
  type: string;
267
267
  };
268
268
  height: {
269
- type: string;
269
+ oneOf: ({
270
+ type: string;
271
+ enum?: undefined;
272
+ } | {
273
+ type: string;
274
+ enum: string[];
275
+ })[];
270
276
  };
271
277
  width: {
272
278
  type: string;
273
279
  };
280
+ justifyContent: {
281
+ type: string;
282
+ enum: string[];
283
+ };
274
284
  };
275
285
  };
276
286
  margins: {
@@ -726,11 +736,21 @@ export declare const HeaderProperties: {
726
736
  type: string;
727
737
  };
728
738
  height: {
729
- type: string;
739
+ oneOf: ({
740
+ type: string;
741
+ enum?: undefined;
742
+ } | {
743
+ type: string;
744
+ enum: string[];
745
+ })[];
730
746
  };
731
747
  width: {
732
748
  type: string;
733
749
  };
750
+ justifyContent: {
751
+ type: string;
752
+ enum: string[];
753
+ };
734
754
  };
735
755
  };
736
756
  margins: {
@@ -1235,11 +1255,21 @@ export declare const HeaderBlock: {
1235
1255
  type: string;
1236
1256
  };
1237
1257
  height: {
1238
- type: string;
1258
+ oneOf: ({
1259
+ type: string;
1260
+ enum?: undefined;
1261
+ } | {
1262
+ type: string;
1263
+ enum: string[];
1264
+ })[];
1239
1265
  };
1240
1266
  width: {
1241
1267
  type: string;
1242
1268
  };
1269
+ justifyContent: {
1270
+ type: string;
1271
+ enum: string[];
1272
+ };
1243
1273
  };
1244
1274
  };
1245
1275
  margins: {
@@ -457,11 +457,21 @@ export declare const HeaderSliderBlock: {
457
457
  type: string;
458
458
  };
459
459
  height: {
460
- type: string;
460
+ oneOf: ({
461
+ type: string;
462
+ enum?: undefined;
463
+ } | {
464
+ type: string;
465
+ enum: string[];
466
+ })[];
461
467
  };
462
468
  width: {
463
469
  type: string;
464
470
  };
471
+ justifyContent: {
472
+ type: string;
473
+ enum: string[];
474
+ };
465
475
  };
466
476
  };
467
477
  margins: {
@@ -260,11 +260,21 @@ export declare const Media: {
260
260
  type: string;
261
261
  };
262
262
  height: {
263
- type: string;
263
+ oneOf: ({
264
+ type: string;
265
+ enum?: undefined;
266
+ } | {
267
+ type: string;
268
+ enum: string[];
269
+ })[];
264
270
  };
265
271
  width: {
266
272
  type: string;
267
273
  };
274
+ justifyContent: {
275
+ type: string;
276
+ enum: string[];
277
+ };
268
278
  };
269
279
  };
270
280
  margins: {
@@ -931,11 +941,21 @@ export declare const MediaBlock: {
931
941
  type: string;
932
942
  };
933
943
  height: {
934
- type: string;
944
+ oneOf: ({
945
+ type: string;
946
+ enum?: undefined;
947
+ } | {
948
+ type: string;
949
+ enum: string[];
950
+ })[];
935
951
  };
936
952
  width: {
937
953
  type: string;
938
954
  };
955
+ justifyContent: {
956
+ type: string;
957
+ enum: string[];
958
+ };
939
959
  };
940
960
  };
941
961
  margins: {
@@ -276,11 +276,21 @@ export declare const PromoFeaturesItem: {
276
276
  type: string;
277
277
  };
278
278
  height: {
279
- type: string;
279
+ oneOf: ({
280
+ type: string;
281
+ enum?: undefined;
282
+ } | {
283
+ type: string;
284
+ enum: string[];
285
+ })[];
280
286
  };
281
287
  width: {
282
288
  type: string;
283
289
  };
290
+ justifyContent: {
291
+ type: string;
292
+ enum: string[];
293
+ };
284
294
  };
285
295
  };
286
296
  margins: {
@@ -271,11 +271,21 @@ export declare const tabsItem: {
271
271
  type: string;
272
272
  };
273
273
  height: {
274
- type: string;
274
+ oneOf: ({
275
+ type: string;
276
+ enum?: undefined;
277
+ } | {
278
+ type: string;
279
+ enum: string[];
280
+ })[];
275
281
  };
276
282
  width: {
277
283
  type: string;
278
284
  };
285
+ justifyContent: {
286
+ type: string;
287
+ enum: string[];
288
+ };
279
289
  };
280
290
  };
281
291
  margins: {
@@ -11,8 +11,4 @@ unpredictable css rules order in build */
11
11
  }
12
12
  .pc-media-component-iframe .pc-media-component-iframe__iframe {
13
13
  border-radius: 0;
14
- }
15
- .pc-media-component-iframe__item {
16
- width: 100%;
17
- height: 100%;
18
14
  }