@gravity-ui/page-constructor 4.44.0-beta.0 → 4.44.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 (42) hide show
  1. package/build/cjs/blocks/CardLayout/CardLayout.css +19 -0
  2. package/build/cjs/blocks/CardLayout/CardLayout.js +10 -3
  3. package/build/cjs/blocks/CardLayout/schema.d.ts +74 -0
  4. package/build/cjs/blocks/CardLayout/schema.js +2 -1
  5. package/build/cjs/blocks/Header/schema.d.ts +3 -33
  6. package/build/cjs/blocks/HeaderSlider/schema.d.ts +1 -11
  7. package/build/cjs/blocks/Media/schema.d.ts +2 -22
  8. package/build/cjs/blocks/PromoFeaturesBlock/schema.d.ts +1 -11
  9. package/build/cjs/blocks/Tabs/schema.d.ts +1 -11
  10. package/build/cjs/components/Media/Iframe/Iframe.css +4 -0
  11. package/build/cjs/components/Media/Iframe/Iframe.js +4 -64
  12. package/build/cjs/grid/Col/Col.d.ts +1 -1
  13. package/build/cjs/models/constructor-items/blocks.d.ts +1 -0
  14. package/build/cjs/models/constructor-items/common.d.ts +2 -4
  15. package/build/cjs/schema/constants.d.ts +1 -11
  16. package/build/cjs/schema/validators/common.d.ts +1 -11
  17. package/build/cjs/schema/validators/common.js +1 -5
  18. package/build/cjs/sub-blocks/LayoutItem/schema.d.ts +1 -11
  19. package/build/cjs/sub-blocks/MediaCard/schema.d.ts +1 -11
  20. package/build/esm/blocks/CardLayout/CardLayout.css +19 -0
  21. package/build/esm/blocks/CardLayout/CardLayout.js +11 -4
  22. package/build/esm/blocks/CardLayout/schema.d.ts +74 -0
  23. package/build/esm/blocks/CardLayout/schema.js +2 -1
  24. package/build/esm/blocks/Header/schema.d.ts +3 -33
  25. package/build/esm/blocks/HeaderSlider/schema.d.ts +1 -11
  26. package/build/esm/blocks/Media/schema.d.ts +2 -22
  27. package/build/esm/blocks/PromoFeaturesBlock/schema.d.ts +1 -11
  28. package/build/esm/blocks/Tabs/schema.d.ts +1 -11
  29. package/build/esm/components/Media/Iframe/Iframe.css +4 -0
  30. package/build/esm/components/Media/Iframe/Iframe.js +4 -64
  31. package/build/esm/grid/Col/Col.d.ts +1 -1
  32. package/build/esm/models/constructor-items/blocks.d.ts +1 -0
  33. package/build/esm/models/constructor-items/common.d.ts +2 -4
  34. package/build/esm/schema/constants.d.ts +1 -11
  35. package/build/esm/schema/validators/common.d.ts +1 -11
  36. package/build/esm/schema/validators/common.js +1 -5
  37. package/build/esm/sub-blocks/LayoutItem/schema.d.ts +1 -11
  38. package/build/esm/sub-blocks/MediaCard/schema.d.ts +1 -11
  39. package/package.json +1 -4
  40. package/server/models/constructor-items/blocks.d.ts +1 -0
  41. package/server/models/constructor-items/common.d.ts +2 -4
  42. package/widget/index.js +1 -1
@@ -7,6 +7,43 @@ export declare const CardLayoutProps: {
7
7
  additionalProperties: boolean;
8
8
  properties: {};
9
9
  };
