@gravity-ui/page-constructor 2.22.0 → 2.23.0-alpha.0

package/build/cjs/blocks/CardLayout/CardLayout.js

@@ -12,6 +12,6 @@ const DEFAULT_SIZES = {
 };
 const b = (0, utils_1.block)('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
-    react_1.default.createElement(components_1.BlockHeader, { title: title, description: description }),
+    (title || description) && react_1.default.createElement(components_1.BlockHeader, { title: title, description: description }),
     react_1.default.createElement(grid_1.Row, null, react_1.default.Children.map(children, (child, index) => (react_1.default.createElement(grid_1.Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 exports.default = CardLayout;

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

@@ -1,6 +1,6 @@
 export declare const CardLayoutProps: {
     additionalProperties: boolean;
-    required: string[];
+    required: never[];
     properties: {
         colSizes: {
             type: string;
@@ -76,7 +76,7 @@ export declare const CardLayoutProps: {
 export declare const CardLayoutBlock: {
     'card-layout-block': {
         additionalProperties: boolean;
-        required: string[];
+        required: never[];
         properties: {
             colSizes: {
                 type: string;

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

@@ -4,7 +4,7 @@ exports.CardLayoutBlock = exports.CardLayoutProps = void 0;
 const common_1 = require("../../schema/validators/common");
 exports.CardLayoutProps = {
     additionalProperties: false,
-    required: ['title'],
+    required: [],
     properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { colSizes: common_1.containerSizesObject, children: common_1.ChildrenCardsProps }),
 };
 exports.CardLayoutBlock = {

package/build/cjs/blocks/FilterBlock/FilterBlock.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const __1 = require("..");
 const components_1 = require("../../components");
 const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs"));
-const ConstructorBlocks_1 = require("../../containers/PageConstructor/components/ConstructorBlocks");
+const ConstructorItem_1 = require("../../containers/PageConstructor/components/ConstructorItem");
 const grid_1 = require("../../grid");
-const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const i18n_1 = tslib_1.__importDefault(require("./i18n"));
 const b = (0, utils_1.block)('filter-block');
@@ -24,25 +24,21 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
-    const container = (0, react_1.useMemo)(() => {
+    const cards = (0, react_1.useMemo)(() => {
         const itemsToShow = actualTag
             ? items.filter((item) => item.tags.includes(actualTag))
             : items;
-        return [
-            {
-                type: models_1.BlockType.CardLayoutBlock,
-                title: '',
-                colSizes: colSizes,
-                children: itemsToShow.map((item) => item.card),
-            },
-        ];
-    }, [actualTag, items, colSizes]);
+        return itemsToShow.map((item) => item.card);
+    }, [actualTag, items]);
     return (react_1.default.createElement(components_1.AnimateBlock, { className: b(), animate: animated },
         title && (react_1.default.createElement(components_1.BlockHeader, { className: b('title', { centered: centered }), title: title, description: description })),
         tabButtons.length && (react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         react_1.default.createElement(grid_1.Row, { className: b('block-container') },
-            react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: container }))));
+            react_1.default.createElement(__1.CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+                const key = (0, utils_1.getBlockKey)(card, index);
+                return react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key, key: key });
+            })))));
 };
 exports.default = FilterBlock;

package/build/cjs/blocks/Header/Header.css

@@ -6,7 +6,6 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
-  margin: 16px 0;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;
@@ -30,16 +29,16 @@ unpredictable css rules order in build */
   margin: 16px 0;
 }
 .pc-header-block__content_vertical-offset_s {
-  padding: 48px 0;
+  padding: 64px 0;
 }
 .pc-header-block__content_vertical-offset_m {
-  padding: calc(96px - 16px) 0;
+  padding: 96px 0;
 }
 .pc-header-block__content_vertical-offset_l {
-  padding: calc(128px - 16px) 0;
+  padding: 128px 0;
 }
 .pc-header-block__content_vertical-offset_xl {
-  padding: calc(160px - 16px) 0;
+  padding: 160px 0;
 }
 .pc-header-block__content_offset_large {
   padding: calc(128px - 16px) 0 16px;
@@ -95,10 +94,10 @@ unpredictable css rules order in build */
 .pc-header-block__media {
   position: absolute;
   display: none;
-  top: 0;
+  top: 16px;
   right: 0;
   width: 50%;
-  height: 100%;
+  height: calc(100% - 2 * 16px);
   overflow: hidden;
   object-fit: cover;
   border-radius: var(--pc-border-radius);

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

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/build/cjs/models/navigation.d.ts

@@ -63,6 +63,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/cjs/navigation/components/Header/Header.css

@@ -9,6 +9,8 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
+}
+.pc-header_with-border {
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .pc-header__wrapper {

package/build/cjs/navigation/components/Header/Header.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const Control_1 = tslib_1.__importDefault(require("../../../components/Control/Control"));
 const OutsideClick_1 = tslib_1.__importDefault(require("../../../components/OutsideClick/OutsideClick"));
 const grid_1 = require("../../../grid");
@@ -27,9 +28,10 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 };
 const iconSizeKey = 'iconSize';
 const Header = ({ data, logo }) => {
-    const { leftItems, rightItems, iconSize = 20 } = data;
+    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = (0, react_1.useState)(false);
     const [activeItemId, setactiveItemId] = (0, react_1.useState)(undefined);
+    const [withHeaderBorder, setWithHeaderBorder] = (0, react_1.useState)(withBorder);
     const getNavigationItemWithIconSize = (0, react_1.useCallback)((item) => {
         if (!(iconSizeKey in item)) {
             return Object.assign(Object.assign({}, item), { iconSize });
@@ -50,7 +52,19 @@ const Header = ({ data, logo }) => {
     const hideSidebar = (0, react_1.useCallback)(() => {
         setIsSidebarOpened(false);
     }, []);
-    return (react_1.default.createElement(grid_1.Grid, { className: b() },
+    (0, react_1.useEffect)(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 0 && !withBorder) {
+                setWithHeaderBorder(true);
+            }
+            else if (window.scrollY === 0 && !withBorder) {
+                setWithHeaderBorder(false);
+            }
+        };
+        window.addEventListener('scroll', lodash_1.default.debounce(handleScroll, 5), { passive: true });
+        return () => window.removeEventListener('scroll', lodash_1.default.debounce(handleScroll, 5));
+    });
+    return (react_1.default.createElement(grid_1.Grid, { className: b({ 'with-border': withHeaderBorder }) },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, null,
                 react_1.default.createElement("header", { className: b('wrapper') },

package/build/esm/blocks/CardLayout/CardLayout.js

@@ -10,6 +10,6 @@ const DEFAULT_SIZES = {
 };
 const b = block('card-layout-block');
 const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, }) => (React.createElement(AnimateBlock, { className: b(), animate: animated },
-    React.createElement(BlockHeader, { title: title, description: description }),
+    (title || description) && React.createElement(BlockHeader, { title: title, description: description }),
     React.createElement(Row, null, React.Children.map(children, (child, index) => (React.createElement(Col, { key: index, sizes: colSizes, className: b('item') }, child))))));
 export default CardLayout;

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

@@ -1,6 +1,6 @@
 export declare const CardLayoutProps: {
     additionalProperties: boolean;
-    required: string[];
+    required: never[];
     properties: {
         colSizes: {
             type: string;
@@ -76,7 +76,7 @@ export declare const CardLayoutProps: {
 export declare const CardLayoutBlock: {
     'card-layout-block': {
         additionalProperties: boolean;
-        required: string[];
+        required: never[];
         properties: {
             colSizes: {
                 type: string;

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

@@ -1,7 +1,7 @@
 import { AnimatableProps, BlockBaseProps, BlockHeaderProps, ChildrenCardsProps, containerSizesObject, } from '../../schema/validators/common';
 export const CardLayoutProps = {
     additionalProperties: false,
-    required: ['title'],
+    required: [],
     properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { colSizes: containerSizesObject, children: ChildrenCardsProps }),
 };
 export const CardLayoutBlock = {

package/build/esm/blocks/FilterBlock/FilterBlock.js

@@ -1,10 +1,10 @@
 import React, { useMemo, useState } from 'react';
+import { CardLayoutBlock } from '..';
 import { AnimateBlock, BlockHeader } from '../../components';
 import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
-import { ConstructorBlocks } from '../../containers/PageConstructor/components/ConstructorBlocks';
+import { ConstructorItem } from '../../containers/PageConstructor/components/ConstructorItem';
 import { Col, Row } from '../../grid';
-import { BlockType } from '../../models';
-import { block } from '../../utils';
+import { block, getBlockKey } from '../../utils';
 import i18n from './i18n';
 import './FilterBlock.css';
 const b = block('filter-block');
@@ -22,25 +22,21 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
-    const container = useMemo(() => {
+    const cards = useMemo(() => {
         const itemsToShow = actualTag
             ? items.filter((item) => item.tags.includes(actualTag))
             : items;
-        return [
-            {
-                type: BlockType.CardLayoutBlock,
-                title: '',
-                colSizes: colSizes,
-                children: itemsToShow.map((item) => item.card),
-            },
-        ];
-    }, [actualTag, items, colSizes]);
+        return itemsToShow.map((item) => item.card);
+    }, [actualTag, items]);
     return (React.createElement(AnimateBlock, { className: b(), animate: animated },
         title && (React.createElement(BlockHeader, { className: b('title', { centered: centered }), title: title, description: description })),
         tabButtons.length && (React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: setSelectedTag, tabSize: tagButtonSize })))),
         React.createElement(Row, { className: b('block-container') },
-            React.createElement(ConstructorBlocks, { items: container }))));
+            React.createElement(CardLayoutBlock, { title: "", colSizes: colSizes }, cards.map((card, index) => {
+                const key = getBlockKey(card, index);
+                return React.createElement(ConstructorItem, { data: card, blockKey: key, key: key });
+            })))));
 };
 export default FilterBlock;

package/build/esm/blocks/Header/Header.css

@@ -6,7 +6,6 @@
 unpredictable css rules order in build */
 .pc-header-block {
   position: relative;
-  margin: 16px 0;
 }
 .pc-header-block_full-width {
   --pc-border-radius: 0;
@@ -30,16 +29,16 @@ unpredictable css rules order in build */
   margin: 16px 0;
 }
 .pc-header-block__content_vertical-offset_s {
-  padding: 48px 0;
+  padding: 64px 0;
 }
 .pc-header-block__content_vertical-offset_m {
-  padding: calc(96px - 16px) 0;
+  padding: 96px 0;
 }
 .pc-header-block__content_vertical-offset_l {
-  padding: calc(128px - 16px) 0;
+  padding: 128px 0;
 }
 .pc-header-block__content_vertical-offset_xl {
-  padding: calc(160px - 16px) 0;
+  padding: 160px 0;
 }
 .pc-header-block__content_offset_large {
   padding: calc(128px - 16px) 0 16px;
@@ -95,10 +94,10 @@ unpredictable css rules order in build */
 .pc-header-block__media {
   position: absolute;
   display: none;
-  top: 0;
+  top: 16px;
   right: 0;
   width: 50%;
-  height: 100%;
+  height: calc(100% - 2 * 16px);
   overflow: hidden;
   object-fit: cover;
   border-radius: var(--pc-border-radius);

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

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/build/esm/models/navigation.d.ts

@@ -63,6 +63,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;

package/build/esm/navigation/components/Header/Header.css

@@ -9,6 +9,8 @@ unpredictable css rules order in build */
   align-items: center;
   height: var(--header-height);
   background-color: var(--yc-color-base-background);
+}
+.pc-header_with-border {
   box-shadow: inset 0 -1px 0 var(--yc-color-line-generic);
 }
 .pc-header__wrapper {

package/build/esm/navigation/components/Header/Header.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
 import Control from '../../../components/Control/Control';
 import OutsideClick from '../../../components/OutsideClick/OutsideClick';
 import { Col, Grid, Row } from '../../../grid';
@@ -24,9 +25,10 @@ const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => {
 };
 const iconSizeKey = 'iconSize';
 export const Header = ({ data, logo }) => {
-    const { leftItems, rightItems, iconSize = 20 } = data;
+    const { leftItems, rightItems, iconSize = 20, withBorder = false } = data;
     const [isSidebarOpened, setIsSidebarOpened] = useState(false);
     const [activeItemId, setactiveItemId] = useState(undefined);
+    const [withHeaderBorder, setWithHeaderBorder] = useState(withBorder);
     const getNavigationItemWithIconSize = useCallback((item) => {
         if (!(iconSizeKey in item)) {
             return Object.assign(Object.assign({}, item), { iconSize });
@@ -47,7 +49,19 @@ export const Header = ({ data, logo }) => {
     const hideSidebar = useCallback(() => {
         setIsSidebarOpened(false);
     }, []);
-    return (React.createElement(Grid, { className: b() },
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 0 && !withBorder) {
+                setWithHeaderBorder(true);
+            }
+            else if (window.scrollY === 0 && !withBorder) {
+                setWithHeaderBorder(false);
+            }
+        };
+        window.addEventListener('scroll', _.debounce(handleScroll, 5), { passive: true });
+        return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
+    });
+    return (React.createElement(Grid, { className: b({ 'with-border': withHeaderBorder }) },
         React.createElement(Row, null,
             React.createElement(Col, null,
                 React.createElement("header", { className: b('wrapper') },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "2.22.0",
+  "version": "2.23.0-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -139,5 +139,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }

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

@@ -246,7 +246,7 @@ export interface LinkTableBlockProps extends BlockHeaderProps {
     linkTheme?: LinkTheme;
 }
 export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {
-    title: TitleProps | string;
+    title?: TitleProps | string;
     description?: string;
     colSizes?: GridColumnSizesType;
 }

package/server/models/navigation.d.ts

@@ -63,6 +63,7 @@ export interface HeaderData {
     leftItems: NavigationItemModel[];
     rightItems?: NavigationItemModel[];
     iconSize?: number;
+    withBorder?: boolean;
 }
 export interface FooterColumn {
     title: string;