@doyourjob/gravity-ui-page-constructor 5.31.39 → 5.31.40-b

package/build/cjs/blocks/Quotes/Quotes.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-quotes-block {
-  position: relative;
+  overflow-x: hidden;
 }
 .pc-quotes-block__wrap {
-  overflow-x: hidden;
+  position: relative;
 }
 .pc-quotes-block .pc-SliderBlock_only-arrows {
   padding: 0;

package/build/cjs/blocks/Quotes/Quotes.js

@@ -4,31 +4,22 @@ exports.QuotesBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const theme_1 = require("../../context/theme");
+const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Slider_1 = require("../Slider/Slider");
 const QuotesItem_1 = tslib_1.__importDefault(require("./QuotesItem/QuotesItem"));
 const b = (0, utils_1.block)('quotes-block');
 const QuotesBlock = ({ theme: localTheme, items, background, backgroundColor, }) => {
     const divRef = (0, react_1.useRef)(null);
-    const wrapRef = (0, react_1.useRef)(null);
     const globalTheme = (0, theme_1.useTheme)();
     const theme = localTheme || globalTheme;
     (0, react_1.useEffect)(() => {
         if (!divRef.current)
             return () => { };
         const resizeObserver = new ResizeObserver(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c;
             (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--quotes-block-width');
-            const divWidth = (_b = divRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth;
-            (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.style.setProperty('--quotes-block-width', `${divWidth}px`);
-            if (divWidth) {
-                (_d = wrapRef.current) === null || _d === void 0 ? void 0 : _d.style.setProperty('width', `${window.innerWidth}px`);
-                const space = (window.innerWidth - divWidth) / 2;
-                (_e = wrapRef.current) === null || _e === void 0 ? void 0 : _e.style.setProperty('padding-left', `${space}px`);
-                (_f = wrapRef.current) === null || _f === void 0 ? void 0 : _f.style.setProperty('padding-right', `${space}px`);
-                (_g = wrapRef.current) === null || _g === void 0 ? void 0 : _g.style.setProperty('margin-left', `-${space}px`);
-                (_h = wrapRef.current) === null || _h === void 0 ? void 0 : _h.style.setProperty('margin-right', `-${space}px`);
-            }
+            (_b = divRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--quotes-block-width', `${(_c = divRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth}px`);
         });
         resizeObserver.observe(divRef.current);
         return () => {
@@ -44,10 +35,11 @@ const QuotesBlock = ({ theme: localTheme, items, background, backgroundColor, })
         }
         return undefined;
     }, [background, backgroundColor]);
-    return (react_1.default.createElement("div", { ref: divRef, className: b({ theme }) },
-        react_1.default.createElement("div", { ref: wrapRef, className: b('wrap') },
-            react_1.default.createElement(Slider_1.SliderBlock, { slidesToShow: 1, lazyLoad: "progressive", adaptive: false }, items.map((item, index) => (react_1.default.createElement(QuotesItem_1.default, Object.assign({ key: index, theme: theme }, item)))))),
-        react_1.default.createElement("div", { className: b('bg'), style: backgroundStyle })));
+    return (react_1.default.createElement(grid_1.Grid, { className: b({ theme }) },
+        react_1.default.createElement(grid_1.Row, null,
+            react_1.default.createElement("div", { ref: divRef, className: b('wrap') },
+                react_1.default.createElement(Slider_1.SliderBlock, { slidesToShow: 1, lazyLoad: "progressive", adaptive: false }, items.map((item, index) => (react_1.default.createElement(QuotesItem_1.default, Object.assign({ key: index, theme: theme }, item))))),
+                react_1.default.createElement("div", { className: b('bg'), style: backgroundStyle })))));
 };
 exports.QuotesBlock = QuotesBlock;
 exports.default = exports.QuotesBlock;

package/build/cjs/components/BlockBase/BlockBase.d.ts

@@ -1,5 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { BlockBaseProps, ClassNameProps, QAProps } from '../../models';
-export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps;
+export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps & {
+    withoutGrid?: boolean;
+};
 declare const BlockBase: (props: BlockBaseFullProps) => JSX.Element;
 export default BlockBase;

package/build/cjs/components/BlockBase/BlockBase.js

@@ -1,21 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const Anchor_1 = tslib_1.__importDefault(require("../Anchor/Anchor"));
 const b = (0, utils_1.block)('block-base');
 const BlockBase = (props) => {
-    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, } = props;
+    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, withoutGrid, } = props;
     const { top, bottom } = indent || (resetPaddings ? { top: '0', bottom: '0' } : { top: 'l', bottom: 'l' });
     const isBackgroundUrl = /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(backgroundFull || '');
     const visibilityClasses = (0, utils_1.getBlockVisibilityClasses)(visibility);
-    return (react_1.default.createElement(grid_1.Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
+    const render = (0, react_1.useMemo)(() => (react_1.default.createElement(grid_1.Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
         anchor && react_1.default.createElement(Anchor_1.default, { id: anchor.url, className: b('anchor') }),
         backgroundFull && (react_1.default.createElement("div", { className: b('background-full', { top }), style: isBackgroundUrl
                 ? { backgroundImage: `url(${backgroundFull})` }
                 : { backgroundColor: backgroundFull } })),
-        children));
+        children)), [
+        anchor,
+        backgroundFull,
+        bottom,
+        children,
+        className,
+        hidden,
+        isBackgroundUrl,
+        qa,
+        resetPaddings,
+        top,
+        visibilityClasses,
+        visible,
+    ]);
+    if (withoutGrid) {
+        return render;
+    }
+    return (react_1.default.createElement(grid_1.Grid, null,
+        react_1.default.createElement(grid_1.Row, null, render)));
 };
 exports.default = BlockBase;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -12,13 +12,11 @@ const animateContext_1 = require("../../context/animateContext");
 const innerContext_1 = require("../../context/innerContext");
 const projectSettingsContext_1 = require("../../context/projectSettingsContext");
 const theme_1 = require("../../context/theme");
-const grid_1 = require("../../grid");
 const models_1 = require("../../models");
 const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout"));
 const utils_1 = require("../../utils");
 const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const ConstructorItem_1 = require("./components/ConstructorItem");
-const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
     const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, isBranded, microdata, } = props;
@@ -52,8 +50,7 @@ const Constructor = (props) => {
                 react_1.default.createElement(Layout_1.default, { navigation: navigation },
                     renderMenu && renderMenu(),
                     header && (react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header, blockKey: models_1.BlockType.HeaderBlock })),
-                    react_1.default.createElement(grid_1.Grid, null, restBlocks && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
-                        react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks }))))),
+                    restBlocks && react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks })),
                 isBranded && react_1.default.createElement(BrandFooter_1.default, null)))));
 };
 exports.Constructor = Constructor;

