@gravity-ui/page-constructor 1.20.5 → 1.21.0

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

@@ -0,0 +1,38 @@
+import { AnimatableProps, BlockBaseProps, BlockHeaderProps, containerSizesObject, } from '../../schema/validators/common';
+import { filteredArray } from '../../schema/validators/utils';
+export const FilterTagProps = {
+    additionalProperties: false,
+    required: ['id', 'label'],
+    properties: {
+        id: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+        },
+    },
+};
+export const FilterItemProps = {
+    additionalProperties: false,
+    required: ['tags', 'card'],
+    properties: {
+        tags: {
+            type: 'array',
+            items: {
+                type: 'string',
+            },
+        },
+        card: { $ref: 'self#/definitions/card' },
+    },
+};
+export const FilterProps = {
+    additionalProperties: false,
+    required: ['filterTags', 'block'],
+    properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BlockBaseProps), AnimatableProps), BlockHeaderProps), { allTag: { oneOf: [{ type: 'boolean' }, { type: 'string' }] }, colSizes: containerSizesObject, tags: filteredArray(FilterTagProps), items: filteredArray(FilterItemProps), tagButtonSize: {
+            type: 'string',
+            enum: ['s', 'm', 'l', 'xl'],
+        } }),
+};
+export const FilterBlock = {
+    'filterable-block': FilterProps,
+};

package/build/esm/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/esm/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/esm/blocks/index.js

@@ -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/esm/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/esm/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/esm/components/ButtonTabs/ButtonTabs.d.ts

@@ -1,14 +1,17 @@
+import React from 'react';
+import { ButtonSize } from '@gravity-ui/uikit';
 import { ButtonProps } from '../../models';
 import './ButtonTabs.css';
 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/esm/components/ButtonTabs/ButtonTabs.js

@@ -3,8 +3,7 @@ import { block } from '../../utils';
 import { Button } from '../index';
 import './ButtonTabs.css';
 const b = block('button-tabs');
-const ButtonTabs = (props) => {
-    const { className, items, activeTab, onSelectTab } = props;
+const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', }) => {
     const activeTabId = useMemo(() => {
         if (activeTab) {
             return activeTab;
@@ -16,9 +15,6 @@ const ButtonTabs = (props) => {
             onSelectTab(tabId);
         }
     }, [onSelectTab]);
-    return (React.createElement("div", { className: b(null, className) }, items.map((item) => {
-        const isActive = item.id === activeTabId;
-        return (React.createElement(Button, { text: item.title, className: b('item', { active: isActive }), key: item.title, size: 'l', onClick: () => handleClick(item.id), theme: isActive ? 'monochrome' : 'normal' }));
-    })));
+    return (React.createElement("div", { className: b(null, className) }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: () => handleClick(id) })))));
 };
 export default ButtonTabs;

package/build/esm/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/esm/constructor-items.js

@@ -1,6 +1,6 @@
 import { BlockType, SubBlockType } from './models';
 import { Partner, PriceDetailed, MediaCard, NewsCard, TutorialCard, CardWithImage, LayoutItem, BackgroundCard, Content, Quote, Divider, BannerCard, BasicCard, } from './sub-blocks';
-import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, MapBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, } from './blocks';
+import { BannerBlock, CompaniesBlock, SimpleBlock, MediaBlock, MapBlock, PreviewBlock, InfoBlock, SecurityBlock, SliderBlock, ExtendedFeaturesBlock, PromoFeaturesBlock, QuestionsBlock, TableBlock, TabsBlock, LinkTableBlock, HeaderBlock, IconsBlock, HeaderSliderBlock, CardLayoutBlock, ContentLayoutBlock, ShareBlock, FilterBlock, } from './blocks';
 export const blockMap = {
     [BlockType.SliderBlock]: SliderBlock,
     [BlockType.SimpleBlock]: SimpleBlock,
@@ -23,6 +23,7 @@ export const blockMap = {
     [BlockType.ContentLayoutBlock]: ContentLayoutBlock,
     [BlockType.ShareBlock]: ShareBlock,
     [BlockType.MapBlock]: MapBlock,
+    [BlockType.FilterBlock]: FilterBlock,
 };
 export const subBlockMap = {
     [SubBlockType.Divider]: Divider,

package/build/esm/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);

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

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import React, { useContext, useMemo } from 'react';
 import '@doc-tools/transform/dist/js/yfm';
-import { HeaderBlockTypes, BlockTypes, } from '../../models';
+import { HeaderBlockTypes, BlockTypes, SubBlockTypes, } from '../../models';
 import { blockMap, subBlockMap } from '../../constructor-items';
 import { Grid } from '../../grid';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
-import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getThemedValue, getCustomItems, } from '../../utils';
+import { block as cnBlock, getCustomBlockTypes, getCustomHeaderTypes, getThemedValue, getCustomItems, getCustomSubBlockTypes, } from '../../utils';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
 import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
@@ -17,21 +17,20 @@ import Layout from '../../navigation/containers/Layout/Layout';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { context, headerBlockTypes } = useMemo(() => {
-        var _a;
-        return ({
-            context: {
-                blockTypes: [...BlockTypes, ...getCustomBlockTypes(props.custom)],
-                itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(props.custom)),
-                loadables: (_a = props === null || props === void 0 ? void 0 : props.custom) === null || _a === void 0 ? void 0 : _a.loadable,
-            },
-            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(props.custom)],
-        });
-    }, [props.custom]);
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { context } = useMemo(() => ({
+        context: {
+            blockTypes: [...BlockTypes, ...getCustomBlockTypes(custom)],
+            subBlockTypes: [...SubBlockTypes, ...getCustomSubBlockTypes(custom)],
+            headerBlockTypes: [...HeaderBlockTypes, ...getCustomHeaderTypes(custom)],
+            itemMap: Object.assign(Object.assign(Object.assign({}, blockMap), subBlockMap), getCustomItems(custom)),
+            loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
+            shouldRenderBlock,
+        },
+    }), [custom, shouldRenderBlock]);
     const { themeValue: theme } = useContext(ThemeValueContext);
-    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, } = props;
     const hasFootnotes = footnotes.length > 0;
-    const isHeaderBlock = (block) => headerBlockTypes.includes(block.type);
+    const isHeaderBlock = (block) => context.headerBlockTypes.includes(block.type);
     const header = blocks === null || blocks === void 0 ? void 0 : blocks.find(isHeaderBlock);
     const restBlocks = blocks === null || blocks === void 0 ? void 0 : blocks.filter((block) => !isHeaderBlock(block));
     const themedBackground = getThemedValue(background, theme);
@@ -44,7 +43,7 @@ export const Constructor = (props) => {
                     header && React.createElement(ConstructorHeader, { data: header }),
                     React.createElement(Grid, null,
                         restBlocks && (React.createElement(ConstructorRow, null,
-                            React.createElement(ConstructorBlocks, { items: restBlocks, shouldRenderBlock: shouldRenderBlock }))),
+                            React.createElement(ConstructorBlocks, { items: restBlocks }))),
                         hasFootnotes && (React.createElement(ConstructorRow, null,
                             React.createElement(ConstructorFootnotes, { items: footnotes })))))))));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.d.ts

@@ -1,9 +1,7 @@
-import { ReactElement } from 'react';
-import { Block, ShouldRenderBlock } from '../../../../models';
+import React from 'react';
+import { Block, WithChildren } from '../../../../models';
 interface ConstructorBlockProps {
     data: Block;
-    Component: ReactElement;
-    shouldRenderBlock?: ShouldRenderBlock;
 }
-export declare const ConstructorBlock: ({ data, Component }: ConstructorBlockProps) => JSX.Element;
+export declare const ConstructorBlock: React.FC<WithChildren<ConstructorBlockProps>>;
 export {};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import BlockBase from '../../../../components/BlockBase/BlockBase';
 import { block } from '../../../../utils';
 const b = block('constructor-block');
