@gravity-ui/page-constructor 1.20.5 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.21.0](https://github.com/gravity-ui/page-constructor/compare/v1.20.5...v1.21.0) (2023-03-06)
+
+
+### Features
+
+* **FilterBlock:** add block that filters its subblocks ([#180](https://github.com/gravity-ui/page-constructor/issues/180)) ([4b6852c](https://github.com/gravity-ui/page-constructor/commit/4b6852c5d1c55e4d1e2cc027c4229b9cc7500e8f))
+
 ## [1.20.5](https://github.com/gravity-ui/page-constructor/compare/v1.20.4...v1.20.5) (2023-03-03)
 
 

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import { CardLayoutBlockProps as CardLayoutBlockParams } from '../../models';
-export interface CardLayoutBlockProps extends Omit<CardLayoutBlockParams, 'children'> {
-    children?: React.ReactNode;
-}
-declare const CardLayout: ({ title, description, animated, colSizes, children, }: CardLayoutBlockProps) => JSX.Element;
+import { CardLayoutBlockProps as CardLayoutBlockParams, WithChildren } from '../../models';
+export type CardLayoutBlockProps = WithChildren<Omit<CardLayoutBlockParams, 'children'>>;
+declare const CardLayout: React.FC<CardLayoutBlockProps>;
 export default CardLayout;

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

@@ -5,17 +5,13 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
 const components_1 = require("../../components");
-const b = (0, utils_1.block)('card-layout-block');
 const DEFAULT_SIZES = {
     all: 12,
     sm: 6,
     md: 4,
 };
+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 }),
-    react_1.default.createElement("div", null,
-        react_1.default.createElement(grid_1.Row, null, children &&
-            react_1.default.Children.map(children, (child, i) => {
-                return (react_1.default.createElement(grid_1.Col, { sizes: colSizes, key: i, className: b('item') }, child));
-            })))));
+    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/FilterBlock/FilterBlock.css

@@ -0,0 +1,50 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-filter-block {
+  --pc-first-block-indent: 0;
+  --pc-first-block-mobile-indent: 0;
+}
+.pc-filter-block__title {
+  margin-bottom: 24px;
+}
+.pc-filter-block__title_centered {
+  text-align: center;
+}
+.pc-filter-block__title_centered > * {
+  margin: 0 auto;
+}
+.pc-filter-block__tabs {
+  margin-bottom: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  overflow: auto;
+}
+.pc-filter-block__tabs_centered {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+@media (max-width: 769px) {
+  .pc-filter-block__tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 40px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-filter-block__tabs {
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 16px;
+  }
+}
+.row .pc-filter-block__block-container.row {
+  margin: 0px;
+}

package/build/cjs/blocks/FilterBlock/FilterBlock.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FilterBlockProps } from '../../models';
+declare const FilterBlock: React.FC<FilterBlockProps>;
+export default FilterBlock;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const i18n_1 = tslib_1.__importDefault(require("./i18n"));
+const utils_1 = require("../../utils");
+const models_1 = require("../../models");
+const grid_1 = require("../../grid");
+const components_1 = require("../../components");
+const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs"));
+const ConstructorBlocks_1 = require("../../containers/PageConstructor/components/ConstructorBlocks");
+const b = (0, utils_1.block)('filter-block');
+const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
+    const tabButtons = (0, react_1.useMemo)(() => {
+        const allButton = allTag
+            ? { id: null, title: typeof allTag === 'boolean' ? (0, i18n_1.default)('label-all-tag') : allTag }
+            : undefined;
+        const otherButtons = tags && tags.map((tag) => ({ id: tag.id, title: tag.label }));
+        return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];
+    }, [allTag, tags]);
+    const [selectedTag, setSelectedTag] = (0, react_1.useState)(tabButtons.length ? tabButtons[0].id : null);
+    const actualTag = (0, react_1.useMemo)(() => {
+        return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)
+            ? tabButtons[0].id
+            : selectedTag;
+    }, [tabButtons, selectedTag]);
+    const container = (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 (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 }))));
+};
+exports.default = FilterBlock;

package/build/cjs/blocks/FilterBlock/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "label-all-tag": "All"
+}

package/build/cjs/blocks/FilterBlock/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const registerKeyset_1 = require("../../../utils/registerKeyset");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+const COMPONENT = 'FilterBlock';
+exports.default = (0, registerKeyset_1.registerKeyset)({ en: en_json_1.default, ru: ru_json_1.default }, COMPONENT);

package/build/cjs/blocks/FilterBlock/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "label-all-tag": "Все"
+}

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

@@ -0,0 +1,229 @@
+export declare const FilterTagProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        id: {
+            type: string;
+        };
+        label: {
+            type: string;
+        };
+    };
+};
+export declare const FilterItemProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        tags: {
+            type: string;
+            items: {
+                type: string;
+            };
+        };
+        card: {
+            $ref: string;
+        };
+    };
+};
+export declare const FilterProps: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        allTag: {
+            oneOf: {
+                type: string;
+            }[];
+        };
+        colSizes: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {};
+        };
+        tags: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        items: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        };
+        tagButtonSize: {
+            type: string;
+            enum: string[];
+        };
+        title: {
+            oneOf: ({
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    textSize: {
+                        type: string;
+                        enum: string[];
+                    };
+                    url: {
+                        type: string;
+                    };
+                    resetMargin: {
+                        type: string;
+                    };
+                };
+            } | {
+                type: string;
+            })[];
+        };
+        description: {
+            type: string;
+            contentType: string;
+        };
+        animated: {
+            type: string;
+        };
+        anchor: {
+            type: string;
+            additionalProperties: boolean;
+            required: string[];
+            properties: {
+                text: {
+                    type: string;
+                    contentType: string;
+                };
+                url: {
+                    type: string;
+                };
+            };
+        };
+        visible: {
+            type: string;
+            enum: string[];
+        };
+        resetPaddings: {
+            type: string;
+        };
+        context: {
+            type: string;
+        };
+        type: {};
+        when: {};
+    };
+};
+export declare const FilterBlock: {
+    'filterable-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            allTag: {
+                oneOf: {
+                    type: string;
+                }[];
+            };
+            colSizes: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {};
+            };
+            tags: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            tagButtonSize: {
+                type: string;
+                enum: string[];
+            };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
+            animated: {
+                type: string;
+            };
+            anchor: {
+                type: string;
+                additionalProperties: boolean;
+                required: string[];
+                properties: {
+                    text: {
+                        type: string;
+                        contentType: string;
+                    };
+                    url: {
+                        type: string;
+                    };
+                };
+            };
+            visible: {
+                type: string;
+                enum: string[];
+            };
+            resetPaddings: {
+                type: string;
+            };
+            context: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBlock = exports.FilterProps = exports.FilterItemProps = exports.FilterTagProps = void 0;
+const common_1 = require("../../schema/validators/common");
+const utils_1 = require("../../schema/validators/utils");
+exports.FilterTagProps = {
+    additionalProperties: false,
+    required: ['id', 'label'],
+    properties: {
+        id: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+        },
+    },
+};
+exports.FilterItemProps = {
+    additionalProperties: false,
+    required: ['tags', 'card'],
+    properties: {
+        tags: {
+            type: 'array',
+            items: {
+                type: 'string',
+            },
+        },
+        card: { $ref: 'self#/definitions/card' },
+    },
+};
+exports.FilterProps = {
+    additionalProperties: false,
+    required: ['filterTags', 'block'],
+    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), common_1.BlockHeaderProps), { allTag: { oneOf: [{ type: 'boolean' }, { type: 'string' }] }, colSizes: common_1.containerSizesObject, tags: (0, utils_1.filteredArray)(exports.FilterTagProps), items: (0, utils_1.filteredArray)(exports.FilterItemProps), tagButtonSize: {
+            type: 'string',
+            enum: ['s', 'm', 'l', 'xl'],
+        } }),
+};
+exports.FilterBlock = {
+    'filterable-block': exports.FilterProps,
+};

package/build/cjs/blocks/Tabs/Tabs.css

@@ -13,11 +13,38 @@ unpredictable css rules order in build */
 .pc-tabs-block__block-title_centered > * {
   margin: 0 auto;
 }
+.pc-tabs-block__tabs {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  overflow: auto;
+}
 .pc-tabs-block__tabs_centered {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
 }
+@media (max-width: 769px) {
+  .pc-tabs-block__tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+    margin-left: -48px;
+    margin-right: -48px;
+    padding-left: 48px;
+    padding-right: 40px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-tabs-block__tabs {
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 16px;
+  }
+}
 .pc-tabs-block__row_reverse {
   flex-direction: row-reverse;
 }
@@ -65,16 +92,6 @@ unpredictable css rules order in build */
 }
 
 @media (max-width: 769px) {
-  .pc-tabs-block__tabs {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    overflow: auto;
-    margin-left: -48px;
-    margin-right: -48px;
-    padding-left: 48px;
-    padding-right: 40px;
-  }
   .pc-tabs-block__content-wrapper_margin {
     margin: 0 0 32px 0;
   }
@@ -86,14 +103,6 @@ unpredictable css rules order in build */
     padding-bottom: 0;
   }
 }
-@media (max-width: 577px) {
-  .pc-tabs-block__tabs {
-    margin-left: -24px;
-    margin-right: -24px;
-    padding-left: 24px;
-    padding-right: 16px;
-  }
-}
 @media (min-width: 769px) {
   .pc-tabs-block.pc-AnimateBlock .pc-tabs-block__media, .pc-AnimateBlock .pc-tabs-block .pc-tabs-block__media {
     position: relative;

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

@@ -19,3 +19,4 @@ export { default as HeaderSliderBlock } from './HeaderSlider/HeaderSlider';
 export { default as CardLayoutBlock } from './CardLayout/CardLayout';
 export { default as ContentLayoutBlock } from './ContentLayout/ContentLayout';
 export { default as ShareBlock } from './Share/Share';
+export { default as FilterBlock } from './FilterBlock/FilterBlock';

package/build/cjs/blocks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.LinkTableBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.SecurityBlock = exports.PreviewBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.SimpleBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
+exports.FilterBlock = exports.ShareBlock = exports.ContentLayoutBlock = exports.CardLayoutBlock = exports.HeaderSliderBlock = exports.IconsBlock = exports.HeaderBlock = exports.LinkTableBlock = exports.TabsBlock = exports.TableBlock = exports.QuestionsBlock = exports.PromoFeaturesBlock = exports.ExtendedFeaturesBlock = exports.SliderBlock = exports.SecurityBlock = exports.PreviewBlock = exports.MapBlock = exports.MediaBlock = exports.InfoBlock = exports.SimpleBlock = exports.CompaniesBlock = exports.BannerBlock = void 0;
 var Banner_1 = require("./Banner/Banner");
 Object.defineProperty(exports, "BannerBlock", { enumerable: true, get: function () { return __importDefault(Banner_1).default; } });
 var Companies_1 = require("./Companies/Companies");
@@ -46,3 +46,5 @@ var ContentLayout_1 = require("./ContentLayout/ContentLayout");
 Object.defineProperty(exports, "ContentLayoutBlock", { enumerable: true, get: function () { return __importDefault(ContentLayout_1).default; } });
 var Share_1 = require("./Share/Share");
 Object.defineProperty(exports, "ShareBlock", { enumerable: true, get: function () { return __importDefault(Share_1).default; } });
+var FilterBlock_1 = require("./FilterBlock/FilterBlock");
+Object.defineProperty(exports, "FilterBlock", { enumerable: true, get: function () { return __importDefault(FilterBlock_1).default; } });

package/build/cjs/components/Button/Button.css

@@ -14,6 +14,8 @@ unpredictable css rules order in build */
 .pc-button-block_theme_github.pc-button-block_theme_github {
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
   color: var(--pc-monochrome-button-color);
 }
 .pc-button-block_theme_github.pc-button-block_theme_github:hover {
@@ -25,6 +27,8 @@ unpredictable css rules order in build */
 .pc-button-block_theme_monochrome {
   --yc-button-background-color: var(--pc-monochrome-button-background-color);
   --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
+}
+.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
   color: var(--pc-monochrome-button-color);
 }
 .pc-button-block_theme_monochrome:hover {

package/build/cjs/components/ButtonTabs/ButtonTabs.css

@@ -1,12 +1,25 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-button-tabs {
-  margin-bottom: 20px;
-}
 .pc-button-tabs__item {
   margin-right: 8px;
   margin-bottom: 12px;
+  --yc-button-background-color: var(--pc-tab-item-background-color);
+  --yc-button-background-color-hover: var(--pc-tab-item-background-color-hover);
+}
+.pc-button-tabs__item, .pc-button-tabs__item:link, .pc-button-tabs__item:visited, .pc-button-tabs__item:active, .pc-button-tabs__item:focus {
+  color: var(--pc-tab-item-color);
+}
+.pc-button-tabs__item:hover {
+  color: var(--pc-tab-item-color);
 }
 .pc-button-tabs__item_active {
   pointer-events: none;
+  --yc-button-background-color: var(--pc-selected-tab-item-background-color);
+  --yc-button-background-color-hover: var(--pc-selected-tab-item-background-color-hover);
+}
+.pc-button-tabs__item_active, .pc-button-tabs__item_active:link, .pc-button-tabs__item_active:visited, .pc-button-tabs__item_active:active, .pc-button-tabs__item_active:focus {
+  color: var(--pc-selected-tab-item-color);
+}
+.pc-button-tabs__item_active:hover {
+  color: var(--pc-selected-tab-item-color);
 }

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

@@ -1,13 +1,16 @@
+import React from 'react';
+import { ButtonSize } from '@gravity-ui/uikit';
 import { ButtonProps } from '../../models';
 export interface ButtonTabsItemProps extends Omit<ButtonProps, 'url' | 'primary' | 'target' | 'text'> {
-    id: string;
+    id: string | null;
     title: string;
 }
 export interface ButtonTabsProps {
     className?: string;
     items: ButtonTabsItemProps[];
-    activeTab?: string;
-    onSelectTab?: (tabId: string) => void;
+    activeTab?: string | null;
+    onSelectTab?: (tabId: string | null) => void;
+    tabSize?: ButtonSize;
 }
-declare const ButtonTabs: (props: ButtonTabsProps) => JSX.Element;
+declare const ButtonTabs: React.FC<ButtonTabsProps>;
 export default ButtonTabs;

package/build/cjs/components/ButtonTabs/ButtonTabs.js

@@ -5,8 +5,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../utils");
 const index_1 = require("../index");
 const b = (0, utils_1.block)('button-tabs');
-const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }) => {
     const activeTabId = (0, react_1.useMemo)(() => {
         if (activeTab) {
             return activeTab;
@@ -18,9 +17,6 @@ const ButtonTabs = (props) => {
             onSelectTab(tabId);
         }
     }, [onSelectTab]);
-    return (react_1.default.createElement("div", { className: b(null, className) }, items.map((item) => {
-        const isActive = item.id === activeTabId;
-        return (react_1.default.createElement(index_1.Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
-    })));
+    return (react_1.default.createElement("div", { className: b(null, className) }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
 };
 exports.default = ButtonTabs;

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

@@ -16,10 +16,11 @@ export declare const blockMap: {
     "header-block": (props: import("./models").WithChildren<import("./models").HeaderBlockProps & import("./models").ClassNameProps>) => JSX.Element;
     "icons-block": ({ title, size, items }: import("./models").IconsBlockProps) => JSX.Element;
     "header-slider-block": ({ items, arrows, ...props }: import("./models").HeaderSliderBlockProps) => JSX.Element;
-    "card-layout-block": ({ title, description, animated, colSizes, children, }: import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps) => JSX.Element;
+    "card-layout-block": import("react").FC<import("./blocks/CardLayout/CardLayout").CardLayoutBlockProps>;
     "content-layout-block": (props: import("./models").ContentLayoutBlockProps) => JSX.Element;
     "share-block": ({ items, title }: import("./models").ShareBlockProps) => JSX.Element;
     "map-block": ({ map, ...props }: import("./models").MapBlockProps) => JSX.Element;
+    "filter-block": import("react").FC<import("./models").FilterBlockProps>;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -26,6 +26,7 @@ exports.blockMap = {
     [models_1.BlockType.ContentLayoutBlock]: blocks_1.ContentLayoutBlock,
     [models_1.BlockType.ShareBlock]: blocks_1.ShareBlock,
     [models_1.BlockType.MapBlock]: blocks_1.MapBlock,
+    [models_1.BlockType.FilterBlock]: blocks_1.FilterBlock,
 };
 exports.subBlockMap = {
     [models_1.SubBlockType.Divider]: sub_blocks_1.Divider,

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -19,6 +19,14 @@ unpredictable css rules order in build */
   --pc-monochrome-button-color: var(--yc-color-text-light-primary);
   --pc-text-header-color: var(--yc-color-text-primary);
   --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
+  --pc-tab-item-color: var(--yc-color-text-primary);
+  --pc-tab-item-background-color: var(--yc-color-base-generic);
+  --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+  --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
+  --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
+  --pc-selected-tab-item-background-color-hover: var(
+      --pc-monochrome-button-background-color-hover
+  );
 }
 .yc-root.yc-root_theme_dark {
   --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);