package/build/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
 const BlockDecoration_1 = require("../../../../customization/BlockDecoration");
+const models_1 = require("../../../../models");
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
 const ConstructorBlock = ({ index = 0, data, children, }) => {
@@ -19,7 +20,8 @@ const ConstructorBlock = ({ index = 0, data, children, }) => {
         'indent',
         'backgroundFull',
     ]), [data]);
+    const withoutGrid = data.type === models_1.BlockType.QuotesBlock;
     return (react_1.default.createElement(BlockDecoration_1.BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+        react_1.default.createElement(BlockBase_1.default, Object.assign({ className: b({ type }) }, blockBaseProps, { withoutGrid: withoutGrid }), children)));
 };
 exports.ConstructorBlock = ConstructorBlock;

package/build/esm/blocks/Quotes/Quotes.css

@@ -1,10 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .pc-quotes-block {
-  position: relative;
+  overflow-x: hidden;
 }
 .pc-quotes-block__wrap {
-  overflow-x: hidden;
+  position: relative;
 }
 .pc-quotes-block .pc-SliderBlock_only-arrows {
   padding: 0;

package/build/esm/blocks/Quotes/Quotes.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useTheme } from '../../context/theme';
+import { Grid, Row } from '../../grid';
 import { block } from '../../utils';
 import { SliderBlock } from '../Slider/Slider';
 import QuotesItem from './QuotesItem/QuotesItem';