-export const ConstructorBlock = ({ data, Component }) => {
-    const { anchor, visible } = data;
-    return (React.createElement(BlockBase, { className: b({ type: data.type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, Component));
+export const ConstructorBlock = ({ data, children, }) => {
+    const { anchor, visible, type } = data;
+    return (React.createElement(BlockBase, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };

package/build/esm/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.d.ts

@@ -1,7 +1,7 @@
-import { ConstructorItem as ConstructorItemType, ShouldRenderBlock } from '../../../../models';
+import React from 'react';
+import { ConstructorItem as ConstructorItemType } from '../../../../models';
 interface ConstructorBlocksProps {
     items: ConstructorItemType[];
-    shouldRenderBlock?: ShouldRenderBlock;
 }
-export declare const ConstructorBlocks: ({ items, shouldRenderBlock }: ConstructorBlocksProps) => JSX.Element;
+export declare const ConstructorBlocks: React.FC<ConstructorBlocksProps>;
 export {};

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

@@ -5,13 +5,12 @@ import { InnerContext } from '../../../../context/innerContext';
 import { ConstructorLoadable } from '../ConstructorLoadable';
 import { ConstructorItem } from '../ConstructorItem';
 import { ConstructorBlock } from '../ConstructorBlock/ConstructorBlock';
-export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
-    const { blockTypes, loadables, itemMap } = useContext(InnerContext);
+export const ConstructorBlocks = ({ items }) => {
+    const { blockTypes, loadables, itemMap, shouldRenderBlock } = useContext(InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
-        let children;
         let itemElement;
         const key = getBlockKey(item, index);
         const blockId = parentId ? `${parentId}_${key}` : key;
@@ -27,12 +26,13 @@ export const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
             itemElement = (React.createElement(ConstructorLoadable, { block: item, key: blockId, blockKey: blockId, config: config, serviceId: serviceId, params: params }));
         }
         else {
+            let children;
             if ('children' in item && item.children) {
                 children = item.children.map(renderer.bind(null, blockId));
             }
             itemElement = (React.createElement(ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId, Component: itemElement })) : (itemElement);
+        return blockTypes.includes(item.type) ? (React.createElement(ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
     };
     return React.createElement(Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/esm/context/innerContext/InnerContext.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
-import { LoadableConfig } from '../../models';
+import { LoadableConfig, ShouldRenderBlock } from '../../models';
 export interface InnerContextType {
     blockTypes: string[];
+    subBlockTypes: string[];
+    headerBlockTypes: string[];
     itemMap: ItemMap;
     loadables?: LoadableConfig;
+    shouldRenderBlock?: ShouldRenderBlock;
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/esm/context/innerContext/InnerContext.js

@@ -1,5 +1,7 @@
 import React from 'react';
 export const InnerContext = React.createContext({
     blockTypes: [],
+    subBlockTypes: [],
+    headerBlockTypes: [],
     itemMap: {},
 });

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { ButtonSize } from '@gravity-ui/uikit';
 import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, MapProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
-import { BannerCardProps, SubBlock } from './sub-blocks';
+import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -26,7 +27,8 @@ export declare enum BlockType {
     CardLayoutBlock = "card-layout-block",
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
-    MapBlock = "map-block"
+    MapBlock = "map-block",
+    FilterBlock = "filter-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -251,6 +253,24 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     description?: string;
     colSizes?: GridColumnSizesType;
 }
+export type FilterTag = {
+    id: string;
+    label: string;
+};
+export type FilterItem = {
+    tags: string[];
+    card: SubBlockModels;
+};
+export interface FilterBlockProps extends Animatable, LoadableChildren {
+    title?: TitleProps | string;
+    description?: string;
+    tags: FilterTag[];
+    items: FilterItem[];
+    tagButtonSize?: ButtonSize;
+    allTag?: boolean | string;
+    colSizes?: GridColumnSizesType;
+    centered?: boolean;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
@@ -350,6 +370,9 @@ export type LinkTableBlockModel = {
 export type CardLayoutBlockModel = {
     type: BlockType.CardLayoutBlock;
 } & CardLayoutBlockProps;
+export type FilterBlockModel = {
+    type: BlockType.FilterBlock;
+} & FilterBlockProps;
 export type IconsBlockModel = {
     type: BlockType.IconsBlock;
 } & IconsBlockProps;
@@ -362,6 +385,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
+type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/build/esm/models/constructor-items/blocks.js

@@ -23,6 +23,7 @@ export var BlockType;
     BlockType["ContentLayoutBlock"] = "content-layout-block";
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
+    BlockType["FilterBlock"] = "filter-block";
 })(BlockType || (BlockType = {}));
 export const BlockTypes = Object.values(BlockType);
 export const HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

package/build/esm/utils/blocks.d.ts

@@ -6,5 +6,6 @@ export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) =
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
     [x: string]: any;
 };
+export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;

package/build/esm/utils/blocks.js

@@ -18,6 +18,10 @@ export const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
     ...Object.keys(headers),
 ];
 export const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
+export const getCustomSubBlockTypes = (customBlocks = {}) => {
+    const { subBlocks = {} } = customBlocks;
+    return Object.keys(subBlocks);
+};
 export const getCustomHeaderTypes = (customBlocks = {}) => {
     const { headers = {} } = customBlocks;
     return Object.keys(headers);

package/package.json

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

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { ButtonSize } from '@gravity-ui/uikit';
 import { BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, Justify, LinkProps, LinkTheme, MediaDirection, MediaProps, MapProps, PreviewItemProps, PreviewRatioMediaContent, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleProps, LegendTableMarkerType, AnchorProps, TitleBaseProps, Animatable, BlockHeaderProps, ImageDeviceProps } from './common';
 import { ThemeSupporting } from '../../utils';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
-import { BannerCardProps, SubBlock } from './sub-blocks';
+import { BannerCardProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
     ExtendedFeaturesBlock = "extended-features-block",
@@ -26,7 +27,8 @@ export declare enum BlockType {
     CardLayoutBlock = "card-layout-block",
     ContentLayoutBlock = "content-layout-block",
     ShareBlock = "share-block",
-    MapBlock = "map-block"
+    MapBlock = "map-block",
+    FilterBlock = "filter-block"
 }
 export declare const BlockTypes: BlockType[];
 export declare const HeaderBlockTypes: BlockType[];
@@ -251,6 +253,24 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     description?: string;
     colSizes?: GridColumnSizesType;
 }
+export type FilterTag = {
+    id: string;
+    label: string;
+};
+export type FilterItem = {
+    tags: string[];
+    card: SubBlockModels;
+};
+export interface FilterBlockProps extends Animatable, LoadableChildren {
+    title?: TitleProps | string;
+    description?: string;
+    tags: FilterTag[];
+    items: FilterItem[];
+    tagButtonSize?: ButtonSize;
+    allTag?: boolean | string;
+    colSizes?: GridColumnSizesType;
+    centered?: boolean;
+}
 export interface IconsBlockProps {
     title?: string;
     size?: 's' | 'm' | 'l';
@@ -350,6 +370,9 @@ export type LinkTableBlockModel = {
 export type CardLayoutBlockModel = {
     type: BlockType.CardLayoutBlock;
 } & CardLayoutBlockProps;
+export type FilterBlockModel = {
+    type: BlockType.FilterBlock;
+} & FilterBlockProps;
 export type IconsBlockModel = {
     type: BlockType.IconsBlock;
 } & IconsBlockProps;
@@ -362,6 +385,6 @@ export type ContentLayoutBlockModel = {
 export type ShareBLockModel = {
     type: BlockType.ShareBlock;
 } & ShareBlockProps;
-type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel;
+type BlockModels = SliderBlockModel | ServiceDemoBlockModel | ExtendedFeaturesBlockModel | PromoFeaturesBlockModel | QuestionsBlockModel | CalculatorBlockModel | BannerBlockModel | CompaniesBlockModel | MediaBlockModel | MapBlockModel | InfoBlockModel | SecurityBlockModel | TableBlockModel | TabsBlockModel | SimpleBlockModel | LinkTableBlockModel | HeaderBlockModel | PreviewBlockModel | IconsBlockModel | HeaderSliderBlockModel | CardLayoutBlockModel | ContentLayoutBlockModel | ShareBLockModel | FilterBlockModel;
 export type Block = BlockModels & BlockBaseProps;
 export {};

package/server/models/constructor-items/blocks.js

@@ -26,6 +26,7 @@ var BlockType;
     BlockType["ContentLayoutBlock"] = "content-layout-block";
     BlockType["ShareBlock"] = "share-block";
     BlockType["MapBlock"] = "map-block";
+    BlockType["FilterBlock"] = "filter-block";
 })(BlockType = exports.BlockType || (exports.BlockType = {}));
 exports.BlockTypes = Object.values(BlockType);
 exports.HeaderBlockTypes = [BlockType.HeaderBlock, BlockType.HeaderSliderBlock];

package/server/utils/blocks.d.ts

@@ -6,5 +6,6 @@ export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) =
 export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
     [x: string]: any;
 };
+export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
 export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;

package/server/utils/blocks.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getShareLink = exports.getCustomHeaderTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
+exports.getShareLink = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.getHeaderTag = void 0;
 const models_1 = require("../models");
 function getHeaderTag(size) {
     switch (size) {
@@ -25,6 +25,11 @@ const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
 exports.getCustomBlockTypes = getCustomBlockTypes;
 const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
 exports.getCustomItems = getCustomItems;
+const getCustomSubBlockTypes = (customBlocks = {}) => {
+    const { subBlocks = {} } = customBlocks;
+    return Object.keys(subBlocks);
+};
+exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
 const getCustomHeaderTypes = (customBlocks = {}) => {
     const { headers = {} } = customBlocks;
     return Object.keys(headers);