10
+ background: {
11
+ type: string;
12
+ additionalProperties: boolean;
13
+ required: string[];
14
+ properties: {
15
+ src: {
16
+ type: string;
17
+ pattern: string;
18
+ };
19
+ style: {
20
+ type: string;
21
+ additionalProperties: boolean;
22
+ required: never[];
23
+ properties: {
24
+ backgroundColor: {
25
+ type: string;
26
+ };
27
+ height: {
28
+ type: string[];
29
+ };
30
+ width: {
31
+ type: string[];
32
+ };
33
+ color: {
34
+ type: string;
35
+ };
36
+ };
37
+ };
38
+ alt: {
39
+ type: string;
40
+ contentType: string;
41
+ };
42
+ disableCompress: {
43
+ type: string;
44
+ };
45
+ };
46
+ };
10
47
  children: {
11
48
  type: string;
12
49
  items: {
@@ -106,6 +143,43 @@ export declare const CardLayoutBlock: {
106
143
  additionalProperties: boolean;
107
144
  properties: {};
108
145
  };
146
+ background: {
147
+ type: string;
148
+ additionalProperties: boolean;
149
+ required: string[];
150
+ properties: {
151
+ src: {
152
+ type: string;
153
+ pattern: string;
154
+ };
155
+ style: {
156
+ type: string;
157
+ additionalProperties: boolean;
158
+ required: never[];
159
+ properties: {
160
+ backgroundColor: {
161
+ type: string;
162
+ };
163
+ height: {
164
+ type: string[];
165
+ };
166
+ width: {
167
+ type: string[];
168
+ };
169
+ color: {
170
+ type: string;
171
+ };
172
+ };
173
+ };
174
+ alt: {
175
+ type: string;
176
+ contentType: string;
177
+ };
178
+ disableCompress: {
179
+ type: string;
180
+ };
181
+ };
182
+ };
109
183
  children: {
110
184
  type: string;
111
185
  items: {
@@ -1,8 +1,9 @@
1
+ import { ImageObjectProps } from '../../components/Image/schema';
1
2
  import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, containerSizesObject, } from '../../schema/validators/common';
2
3
  export const CardLayoutProps = {
3
4
  additionalProperties: false,
4
5
  required: [],
5
- properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { colSizes: containerSizesObject, children: ChildrenCardsProps }),
6
+ properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { colSizes: containerSizesObject, background: ImageObjectProps, children: ChildrenCardsProps }),
6
7
  };
7
8
  export const CardLayoutBlock = {
8
9
  'card-layout-block': CardLayoutProps,
@@ -266,20 +266,10 @@ export declare const HeaderBackgroundProps: {
266
266
  type: string;
267
267
  };
268
268
  height: {
269
- oneOf: ({
270
- type: string;
271
- enum?: undefined;
272
- } | {
273
- type: string;
274
- enum: string[];
275
- })[];
276
- };
277
- width: {
278
269
  type: string;
279
270
  };
280
- justifyContent: {
271
+ width: {
281
272
  type: string;
282
- enum: string[];
283
273
  };
284
274
  };
285
275
  };
@@ -736,20 +726,10 @@ export declare const HeaderProperties: {
736
726
  type: string;
737
727
  };
738
728
  height: {
739
- oneOf: ({
740
- type: string;
741
- enum?: undefined;
742
- } | {
743
- type: string;
744
- enum: string[];
745
- })[];
746
- };
747
- width: {
748
729
  type: string;
749
730
  };
750
- justifyContent: {
731
+ width: {
751
732
  type: string;
752
- enum: string[];
753
733
  };
754
734
  };
755
735
  };
@@ -1255,20 +1235,10 @@ export declare const HeaderBlock: {
1255
1235
  type: string;
1256
1236
  };
1257
1237
  height: {
1258
- oneOf: ({
1259
- type: string;
1260
- enum?: undefined;
1261
- } | {
1262
- type: string;
1263
- enum: string[];
1264
- })[];
1265
- };
1266
- width: {
1267
1238
  type: string;
1268
1239
  };
1269
- justifyContent: {
1240
+ width: {
1270
1241
  type: string;
1271
- enum: string[];
1272
1242
  };
1273
1243
  };
1274
1244
  };
@@ -457,20 +457,10 @@ export declare const HeaderSliderBlock: {
457
457
  type: string;
458
458
  };
459
459
  height: {
460
- oneOf: ({
461
- type: string;
462
- enum?: undefined;
463
- } | {
464
- type: string;
465
- enum: string[];
466
- })[];
467
- };
468
- width: {
469
460
  type: string;
470
461
  };
471
- justifyContent: {
462
+ width: {
472
463
  type: string;
473
- enum: string[];
474
464
  };
475
465
  };
476
466
  };
@@ -260,20 +260,10 @@ export declare const Media: {
260
260
  type: string;
261
261
  };
262
262
  height: {
263
- oneOf: ({
264
- type: string;
265
- enum?: undefined;
266
- } | {
267
- type: string;
268
- enum: string[];
269
- })[];
270
- };
271
- width: {
272
263
  type: string;
273
264
  };
274
- justifyContent: {
265
+ width: {
275
266
  type: string;
276
- enum: string[];
277
267
  };
278
268
  };
279
269
  };
@@ -941,20 +931,10 @@ export declare const MediaBlock: {
941
931
  type: string;
942
932
  };
943
933
  height: {
944
- oneOf: ({
945
- type: string;
946
- enum?: undefined;
947
- } | {
948
- type: string;
949
- enum: string[];
950
- })[];
951
- };
952
- width: {
953
934
  type: string;
954
935
  };
955
- justifyContent: {
936
+ width: {
956
937
  type: string;
957
- enum: string[];
958
938
  };
959
939
  };
960
940
  };
@@ -276,20 +276,10 @@ export declare const PromoFeaturesItem: {
276
276
  type: string;
277
277
  };
278
278
  height: {
279
- oneOf: ({
280
- type: string;
281
- enum?: undefined;
282
- } | {
283
- type: string;
284
- enum: string[];
285
- })[];
286
- };
287
- width: {
288
279
  type: string;
289
280
  };
290
- justifyContent: {
281
+ width: {
291
282
  type: string;
292
- enum: string[];
293
283
  };
294
284
  };
295
285
  };
@@ -271,20 +271,10 @@ export declare const tabsItem: {
271
271
  type: string;
272
272
  };
273
273
  height: {
274
- oneOf: ({
275
- type: string;
276
- enum?: undefined;
277
- } | {
278
- type: string;
279
- enum: string[];
280
- })[];
281
- };
282
- width: {
283
274
  type: string;
284
275
  };
285
- justifyContent: {
276
+ width: {
286
277
  type: string;
287
- enum: string[];
288
278
  };
289
279
  };
290
280
  };
@@ -11,4 +11,8 @@ 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%;
14
18
  }
@@ -1,72 +1,12 @@
1
- import React, { useCallback, useEffect, useRef, useState } from 'react';
2
- import { v4 as uuidv4 } from 'uuid';
1
+ import React from 'react';
3
2
  import { block } from '../../../utils';
4
3
  import i18n from './i18n';
5
4
  import './Iframe.css';
6
5
  const b = block('media-component-iframe');
7
6
  const Iframe = (props) => {
8
7
  const { iframe, margins = true } = props;
9
- const { height = 400, src, width = '100%', name, title, justifyContent = 'center' } = iframe;
10
- const formContainerRef = useRef(null);
11
- const iframeRef = useRef();
12
- const [iframeId] = useState(uuidv4());
13
- const updateFormIframe = useCallback((container) => {
14
- if (iframeRef.current) {
15
- iframeRef.current.src = src;
16
- }
17
- else {
18
- const iframeWidth = typeof width === 'number' ? `${width}px` : width;
19
- let iframeHeight = typeof height === 'number' ? `${height}px` : height;
20
- if (height === 'auto') {
21
- iframeHeight = undefined;
22
- }
23
- iframeRef.current = document.createElement('iframe');
24
- iframeRef.current.src = src;
25
- iframeRef.current.id = iframeId;
26
- iframeRef.current.name = name || iframeId;
27
- iframeRef.current.setAttribute('loading', 'lazy');
28
- iframeRef.current.setAttribute('title', title || i18n('iframe-title'));
29
- iframeRef.current.frameBorder = '0';
30
- iframeRef.current.scrolling = 'no';
31
- iframeRef.current.width = iframeWidth;
32
- iframeRef.current.style.width = iframeWidth;
33
- if (iframeHeight) {
34
- iframeRef.current.style.height = iframeHeight;
35
- }
36
- container.appendChild(iframeRef.current);
37
- }
38
- }, [src, width, iframeId, name, title, height]);
39
- const handleMessage = useCallback(({ data }) => {
40
- if (height !== 'auto' && typeof height === 'number' && iframeRef.current) {
41
- iframeRef.current.height = `${height}px`;
42
- return;
43
- }
44
- try {
45
- const parsed = JSON.parse(data);
46
- const iframeHeight = parsed['iframe-height'];
47
- const { message, name: iframeName } = parsed;
48
- if (iframeName !== name && iframeName !== iframeId) {
49
- return;
50
- }
51
- if (iframeRef.current && iframeHeight && !message) {
52
- iframeRef.current.height = `${iframeHeight}px`;
53
- }
54
- }
55
- catch (error) {
56
- return;
57
- }
58
- }, [height, iframeId, name]);
59
- const addIframe = useCallback(() => {
60
- const container = formContainerRef.current;
61
- if (container) {
62
- updateFormIframe(container);
63
- window.addEventListener('message', handleMessage, { passive: true });
64
- }
65
- }, [updateFormIframe, handleMessage]);
66
- useEffect(() => {
67
- addIframe();
68
- return () => window.removeEventListener('message', handleMessage);
69
- }, [addIframe, handleMessage]);
70
- return iframe ? (React.createElement("div", { className: b({ margins }), ref: formContainerRef, style: { height, textAlign: justifyContent } })) : null;
8
+ const { height = 400, src, width, name, title } = iframe;
9
+ return iframe ? (React.createElement("div", { className: b({ margins }), style: { height } },
10
+ React.createElement("iframe", { className: b('item'), loading: "lazy", title: title || i18n('iframe-title'), frameBorder: 0, src: src, width: width, height: height, name: name }))) : null;
71
11
  };
72
12
  export 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" | "justifyContent" | "offsets" | "orders" | "alignSelf"> & React.RefAttributes<HTMLDivElement>>;
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>>;
@@ -234,6 +234,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
234
234
  titleClassName?: string;
235
235
  description?: string;
236
236
  colSizes?: GridColumnSizesType;
237
+ background?: BackgroundImageProps;
237
238
  }
238
239
  export type FilterTag = {
239
240
  id: string;
@@ -257,14 +257,12 @@ export interface DataLensObjectProps {
257
257
  id: string;
258
258
  theme: 'dark' | 'light';
259
259
  }
260
- export type JustifyValues = 'left' | 'right' | 'center';
261
260
  export interface IframeProps {
262
261
  src: string;
263
- width?: number | string;
264
- height?: number | string;
262
+ width?: number;
263
+ height?: number;
265
264
  title?: string;
266
265
  name?: string;
267
- justifyContent?: JustifyValues;
268
266
  }
269
267
  export type DataLensProps = string | DataLensObjectProps;
270
268
  export interface AuthorItem {
@@ -1530,20 +1530,10 @@ export declare const cardSchemas: {
1530
1530
  type: string;
1531
1531
  };
1532
1532
  height: {
1533
- oneOf: ({
1534
- type: string;
1535
- enum?: undefined;
1536
- } | {
1537
- type: string;
1538
- enum: string[];
1539
- })[];
1540
- };
1541
- width: {
1542
1533
  type: string;
1543
1534
  };
1544
- justifyContent: {
1535
+ width: {
1545
1536
  type: string;
1546
- enum: string[];
1547
1537
  };
1548
1538
  };
1549
1539
  };
@@ -1388,20 +1388,10 @@ export declare const MediaProps: {
1388
1388
  type: string;
1389
1389
  };
1390
1390
  height: {
1391
- oneOf: ({
1392
- type: string;
1393
- enum?: undefined;
1394
- } | {
1395
- type: string;
1396
- enum: string[];
1397
- })[];
1398
- };
1399
- width: {
1400
1391
  type: string;
1401
1392
  };
1402
- justifyContent: {
1393
+ width: {
1403
1394
  type: string;
1404
- enum: string[];
1405
1395
  };
1406
1396
  };
1407
1397
  };
@@ -522,15 +522,11 @@ const IframeProps = {
522
522
  type: 'string',
523
523
  },
524
524
  height: {
525
- oneOf: [{ type: 'number' }, { type: 'string', enum: ['auto'] }],
525
+ type: 'number',
526
526
  },
527
527
  width: {
528
528
  type: 'number',
529
529
  },
530
- justifyContent: {
531
- type: 'string',
532
- enum: ['left', 'right', 'center'],
533
- },
534
530
  },
535
531
  };
536
532
  export const MediaProps = {
@@ -261,20 +261,10 @@ export declare const LayoutItem: {
261
261
  type: string;
262
262
  };
263
263
  height: {
264
- oneOf: ({
265
- type: string;
266
- enum?: undefined;
267
- } | {
268
- type: string;
269
- enum: string[];
270
- })[];
271
- };
272
- width: {
273
264
  type: string;
274
265
  };
275
- justifyContent: {
266
+ width: {
276
267
  type: string;
277
- enum: string[];
278
268
  };
279
269
  };
280
270
  };
@@ -266,20 +266,10 @@ export declare const MediaCardBlock: {
266
266
  type: string;
267
267
  };
268
268
  height: {
269
- oneOf: ({
270
- type: string;
271
- enum?: undefined;
272
- } | {
273
- type: string;
274
- enum: string[];
275
- })[];
276
- };
277
- width: {
278
269
  type: string;
279
270
  };
280
- justifyContent: {
271
+ width: {
281
272
  type: string;
282
- enum: string[];
283
273
  };
284
274
  };
285
275
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.44.0-beta.0",
3
+ "version": "4.44.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -205,8 +205,5 @@
205
205
  "*.{json,yaml,yml,md}": [
206
206
  "prettier --write"
207
207
  ]
208
- },
209
- "publishConfig": {
210
- "tag": "beta"
211
208
  }
212
209
  }
@@ -234,6 +234,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
234
234
  titleClassName?: string;
235
235
  description?: string;
236
236
  colSizes?: GridColumnSizesType;
237
+ background?: BackgroundImageProps;
237
238
  }
238
239
  export type FilterTag = {
239
240
  id: string;
@@ -257,14 +257,12 @@ export interface DataLensObjectProps {
257
257
  id: string;
258
258
  theme: 'dark' | 'light';
259
259
  }
260
- export type JustifyValues = 'left' | 'right' | 'center';
261
260
  export interface IframeProps {
262
261
  src: string;
263
- width?: number | string;
264
- height?: number | string;
262
+ width?: number;
263
+ height?: number;
265
264
  title?: string;
266
265
  name?: string;
267
- justifyContent?: JustifyValues;
268
266
  }
269
267
  export type DataLensProps = string | DataLensObjectProps;
270
268
  export interface AuthorItem {