@@ -7,25 +8,15 @@ import './Quotes.css';
 const b = block('quotes-block');
 export const QuotesBlock = ({ theme: localTheme, items, background, backgroundColor, }) => {
     const divRef = useRef(null);
-    const wrapRef = useRef(null);
     const globalTheme = useTheme();
     const theme = localTheme || globalTheme;
     useEffect(() => {
         if (!divRef.current)
             return () => { };
         const resizeObserver = new ResizeObserver(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c;
             (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--quotes-block-width');
-            const divWidth = (_b = divRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth;
-            (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.style.setProperty('--quotes-block-width', `${divWidth}px`);
-            if (divWidth) {
-                (_d = wrapRef.current) === null || _d === void 0 ? void 0 : _d.style.setProperty('width', `${window.innerWidth}px`);
-                const space = (window.innerWidth - divWidth) / 2;
-                (_e = wrapRef.current) === null || _e === void 0 ? void 0 : _e.style.setProperty('padding-left', `${space}px`);
-                (_f = wrapRef.current) === null || _f === void 0 ? void 0 : _f.style.setProperty('padding-right', `${space}px`);
-                (_g = wrapRef.current) === null || _g === void 0 ? void 0 : _g.style.setProperty('margin-left', `-${space}px`);
-                (_h = wrapRef.current) === null || _h === void 0 ? void 0 : _h.style.setProperty('margin-right', `-${space}px`);
-            }
+            (_b = divRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--quotes-block-width', `${(_c = divRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth}px`);
         });
         resizeObserver.observe(divRef.current);
         return () => {
@@ -41,9 +32,10 @@ export const QuotesBlock = ({ theme: localTheme, items, background, backgroundCo
         }
         return undefined;
     }, [background, backgroundColor]);
-    return (React.createElement("div", { ref: divRef, className: b({ theme }) },
-        React.createElement("div", { ref: wrapRef, className: b('wrap') },
-            React.createElement(SliderBlock, { slidesToShow: 1, lazyLoad: "progressive", adaptive: false }, items.map((item, index) => (React.createElement(QuotesItem, Object.assign({ key: index, theme: theme }, item)))))),
-        React.createElement("div", { className: b('bg'), style: backgroundStyle })));
+    return (React.createElement(Grid, { className: b({ theme }) },
+        React.createElement(Row, null,
+            React.createElement("div", { ref: divRef, className: b('wrap') },
+                React.createElement(SliderBlock, { slidesToShow: 1, lazyLoad: "progressive", adaptive: false }, items.map((item, index) => (React.createElement(QuotesItem, Object.assign({ key: index, theme: theme }, item))))),
+                React.createElement("div", { className: b('bg'), style: backgroundStyle })))));
 };
 export default QuotesBlock;

package/build/esm/components/BlockBase/BlockBase.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { BlockBaseProps, ClassNameProps, QAProps } from '../../models';
 import './BlockBase.css';
-export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps;
+export type BlockBaseFullProps = BlockBaseProps & ClassNameProps & PropsWithChildren & QAProps & {
+    withoutGrid?: boolean;
+};
 declare const BlockBase: (props: BlockBaseFullProps) => JSX.Element;
 export default BlockBase;

package/build/esm/components/BlockBase/BlockBase.js

@@ -1,19 +1,37 @@
-import React from 'react';
-import { Col } from '../../grid';
+import React, { useMemo } from 'react';
+import { Col, Grid, Row } from '../../grid';
 import { block, getBlockVisibilityClasses } from '../../utils';
 import Anchor from '../Anchor/Anchor';
 import './BlockBase.css';
 const b = block('block-base');
 const BlockBase = (props) => {
-    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, } = props;
+    const { anchor, visibility, indent, backgroundFull, visible, hidden, children, className, resetPaddings, qa, withoutGrid, } = props;
     const { top, bottom } = indent || (resetPaddings ? { top: '0', bottom: '0' } : { top: 'l', bottom: 'l' });
     const isBackgroundUrl = /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(backgroundFull || '');
     const visibilityClasses = getBlockVisibilityClasses(visibility);
-    return (React.createElement(Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
+    const render = useMemo(() => (React.createElement(Col, { className: b(Object.assign({ ['reset-paddings']: resetPaddings, indentTop: top, indentBottom: bottom }, visibilityClasses), className), hidden: hidden, visible: visible, reset: true, qa: qa },
         anchor && React.createElement(Anchor, { id: anchor.url, className: b('anchor') }),
         backgroundFull && (React.createElement("div", { className: b('background-full', { top }), style: isBackgroundUrl
                 ? { backgroundImage: `url(${backgroundFull})` }
                 : { backgroundColor: backgroundFull } })),
-        children));
+        children)), [
+        anchor,
+        backgroundFull,
+        bottom,
+        children,
+        className,
+        hidden,
+        isBackgroundUrl,
+        qa,
+        resetPaddings,
+        top,
+        visibilityClasses,
+        visible,
+    ]);
+    if (withoutGrid) {
+        return render;
+    }
+    return (React.createElement(Grid, null,
+        React.createElement(Row, null, render)));
 };
 export default BlockBase;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -9,13 +9,11 @@ import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { useTheme } from '../../context/theme';
-import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
 import Layout from '../../navigation/containers/Layout/Layout';
 import { block as cnBlock, getCustomItems, getCustomTypes, getHeaderBlock, getOrderedBlocks, getThemedValue, } from '../../utils';
 import { ConstructorBlocks } from './components/ConstructorBlocks';
 import { ConstructorHeader } from './components/ConstructorItem';
-import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
@@ -50,8 +48,7 @@ export const Constructor = (props) => {
                 React.createElement(Layout, { navigation: navigation },
                     renderMenu && renderMenu(),
                     header && (React.createElement(ConstructorHeader, { data: header, blockKey: BlockType.HeaderBlock })),
-                    React.createElement(Grid, null, restBlocks && (React.createElement(ConstructorRow, null,
-                        React.createElement(ConstructorBlocks, { items: restBlocks }))))),
+                    restBlocks && React.createElement(ConstructorBlocks, { items: restBlocks })),
                 isBranded && React.createElement(BrandFooter, null)))));
 };
 export const PageConstructor = (props) => {

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import pick from 'lodash/pick';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { BlockDecoration } from '../../../../customization/BlockDecoration';
+import { BlockType, } from '../../../../models';
 import { block } from '../../../../utils';
 import './ConstructorBlock.css';
 const b = block('constructor-block');
@@ -16,6 +17,7 @@ export const ConstructorBlock = ({ index = 0, data, children, }) => {
         'indent',
         'backgroundFull',
     ]), [data]);
+    const withoutGrid = data.type === BlockType.QuotesBlock;
     return (React.createElement(BlockDecoration, Object.assign({ type: type, index: index }, blockBaseProps),
-        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps), children)));
+        React.createElement(BlockBase, Object.assign({ className: b({ type }) }, blockBaseProps, { withoutGrid: withoutGrid }), children)));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doyourjob/gravity-ui-page-constructor",
-  "version": "5.31.39",
+  "version": "5.31.40-b",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {