@gravity-ui/page-constructor 1.20.4 → 1.21.0

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);

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

@@ -19,21 +19,20 @@ const ConstructorBlocks_1 = require("./components/ConstructorBlocks");
 const Layout_1 = tslib_1.__importDefault(require("../../navigation/containers/Layout/Layout"));
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { context, headerBlockTypes } = (0, react_1.useMemo)(() => {
-        var _a;
-        return ({
-            context: {
-                blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomBlockTypes)(props.custom)],
-                itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(props.custom)),
-                loadables: (_a = props === null || props === void 0 ? void 0 : props.custom) === null || _a === void 0 ? void 0 : _a.loadable,
-            },
-            headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(props.custom)],
-        });
-    }, [props.custom]);
+    const { content: { blocks = [], background = {}, footnotes = [] } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { context } = (0, react_1.useMemo)(() => ({
+        context: {
+            blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomBlockTypes)(custom)],
+            subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomSubBlockTypes)(custom)],
+            headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)],
+            itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(custom)),
+            loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
+            shouldRenderBlock,
+        },
+    }), [custom, shouldRenderBlock]);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.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 = (0, utils_1.getThemedValue)(background, theme);
@@ -46,7 +45,7 @@ const Constructor = (props) => {
                     header && react_1.default.createElement(ConstructorItem_1.ConstructorHeader, { data: header }),
                     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, shouldRenderBlock: shouldRenderBlock }))),
+                            react_1.default.createElement(ConstructorBlocks_1.ConstructorBlocks, { items: restBlocks }))),
                         hasFootnotes && (react_1.default.createElement(ConstructorRow_1.ConstructorRow, null,
                             react_1.default.createElement(ConstructorFootnotes_1.ConstructorFootnotes, { items: footnotes })))))))));
 };

package/build/cjs/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/cjs/containers/PageConstructor/components/ConstructorBlock/ConstructorBlock.js

@@ -6,8 +6,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const BlockBase_1 = tslib_1.__importDefault(require("../../../../components/BlockBase/BlockBase"));
 const utils_1 = require("../../../../utils");
 const b = (0, utils_1.block)('constructor-block');
-const ConstructorBlock = ({ data, Component }) => {
-    const { anchor, visible } = data;
-    return (react_1.default.createElement(BlockBase_1.default, { className: b({ type: data.type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, Component));
+const ConstructorBlock = ({ data, children, }) => {
+    const { anchor, visible, type } = data;
+    return (react_1.default.createElement(BlockBase_1.default, { className: b({ type }), anchor: anchor, visible: visible, resetPaddings: data.resetPaddings }, children));
 };
 exports.ConstructorBlock = ConstructorBlock;

package/build/cjs/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/cjs/containers/PageConstructor/components/ConstructorBlocks/ConstructorBlocks.js

@@ -6,17 +6,15 @@ const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const react_1 = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../utils");
 const innerContext_1 = require("../../../../context/innerContext");
-const blockIdContext_1 = require("../../../../context/blockIdContext");
 const ConstructorLoadable_1 = require("../ConstructorLoadable");
 const ConstructorItem_1 = require("../ConstructorItem");
 const ConstructorBlock_1 = require("../ConstructorBlock/ConstructorBlock");
-const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
-    const { blockTypes, loadables, itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
+const ConstructorBlocks = ({ items }) => {
+    const { blockTypes, loadables, itemMap, shouldRenderBlock } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const renderer = (parentId = '', item, index) => {
         if (!itemMap[item.type]) {
             return null;
         }
-        let children;
         let itemElement;
         const key = (0, utils_1.getBlockKey)(item, index);
         const blockId = parentId ? `${parentId}_${key}` : key;
@@ -32,13 +30,13 @@ const ConstructorBlocks = ({ items, shouldRenderBlock }) => {
             itemElement = (react_1.default.createElement(ConstructorLoadable_1.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_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockId, key: blockId },
-                react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item }, children)));
+            itemElement = (react_1.default.createElement(ConstructorItem_1.ConstructorItem, { data: item, key: blockId, blockKey: blockId }, children));
         }
-        return blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId, Component: itemElement })) : (itemElement);
+        return blockTypes.includes(item.type) ? (react_1.default.createElement(ConstructorBlock_1.ConstructorBlock, { data: item, key: blockId }, itemElement)) : (itemElement);
     };
     return react_1.default.createElement(react_1.Fragment, null, items.map(renderer.bind(null, '')));
 };

package/build/cjs/containers/PageConstructor/components/ConstructorItem/ConstructorItem.d.ts

@@ -1,6 +1,7 @@
 import { ConstructorItem as ConstructorItemType, WithChildren } from '../../../../models';
 export interface ConstructorItemProps {
     data: ConstructorItemType;
+    blockKey?: string;
 }
-export declare const ConstructorItem: ({ data, children }: WithChildren<ConstructorItemProps>) => JSX.Element;
-export declare const ConstructorHeader: ({ data }: Pick<ConstructorItemProps, 'data'>) => JSX.Element;
+export declare const ConstructorItem: ({ data, blockKey, children, }: WithChildren<ConstructorItemProps>) => JSX.Element;
+export declare const ConstructorHeader: ({ data, blockKey, }: Pick<ConstructorItemProps, 'data' | 'blockKey'>) => JSX.Element;

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

@@ -4,12 +4,14 @@ exports.ConstructorHeader = exports.ConstructorItem = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const innerContext_1 = require("../../../../context/innerContext");
-const ConstructorItem = ({ data, children }) => {
+const blockIdContext_1 = require("../../../../context/blockIdContext");
+const ConstructorItem = ({ data, blockKey = '', children, }) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { type } = data, rest = tslib_1.__rest(data, ["type"]);
     const Component = itemMap[type];
-    return react_1.default.createElement(Component, Object.assign({}, rest), children);
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey },
+        react_1.default.createElement(Component, Object.assign({}, rest), children)));
 };
 exports.ConstructorItem = ConstructorItem;
-const ConstructorHeader = ({ data }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type }));
+const ConstructorHeader = ({ data, blockKey = '', }) => (react_1.default.createElement(exports.ConstructorItem, { data: data, key: data.type, blockKey: blockKey }));
 exports.ConstructorHeader = ConstructorHeader;

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

@@ -5,12 +5,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const Loadable_1 = tslib_1.__importDefault(require("../../../Loadable/Loadable"));
 const innerContext_1 = require("../../../../context/innerContext");
+const blockIdContext_1 = require("../../../../context/blockIdContext");
 const ConstructorLoadable = (props) => {
     const { itemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const { block, blockKey, config, serviceId, params } = props;
     const { type } = block;
     const { fetch, component: ChildComponent } = config;
     const Component = itemMap[type];
-    return (react_1.default.createElement(Loadable_1.default, { key: blockKey, block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params }));
+    return (react_1.default.createElement(blockIdContext_1.BlockIdContext.Provider, { value: blockKey, key: blockKey },
+        react_1.default.createElement(Loadable_1.default, { key: blockKey, block: block, blockKey: blockKey, Component: Component, ChildComponent: ChildComponent, fetch: fetch, serviceId: serviceId, params: params })));
 };
 exports.ConstructorLoadable = ConstructorLoadable;

package/build/cjs/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/cjs/context/innerContext/InnerContext.js

@@ -5,5 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 exports.InnerContext = react_1.default.createContext({
     blockTypes: [],
+    subBlockTypes: [],
+    headerBlockTypes: [],
     itemMap: {},
 });

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

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

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

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

@@ -1,19 +1,15 @@
 import React from 'react';
 import { block } from '../../utils';
-import { Row, Col } from '../../grid';
+import { Col, Row } from '../../grid';
 import { BlockHeader, AnimateBlock } from '../../components';
 import './CardLayout.css';
-const b = block('card-layout-block');
 const DEFAULT_SIZES = {
     all: 12,
     sm: 6,
     md: 4,
 };
+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 }),
-    React.createElement("div", null,
-        React.createElement(Row, null, children &&
-            React.Children.map(children, (child, i) => {
-                return (React.createElement(Col, { sizes: colSizes, key: i, className: b('item') }, child));
-            })))));
+    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/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/esm/blocks/FilterBlock/FilterBlock.d.ts

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

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

@@ -0,0 +1,46 @@
+import React, { useMemo, useState } from 'react';
+import i18n from './i18n';
+import { block } from '../../utils';
+import { BlockType } from '../../models';
+import { Row, Col } from '../../grid';
+import { BlockHeader, AnimateBlock } from '../../components';
+import ButtonTabs from '../../components/ButtonTabs/ButtonTabs';
+import { ConstructorBlocks } from '../../containers/PageConstructor/components/ConstructorBlocks';
+import './FilterBlock.css';
+const b = block('filter-block');
+const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
+    const tabButtons = useMemo(() => {
+        const allButton = allTag
+            ? { id: null, title: typeof allTag === 'boolean' ? i18n('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] = useState(tabButtons.length ? tabButtons[0].id : null);
+    const actualTag = useMemo(() => {
+        return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)
+            ? tabButtons[0].id
+            : selectedTag;
+    }, [tabButtons, selectedTag]);
+    const container = 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 (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 }))));
+};
+export default FilterBlock;

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

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

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

@@ -0,0 +1,5 @@
+import { registerKeyset } from '../../../utils/registerKeyset';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'FilterBlock';
+export default registerKeyset({ en, ru }, COMPONENT);

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

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