@gravity-ui/page-constructor 8.23.5 → 8.24.0

package/README.md

@@ -287,6 +287,16 @@ type FetchLoadableData<TData = any> = (blockKey: string) => Promise<TData>;
 
 The page constructor uses the `bootstrap` grid and its implementation based on React components that you can use in your own project (including separately from the constructor).
 
+The grid expects the host application to set a global `box-sizing: border-box` reset (most app scaffolds do). The package does not ship one, so with the browser default `content-box` the container padding is added to its `width: 100%` and the page overflows horizontally:
+
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+```
+
 Usage example:
 
 ```jsx
@@ -658,6 +668,7 @@ A library for rendering whole web pages or page sections from declarative JSON/Y
 - **YFM in block text needs server processing.** Markdown-like fields render as plain text unless you run content through `contentTransformer`/`fullTransform` from `@gravity-ui/page-constructor/server`; `@diplodoc/transform` is a required peer dependency.
 - **Import the SCSS styles.** Add `@gravity-ui/page-constructor/styles/styles.scss` (SCSS, not CSS); custom blocks import the same file to reuse mixins/variables.
 - **Vite needs `vite-plugin-dynamic-import`.** Dynamic block imports fail under Vite without it.
+- **The grid needs a global `box-sizing: border-box` reset.** The package does not ship one; without it the container padding overflows the viewport horizontally while typecheck and build stay green. Add `*, *::before, *::after { box-sizing: border-box; }` to the host app styles.
 
 ## Documentation for AI agents
 

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { GridColumnSizesType } from "../../grid/index.js";
 import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps } from "../../models/index.js";
+export declare const CARD_LAYOUT_DEFAULT_SIZES: GridColumnSizesType;
 export type CardLayoutBlockProps = React.PropsWithChildren<Omit<CardLayoutBlockParams, 'children'>> & ClassNameProps;
 declare const CardLayout: ({ title, description, animated, colSizes, children, className, titleClassName, background, centered, }: CardLayoutBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default CardLayout;

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CARD_LAYOUT_DEFAULT_SIZES = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -8,13 +9,13 @@ const components_1 = require("../../components/index.js");
 const theme_1 = require("../../context/theme/index.js");
 const grid_1 = require("../../grid/index.js");
 const utils_1 = require("../../utils/index.js");
-const DEFAULT_SIZES = {
+exports.CARD_LAYOUT_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, className, titleClassName, background, centered = false, }) => {
+const CardLayout = ({ title, description, animated, colSizes = exports.CARD_LAYOUT_DEFAULT_SIZES, children, className, titleClassName, background, centered = false, }) => {
     const theme = (0, theme_1.useTheme)();
     const { border, ...backgroundImageProps } = (0, utils_1.getThemedValue)(background || {}, theme);
     return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(null, className), animate: animated, children: [(title || description) && ((0, jsx_runtime_1.jsx)(components_1.Title, { title: title, subtitle: description, className: b('title', { centered }, titleClassName), colJustifyContent: centered ? grid_1.GridJustifyContent.Center : grid_1.GridJustifyContent.Start })), (0, jsx_runtime_1.jsxs)("div", { className: b('content', {

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

@@ -1 +1 @@
-{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,wEAAqC;AAErC,0DAAsE;AACtE,wDAA6C;AAC7C,8CAA6E;AAE7E,gDAAkD;AAIlD,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAOF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,aAAa,EACxB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,QAAQ,GAAG,KAAK,GACG,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,IAAA,sBAAc,EAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,wBAAC,yBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,uBAAC,kBAAK,IACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAE,cAAc,CAAC,EACjD,iBAAiB,EACb,QAAQ,CAAC,CAAC,CAAC,yBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,yBAAkB,CAAC,KAAK,GAErE,CACL,EACD,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,IAAA,iBAAO,EAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,uBAAC,4BAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,uBAAC,UAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,uBAAC,UAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACjD,KAAK,IADA,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nconst DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\n\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout = ({\n    title,\n    description,\n    animated,\n    colSizes = DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n    centered = false,\n}: CardLayoutBlockProps) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            {(title || description) && (\n                <Title\n                    title={title}\n                    subtitle={description}\n                    className={b('title', {centered}, titleClassName)}\n                    colJustifyContent={\n                        centered ? GridJustifyContent.Center : GridJustifyContent.Start\n                    }\n                />\n            )}\n            <div\n                className={b('content', {\n                    'with-background': !isEmpty(background),\n                })}\n            >\n                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n                <Row>\n                    {React.Children.map(children, (child, index) => (\n                        <Col key={index} sizes={colSizes} className={b('item')}>\n                            {child}\n                        </Col>\n                    ))}\n                </Row>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}
+{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";;;;;AAAA,qDAA+B;AAE/B,wEAAqC;AAErC,0DAAsE;AACtE,wDAA6C;AAC7C,8CAA6E;AAE7E,gDAAkD;AAIrC,QAAA,yBAAyB,GAAwB;IAC1D,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAOF,MAAM,CAAC,GAAG,IAAA,aAAK,EAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,iCAAyB,EACpC,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,QAAQ,GAAG,KAAK,GACG,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,IAAA,sBAAc,EAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,wBAAC,yBAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,uBAAC,kBAAK,IACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAE,cAAc,CAAC,EACjD,iBAAiB,EACb,QAAQ,CAAC,CAAC,CAAC,yBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,yBAAkB,CAAC,KAAK,GAErE,CACL,EACD,iCACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,IAAA,iBAAO,EAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,uBAAC,4BAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,uBAAC,UAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,uBAAC,UAAG,IAAa,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACjD,KAAK,IADA,KAAK,CAET,CACT,CAAC,GACA,IACJ,IACK,CAClB,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport {AnimateBlock, BackgroundImage, Title} from '../../components';\nimport {useTheme} from '../../context/theme';\nimport {Col, GridColumnSizesType, GridJustifyContent, Row} from '../../grid';\nimport {CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\n\nimport './CardLayout.scss';\n\nexport const CARD_LAYOUT_DEFAULT_SIZES: GridColumnSizesType = {\n    all: 12,\n    sm: 6,\n    md: 4,\n};\n\nexport type CardLayoutBlockProps = React.PropsWithChildren<\n    Omit<CardLayoutBlockParams, 'children'>\n> &\n    ClassNameProps;\n\nconst b = block('card-layout-block');\n\nconst CardLayout = ({\n    title,\n    description,\n    animated,\n    colSizes = CARD_LAYOUT_DEFAULT_SIZES,\n    children,\n    className,\n    titleClassName,\n    background,\n    centered = false,\n}: CardLayoutBlockProps) => {\n    const theme = useTheme();\n    const {border, ...backgroundImageProps} = getThemedValue(background || {}, theme);\n    return (\n        <AnimateBlock className={b(null, className)} animate={animated}>\n            {(title || description) && (\n                <Title\n                    title={title}\n                    subtitle={description}\n                    className={b('title', {centered}, titleClassName)}\n                    colJustifyContent={\n                        centered ? GridJustifyContent.Center : GridJustifyContent.Start\n                    }\n                />\n            )}\n            <div\n                className={b('content', {\n                    'with-background': !isEmpty(background),\n                })}\n            >\n                <BackgroundImage className={b('image', {border})} {...backgroundImageProps} />\n                <Row>\n                    {React.Children.map(children, (child, index) => (\n                        <Col key={index} sizes={colSizes} className={b('item')}>\n                            {child}\n                        </Col>\n                    ))}\n                </Row>\n            </div>\n        </AnimateBlock>\n    );\n};\n\nexport default CardLayout;\n"]}

package/build/cjs/blocks/FilterBlock/FilterBlock.css

@@ -46,4 +46,21 @@ unpredictable css rules order in build */
 }
 .pc-filter-block__cards-container {
   width: 100%;
+}
+.pc-filter-block__toggle {
+  margin-top: 24px;
+  padding-inline: 24px;
+}
+@media (min-width: 769px) {
+  .pc-filter-block.pc-AnimateBlock .pc-filter-block__toggle, .pc-AnimateBlock .pc-filter-block .pc-filter-block__toggle {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-filter-block.pc-AnimateBlock.animate .pc-filter-block__toggle, .pc-AnimateBlock .pc-filter-block.animate .pc-filter-block__toggle {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
 }

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

@@ -1,3 +1,3 @@
 import { FilterBlockProps } from "../../models/index.js";
-declare const FilterBlock: ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }: FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
+declare const FilterBlock: ({ title, description, tags, tagButtonSize, allTag, items, colSizes, visibleRowsCount, expandButtonText, collapseButtonText, centered, animated, }: FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
 export default FilterBlock;

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

@@ -3,17 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const __1 = require("../index.js");
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components/index.js");
 const ButtonTabs_1 = tslib_1.__importDefault(require("../../components/ButtonTabs/ButtonTabs.js"));
+const constants_1 = require("../../constants.js");
 const ConstructorItem_1 = require("../../containers/PageConstructor/components/ConstructorItem/index.js");
+const windowWidthContext_1 = require("../../context/windowWidthContext/index.js");
 const grid_1 = require("../../grid/index.js");
+const types_1 = require("../../grid/types.js");
 const hooks_1 = require("../../hooks/index.js");
 const utils_1 = require("../../utils/index.js");
+const CardLayout_1 = tslib_1.__importStar(require("../CardLayout/CardLayout.js"));
 const i18n_1 = require("./i18n/index.js");
 const b = (0, utils_1.block)('filter-block');
-const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
+const GRID_COLUMN_SIZES = [
+    types_1.GridColumnSize.Sm,
+    types_1.GridColumnSize.Md,
+    types_1.GridColumnSize.Lg,
+    types_1.GridColumnSize.Xl,
+];
+function responsiveValue({ values, width, fallback }) {
+    let result = values.all ?? fallback;
+    for (const size of GRID_COLUMN_SIZES) {
+        const value = values[size];
+        if (width >= constants_1.BREAKPOINTS[size] && value !== undefined) {
+            result = value;
+        }
+    }
+    return result;
+}
+const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, visibleRowsCount, expandButtonText, collapseButtonText, centered, animated, }) => {
     const handleAnalytics = (0, hooks_1.useAnalytics)();
+    const width = (0, windowWidthContext_1.useWindowWidth)();
+    const [expanded, setExpanded] = React.useState(false);
     const tabButtons = React.useMemo(() => {
         let allButton;
         if (allTag) {
@@ -51,6 +73,9 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? tabButtons[0].id
             : selectedTag;
     }, [tabButtons, selectedTag]);
+    React.useEffect(() => {
+        setExpanded(false);
+    }, [actualTag]);
     const cards = React.useMemo(() => {
         const itemsWithKeys = items.map((item, index) => ({
             ...item,
@@ -60,6 +85,19 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             ? itemsWithKeys.filter((item) => item.tags.includes(actualTag))
             : itemsWithKeys;
     }, [actualTag, items]);
+    // Only the active tab's configuration determines whether its cards can be collapsed.
+    const allTagConfig = typeof allTag === 'object' ? allTag : undefined;
+    const activeTag = actualTag === null ? allTagConfig : tags?.find((tag) => tag.id === actualTag);
+    const rows = responsiveValue({ values: visibleRowsCount ?? {}, width, fallback: Infinity });
+    const columns = Math.max(1, Math.floor(12 /
+        responsiveValue({
+            values: colSizes ?? CardLayout_1.CARD_LAYOUT_DEFAULT_SIZES,
+            width,
+            fallback: 12,
+        })));
+    const limit = rows > 0 ? Math.floor(rows) * columns : Infinity;
+    const canCollapse = Boolean(activeTag?.collapsible && cards.length > limit);
+    const visibleCards = canCollapse && !expanded ? cards.slice(0, limit) : cards;
     const handleSelectTab = React.useCallback((tabId) => {
         setSelectedTag(tabId);
         const tabButton = tabButtons.find((tab) => tab.id === tabId);
@@ -67,7 +105,9 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             handleAnalytics(tabButton.analyticsEvent);
         }
     }, [tabButtons, handleAnalytics]);
-    return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(), animate: animated, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && ((0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('block-container'), children: (0, jsx_runtime_1.jsx)(__1.CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map(({ card, key }) => ((0, jsx_runtime_1.jsx)(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key }, key))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(components_1.AnimateBlock, { className: b(), animate: animated, children: [title && ((0, jsx_runtime_1.jsx)(components_1.Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && ((0, jsx_runtime_1.jsx)(grid_1.Row, { children: (0, jsx_runtime_1.jsx)(grid_1.Col, { children: (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: actualTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), (0, jsx_runtime_1.jsx)(grid_1.Row, { className: b('block-container'), children: (0, jsx_runtime_1.jsx)(CardLayout_1.default, { title: "", colSizes: colSizes, className: b('cards-container'), animated: animated, children: visibleCards.map(({ card, key }) => ((0, jsx_runtime_1.jsx)(ConstructorItem_1.ConstructorItem, { data: card, blockKey: key }, key))) }) }), canCollapse && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { className: b('toggle'), style: { transitionDelay: `${Math.min(visibleCards.length, 99) * 0.1}s` }, view: "normal", size: "xl", width: "max", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: expanded
+                    ? (collapseButtonText ?? (0, i18n_1.i18n)('label-collapse'))
+                    : (expandButtonText ?? (0, i18n_1.i18n)('label-expand')) }))] }));
 };
 exports.default = FilterBlock;
 //# sourceMappingURL=FilterBlock.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {CardLayoutBlock} from '..';\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {Col, Row} from '../../grid';\nimport {useAnalytics} from '../../hooks';\nimport {FilterBlockProps} from '../../models';\nimport {block, getBlockKey} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst FilterBlock = ({\n    title,\n    description,\n    tags,\n    tagButtonSize,\n    allTag,\n    items,\n    colSizes,\n    centered,\n    animated,\n}: FilterBlockProps) => {\n    const handleAnalytics = useAnalytics();\n    const tabButtons = React.useMemo(() => {\n        let allButton: ButtonTabsItemProps | undefined;\n        if (allTag) {\n            if (typeof allTag === 'boolean') {\n                allButton = {\n                    id: null,\n                    title: i18n('label-all-tag'),\n                };\n            } else if (typeof allTag === 'string') {\n                allButton = {\n                    id: null,\n                    title: allTag,\n                };\n            } else if (typeof allTag === 'object') {\n                allButton = {\n                    id: null,\n                    title: allTag.label,\n                    analyticsEvent: allTag.analyticsEvent,\n                };\n            }\n        }\n        const otherButtons: ButtonTabsItemProps[] | undefined =\n            tags &&\n            tags.map((tag) => ({\n                id: tag.id,\n                title: tag.label,\n                analyticsEvent: tag.analyticsEvent,\n            }));\n        return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n    }, [allTag, tags]);\n\n    const [selectedTag, setSelectedTag] = React.useState(\n        tabButtons.length ? tabButtons[0].id : null,\n    );\n\n    const actualTag: string | null = React.useMemo(() => {\n        return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n            ? tabButtons[0].id\n            : selectedTag;\n    }, [tabButtons, selectedTag]);\n\n    const cards = React.useMemo(() => {\n        const itemsWithKeys = items.map((item, index) => ({\n            ...item,\n            key: getBlockKey(item.card, index),\n        }));\n\n        return actualTag\n            ? itemsWithKeys.filter((item) => item.tags.includes(actualTag))\n            : itemsWithKeys;\n    }, [actualTag, items]);\n\n    const handleSelectTab = React.useCallback(\n        (tabId: string | null) => {\n            setSelectedTag(tabId);\n\n            const tabButton = tabButtons.find((tab) => tab.id === tabId);\n            if (tabButton?.analyticsEvent) {\n                handleAnalytics(tabButton.analyticsEvent);\n            }\n        },\n        [tabButtons, handleAnalytics],\n    );\n\n    return (\n        <AnimateBlock className={b()} animate={animated}>\n            {title && (\n                <Title\n                    className={b('title', {centered: centered})}\n                    title={title}\n                    subtitle={description}\n                />\n            )}\n            {tabButtons.length && (\n                <Row>\n                    <Col>\n                        <ButtonTabs\n                            className={b('tabs', {centered: centered})}\n                            items={tabButtons}\n                            activeTab={selectedTag}\n                            onSelectTab={handleSelectTab}\n                            tabSize={tagButtonSize}\n                        />\n                    </Col>\n                </Row>\n            )}\n            <Row className={b('block-container')}>\n                <CardLayoutBlock title=\"\" colSizes={colSizes} className={b('cards-container')}>\n                    {cards.map(({card, key}) => (\n                        <ConstructorItem data={card} blockKey={key} key={key} />\n                    ))}\n                </CardLayoutBlock>\n            </Row>\n        </AnimateBlock>\n    );\n};\nexport default FilterBlock;\n"]}
+{"version":3,"file":"FilterBlock.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/FilterBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Button} from '@gravity-ui/uikit';\n\nimport {AnimateBlock, Title} from '../../components';\nimport ButtonTabs, {ButtonTabsItemProps} from '../../components/ButtonTabs/ButtonTabs';\nimport {BREAKPOINTS} from '../../constants';\nimport {ConstructorItem} from '../../containers/PageConstructor/components/ConstructorItem';\nimport {useWindowWidth} from '../../context/windowWidthContext';\nimport {Col, Row} from '../../grid';\nimport {GridColumnSize, GridColumnSizesType} from '../../grid/types';\nimport {useAnalytics} from '../../hooks';\nimport {FilterBlockProps} from '../../models';\nimport {block, getBlockKey} from '../../utils';\nimport CardLayoutBlock, {CARD_LAYOUT_DEFAULT_SIZES} from '../CardLayout/CardLayout';\n\nimport {i18n} from './i18n';\n\nimport './FilterBlock.scss';\n\nconst b = block('filter-block');\n\nconst GRID_COLUMN_SIZES = [\n    GridColumnSize.Sm,\n    GridColumnSize.Md,\n    GridColumnSize.Lg,\n    GridColumnSize.Xl,\n] as const;\n\ntype ResponsiveValueParams = {\n    values: GridColumnSizesType;\n    width: number;\n    fallback: number;\n};\n\nfunction responsiveValue({values, width, fallback}: ResponsiveValueParams) {\n    let result = values.all ?? fallback;\n\n    for (const size of GRID_COLUMN_SIZES) {\n        const value = values[size];\n\n        if (width >= BREAKPOINTS[size] && value !== undefined) {\n            result = value;\n        }\n    }\n\n    return result;\n}\n\nconst FilterBlock = ({\n    title,\n    description,\n    tags,\n    tagButtonSize,\n    allTag,\n    items,\n    colSizes,\n    visibleRowsCount,\n    expandButtonText,\n    collapseButtonText,\n    centered,\n    animated,\n}: FilterBlockProps) => {\n    const handleAnalytics = useAnalytics();\n    const width = useWindowWidth();\n    const [expanded, setExpanded] = React.useState(false);\n    const tabButtons = React.useMemo(() => {\n        let allButton: ButtonTabsItemProps | undefined;\n        if (allTag) {\n            if (typeof allTag === 'boolean') {\n                allButton = {\n                    id: null,\n                    title: i18n('label-all-tag'),\n                };\n            } else if (typeof allTag === 'string') {\n                allButton = {\n                    id: null,\n                    title: allTag,\n                };\n            } else if (typeof allTag === 'object') {\n                allButton = {\n                    id: null,\n                    title: allTag.label,\n                    analyticsEvent: allTag.analyticsEvent,\n                };\n            }\n        }\n        const otherButtons: ButtonTabsItemProps[] | undefined =\n            tags &&\n            tags.map((tag) => ({\n                id: tag.id,\n                title: tag.label,\n                analyticsEvent: tag.analyticsEvent,\n            }));\n        return [...(allButton ? [allButton] : []), ...(otherButtons ? otherButtons : [])];\n    }, [allTag, tags]);\n\n    const [selectedTag, setSelectedTag] = React.useState(\n        tabButtons.length ? tabButtons[0].id : null,\n    );\n\n    const actualTag: string | null = React.useMemo(() => {\n        return tabButtons.length && !tabButtons.find((tab) => tab.id === selectedTag)\n            ? tabButtons[0].id\n            : selectedTag;\n    }, [tabButtons, selectedTag]);\n\n    React.useEffect(() => {\n        setExpanded(false);\n    }, [actualTag]);\n\n    const cards = React.useMemo(() => {\n        const itemsWithKeys = items.map((item, index) => ({\n            ...item,\n            key: getBlockKey(item.card, index),\n        }));\n\n        return actualTag\n            ? itemsWithKeys.filter((item) => item.tags.includes(actualTag))\n            : itemsWithKeys;\n    }, [actualTag, items]);\n\n    // Only the active tab's configuration determines whether its cards can be collapsed.\n    const allTagConfig = typeof allTag === 'object' ? allTag : undefined;\n    const activeTag = actualTag === null ? allTagConfig : tags?.find((tag) => tag.id === actualTag);\n    const rows = responsiveValue({values: visibleRowsCount ?? {}, width, fallback: Infinity});\n    const columns = Math.max(\n        1,\n        Math.floor(\n            12 /\n                responsiveValue({\n                    values: colSizes ?? CARD_LAYOUT_DEFAULT_SIZES,\n                    width,\n                    fallback: 12,\n                }),\n        ),\n    );\n    const limit = rows > 0 ? Math.floor(rows) * columns : Infinity;\n    const canCollapse = Boolean(activeTag?.collapsible && cards.length > limit);\n    const visibleCards = canCollapse && !expanded ? cards.slice(0, limit) : cards;\n\n    const handleSelectTab = React.useCallback(\n        (tabId: string | null) => {\n            setSelectedTag(tabId);\n\n            const tabButton = tabButtons.find((tab) => tab.id === tabId);\n            if (tabButton?.analyticsEvent) {\n                handleAnalytics(tabButton.analyticsEvent);\n            }\n        },\n        [tabButtons, handleAnalytics],\n    );\n\n    return (\n        <AnimateBlock className={b()} animate={animated}>\n            {title && (\n                <Title\n                    className={b('title', {centered: centered})}\n                    title={title}\n                    subtitle={description}\n                />\n            )}\n            {tabButtons.length && (\n                <Row>\n                    <Col>\n                        <ButtonTabs\n                            className={b('tabs', {centered: centered})}\n                            items={tabButtons}\n                            activeTab={actualTag}\n                            onSelectTab={handleSelectTab}\n                            tabSize={tagButtonSize}\n                        />\n                    </Col>\n                </Row>\n            )}\n            <Row className={b('block-container')}>\n                <CardLayoutBlock\n                    title=\"\"\n                    colSizes={colSizes}\n                    className={b('cards-container')}\n                    animated={animated}\n                >\n                    {visibleCards.map(({card, key}) => (\n                        <ConstructorItem data={card} blockKey={key} key={key} />\n                    ))}\n                </CardLayoutBlock>\n            </Row>\n            {canCollapse && (\n                <Button\n                    className={b('toggle')}\n                    style={{transitionDelay: `${Math.min(visibleCards.length, 99) * 0.1}s`}}\n                    view=\"normal\"\n                    size=\"xl\"\n                    width=\"max\"\n                    aria-expanded={expanded}\n                    onClick={() => setExpanded((value) => !value)}\n                >\n                    {expanded\n                        ? (collapseButtonText ?? i18n('label-collapse'))\n                        : (expandButtonText ?? i18n('label-expand'))}\n                </Button>\n            )}\n        </AnimateBlock>\n    );\n};\nexport default FilterBlock;\n"]}

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

@@ -1,3 +1,5 @@
 {
-  "label-all-tag": "All"
+  "label-all-tag": "All",
+  "label-expand": "Show all",
+  "label-collapse": "Show less"
 }

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

@@ -1,5 +1,5 @@
-export declare const i18n: ((key: "label-all-tag", params?: import("@gravity-ui/i18n").Params) => string) & {
+export declare const i18n: ((key: "label-all-tag" | "label-expand" | "label-collapse", params?: import("@gravity-ui/i18n").Params) => string) & {
     keysetData: {
-        "pc-FilterBlock": Record<"label-all-tag", import("@gravity-ui/i18n").KeyData>;
+        "pc-FilterBlock": Record<"label-all-tag" | "label-expand" | "label-collapse", import("@gravity-ui/i18n").KeyData>;
     };
 };

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

@@ -1,3 +1,5 @@
 {
-  "label-all-tag": "Все"
+  "label-all-tag": "Все",
+  "label-expand": "Смотреть всё",
+  "label-collapse": "Свернуть"
 }

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

@@ -46,6 +46,9 @@ export declare const FilterTagProps: {
                 };
             };
         };
+        collapsible: {
+            type: string;
+        };
     };
 };
 export declare const FilterItemProps: {
@@ -119,6 +122,9 @@ export declare const FilterProps: {
                             };
                         };
                     };
+                    collapsible: {
+                        type: string;
+                    };
                 };
                 optionName?: undefined;
             })[];
@@ -128,6 +134,22 @@ export declare const FilterProps: {
             additionalProperties: boolean;
             properties: {};
         };
+        visibleRowsCount: {
+            type: string;
+            additionalProperties: boolean;
+            properties: {
+                [k: string]: {
+                    type: string;
+                    minimum: number;
+                };
+            };
+        };
+        expandButtonText: {
+            type: string;
+        };
+        collapseButtonText: {
+            type: string;
+        };
         tags: {
             type: string;
             items: {
@@ -387,6 +409,9 @@ export declare const FilterBlock: {
                                 };
                             };
                         };
+                        collapsible: {
+                            type: string;
+                        };
                     };
                     optionName?: undefined;
                 })[];
@@ -396,6 +421,22 @@ export declare const FilterBlock: {
                 additionalProperties: boolean;
                 properties: {};
             };
+            visibleRowsCount: {
+                type: string;
+                additionalProperties: boolean;
+                properties: {
+                    [k: string]: {
+                        type: string;
+                        minimum: number;
+                    };
+                };
+            };
+            expandButtonText: {
+                type: string;
+            };
+            collapseButtonText: {
+                type: string;
+            };
             tags: {
                 type: string;
                 items: {

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

@@ -16,6 +16,7 @@ exports.FilterTagProps = {
             type: 'string',
         },
         analyticsEvent: event_1.AnalyticsEventSchema,
+        collapsible: { type: 'boolean' },
     },
 };
 exports.FilterItemProps = {
@@ -54,6 +55,16 @@ exports.FilterProps = {
             ],
         },
         colSizes: common_1.containerSizesObject,
+        visibleRowsCount: {
+            type: 'object',
+            additionalProperties: false,
+            properties: Object.fromEntries(['all', 'sm', 'md', 'lg', 'xl'].map((size) => [
+                size,
+                { type: 'integer', minimum: 1 },
+            ])),
+        },
+        expandButtonText: { type: 'string' },
+        collapseButtonText: { type: 'string' },
         tags: (0, utils_1.filteredArray)(exports.FilterTagProps),
         items: (0, utils_1.filteredArray)(exports.FilterItemProps),
         tagButtonSize: {

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

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/schema.ts"],"names":[],"mappings":";;;AAAA,8DAKwC;AACxC,4DAAmE;AACnE,4DAA4D;AAE/C,QAAA,cAAc,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE;QACR,EAAE,EAAE;YACA,IAAI,EAAE,QAAQ;SACjB;QACD,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;SACjB;QACD,cAAc,EAAE,4BAAoB;KACvC;CACJ,CAAC;AAEW,QAAA,eAAe,GAAG;IAC3B,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;SACJ;QACD,IAAI,EAAE,EAAC,IAAI,EAAE,yBAAyB,EAAC;KAC1C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,uBAAc;QACjB,GAAG,wBAAe;QAClB,GAAG,yBAAgB;QACnB,MAAM,EAAE;YACJ,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,SAAS;oBACf,UAAU,EAAE,MAAM;iBACrB;gBACD;oBACI,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,OAAO;iBACtB;gBACD;oBACI,GAAG,sBAAc;iBACpB;aACJ;SACJ;QACD,QAAQ,EAAE,6BAAoB;QAC9B,IAAI,EAAE,IAAA,qBAAa,EAAC,sBAAc,CAAC;QACnC,KAAK,EAAE,IAAA,qBAAa,EAAC,uBAAe,CAAC;QACrC,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;SAC9B;QACD,QAAQ,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,cAAc,EAAE,mBAAW;CAC9B,CAAC","sourcesContent":["import {\n    AnimatableProps,\n    BlockBaseProps,\n    BlockHeaderProps,\n    containerSizesObject,\n} from '../../schema/validators/common';\nimport {AnalyticsEventSchema} from '../../schema/validators/event';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const FilterTagProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['id', 'label'],\n    properties: {\n        id: {\n            type: 'string',\n        },\n        label: {\n            type: 'string',\n        },\n        analyticsEvent: AnalyticsEventSchema,\n    },\n};\n\nexport const FilterItemProps = {\n    additionalProperties: false,\n    required: ['tags', 'card'],\n    properties: {\n        tags: {\n            type: 'array',\n            items: {\n                type: 'string',\n            },\n        },\n        card: {$ref: 'self#/definitions/cards'},\n    },\n};\n\nexport const FilterProps = {\n    additionalProperties: false,\n    required: ['tags', 'items'],\n    properties: {\n        ...BlockBaseProps,\n        ...AnimatableProps,\n        ...BlockHeaderProps,\n        allTag: {\n            oneOf: [\n                {\n                    type: 'boolean',\n                    optionName: 'auto',\n                },\n                {\n                    type: 'string',\n                    optionName: 'cutom',\n                },\n                {\n                    ...FilterTagProps,\n                },\n            ],\n        },\n        colSizes: containerSizesObject,\n        tags: filteredArray(FilterTagProps),\n        items: filteredArray(FilterItemProps),\n        tagButtonSize: {\n            type: 'string',\n            enum: ['s', 'm', 'l', 'xl'],\n        },\n        centered: {type: 'boolean'},\n    },\n};\n\nexport const FilterBlock = {\n    'filter-block': FilterProps,\n};\n"]}
+{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/schema.ts"],"names":[],"mappings":";;;AAAA,8DAKwC;AACxC,4DAAmE;AACnE,4DAA4D;AAE/C,QAAA,cAAc,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE;QACR,EAAE,EAAE;YACA,IAAI,EAAE,QAAQ;SACjB;QACD,KAAK,EAAE;YACH,IAAI,EAAE,QAAQ;SACjB;QACD,cAAc,EAAE,4BAAoB;QACpC,WAAW,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KACjC;CACJ,CAAC;AAEW,QAAA,eAAe,GAAG;IAC3B,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE;QACR,IAAI,EAAE;YACF,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;gBACH,IAAI,EAAE,QAAQ;aACjB;SACJ;QACD,IAAI,EAAE,EAAC,IAAI,EAAE,yBAAyB,EAAC;KAC1C;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,uBAAc;QACjB,GAAG,wBAAe;QAClB,GAAG,yBAAgB;QACnB,MAAM,EAAE;YACJ,KAAK,EAAE;gBACH;oBACI,IAAI,EAAE,SAAS;oBACf,UAAU,EAAE,MAAM;iBACrB;gBACD;oBACI,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,OAAO;iBACtB;gBACD;oBACI,GAAG,sBAAc;iBACpB;aACJ;SACJ;QACD,QAAQ,EAAE,6BAAoB;QAC9B,gBAAgB,EAAE;YACd,IAAI,EAAE,QAAQ;YACd,oBAAoB,EAAE,KAAK;YAC3B,UAAU,EAAE,MAAM,CAAC,WAAW,CAC1B,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC1C,IAAI;gBACJ,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAC;aAChC,CAAC,CACL;SACJ;QACD,gBAAgB,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;QAClC,kBAAkB,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;QACpC,IAAI,EAAE,IAAA,qBAAa,EAAC,sBAAc,CAAC;QACnC,KAAK,EAAE,IAAA,qBAAa,EAAC,uBAAe,CAAC;QACrC,aAAa,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;SAC9B;QACD,QAAQ,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KAC9B;CACJ,CAAC;AAEW,QAAA,WAAW,GAAG;IACvB,cAAc,EAAE,mBAAW;CAC9B,CAAC","sourcesContent":["import {\n    AnimatableProps,\n    BlockBaseProps,\n    BlockHeaderProps,\n    containerSizesObject,\n} from '../../schema/validators/common';\nimport {AnalyticsEventSchema} from '../../schema/validators/event';\nimport {filteredArray} from '../../schema/validators/utils';\n\nexport const FilterTagProps = {\n    type: 'object',\n    additionalProperties: false,\n    required: ['id', 'label'],\n    properties: {\n        id: {\n            type: 'string',\n        },\n        label: {\n            type: 'string',\n        },\n        analyticsEvent: AnalyticsEventSchema,\n        collapsible: {type: 'boolean'},\n    },\n};\n\nexport const FilterItemProps = {\n    additionalProperties: false,\n    required: ['tags', 'card'],\n    properties: {\n        tags: {\n            type: 'array',\n            items: {\n                type: 'string',\n            },\n        },\n        card: {$ref: 'self#/definitions/cards'},\n    },\n};\n\nexport const FilterProps = {\n    additionalProperties: false,\n    required: ['tags', 'items'],\n    properties: {\n        ...BlockBaseProps,\n        ...AnimatableProps,\n        ...BlockHeaderProps,\n        allTag: {\n            oneOf: [\n                {\n                    type: 'boolean',\n                    optionName: 'auto',\n                },\n                {\n                    type: 'string',\n                    optionName: 'cutom',\n                },\n                {\n                    ...FilterTagProps,\n                },\n            ],\n        },\n        colSizes: containerSizesObject,\n        visibleRowsCount: {\n            type: 'object',\n            additionalProperties: false,\n            properties: Object.fromEntries(\n                ['all', 'sm', 'md', 'lg', 'xl'].map((size) => [\n                    size,\n                    {type: 'integer', minimum: 1},\n                ]),\n            ),\n        },\n        expandButtonText: {type: 'string'},\n        collapseButtonText: {type: 'string'},\n        tags: filteredArray(FilterTagProps),\n        items: filteredArray(FilterItemProps),\n        tagButtonSize: {\n            type: 'string',\n            enum: ['s', 'm', 'l', 'xl'],\n        },\n        centered: {type: 'boolean'},\n    },\n};\n\nexport const FilterBlock = {\n    'filter-block': FilterProps,\n};\n"]}

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

@@ -19,7 +19,7 @@ export declare const blockMap: {
     "content-layout-block": (props: import("./models/index.js").ContentLayoutBlockProps) => import("react/jsx-runtime").JSX.Element;
     "share-block": ({ items, title }: import("./models/index.js").ShareBlockProps) => import("react/jsx-runtime").JSX.Element;
     "map-block": ({ map, border, disableShadow, ...props }: import("./models/index.js").MapBlockProps) => import("react/jsx-runtime").JSX.Element;
-    "filter-block": ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }: import("./models/index.js").FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
+    "filter-block": ({ title, description, tags, tagButtonSize, allTag, items, colSizes, visibleRowsCount, expandButtonText, collapseButtonText, centered, animated, }: import("./models/index.js").FilterBlockProps) => import("react/jsx-runtime").JSX.Element;
     "form-block": (props: import("./models/index.js").FormBlockProps) => import("react/jsx-runtime").JSX.Element | null;
     "slider-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: React.PropsWithChildren<import("./blocks/Slider/Slider.js").SliderProps>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -301,6 +301,7 @@ export interface CardLayoutBlockProps extends Childable, Animatable, LoadableChi
     }>;
 }
 export type FilterTag = {
+    collapsible?: boolean;
     id: string;
     label: string;
     analyticsEvent?: AnalyticsEventsProp;
@@ -310,6 +311,9 @@ export type FilterItem = {
     card: SubBlockModels;
 };
 export interface FilterBlockProps extends Animatable {
+    visibleRowsCount?: Partial<Record<GridColumnSize, number>>;
+    expandButtonText?: string;
+    collapseButtonText?: string;
     tags: FilterTag[];
     items: FilterItem[];
     title?: TitleItemProps | string;

package/build/cjs/models/constructor-items/blocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA+CA,IAAY,SAyBX;AAzBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,yCAA4B,CAAA;AAChC,CAAC,EAzBW,SAAS,yBAAT,SAAS,QAyBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AAiXD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {DeviceSupporting} from '../../utils/breakpoint';\nimport {AnalyticsEventsBase, AnalyticsEventsProp} from '../common';\n\nimport {\n    AnchorProps,\n    Animatable,\n    BackgroundImageProps,\n    ButtonProps,\n    CardBorder,\n    ContentSize,\n    ContentTextSize,\n    ContentTheme,\n    FileLinkProps,\n    GravityIconProps,\n    HeaderBreadCrumbsProps,\n    HeaderImageSize,\n    HeaderOffset,\n    HeaderWidth,\n    ImageDeviceProps,\n    ImageProps,\n    Justify,\n    LegendTableMarkerType,\n    LinkProps,\n    MapProps,\n    MediaComponentImageProps,\n    MediaComponentVideoProps,\n    MediaDirection,\n    MediaProps,\n    MediaView,\n    TextSize,\n    TextTheme,\n    ThemedImage,\n    ThemedMediaProps,\n    ThemedMediaVideoProps,\n    TitleItemBaseProps,\n    TitleItemProps,\n    WithBorder,\n    YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n    PromoFeaturesBlock = 'promo-features-block',\n    ExtendedFeaturesBlock = 'extended-features-block',\n    /** @deprecated */\n    SliderOldBlock = 'slider-old-block',\n    SliderBlock = 'slider-block',\n    QuestionsBlock = 'questions-block',\n    FoldableListBlock = 'foldable-list-block',\n    BannerBlock = 'banner-block',\n    CompaniesBlock = 'companies-block',\n    MediaBlock = 'media-block',\n    InfoBlock = 'info-block',\n    TableBlock = 'table-block',\n    TabsBlock = 'tabs-block',\n    HeaderSliderBlock = 'header-slider-block',\n    HeaderBlock = 'header-block',\n    HeroBlock = 'hero-block',\n    IconsBlock = 'icons-block',\n    CardLayoutBlock = 'card-layout-block',\n    ContentLayoutBlock = 'content-layout-block',\n    ShareBlock = 'share-block',\n    MapBlock = 'map-block',\n    FilterBlock = 'filter-block',\n    FormBlock = 'form-block',\n    FooterBlock = 'footer-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [\n    BlockType.HeaderBlock,\n    BlockType.HeaderSliderBlock,\n    BlockType.HeroBlock,\n];\n\nexport interface Childable {\n    children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n    anchor?: AnchorProps;\n    visible?: GridColumnSize | Partial<Record<GridColumnSize, boolean>>;\n    /** @deprecated */\n    resetPaddings?: boolean;\n    indent?: {\n        top?: IndentValue;\n        bottom?: IndentValue;\n    };\n    qa?: string;\n}\n\nexport interface LoadableProps {\n    source: string;\n    /**\n     * @deprecated Will be moved to params\n     */\n    serviceId?: number;\n    params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n    loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n    Sm = 'sm',\n    Md = 'md',\n    Lg = 'lg',\n    Xl = 'xl',\n}\n\nexport enum SliderType {\n    MediaCard = 'media-card',\n    HeaderCard = 'header-card',\n    FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n    items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n    /** @deprecated replaced by Media Props image */\n    url?: string;\n    /** @deprecated replaced by Media Props image */\n    disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n    fullWidth?: boolean;\n    fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockVideoIframe {\n    src: string;\n    autoplay?: boolean;\n    previewImg?: string;\n    height?: number;\n}\n\nexport interface HeaderBlockProps {\n    title: string;\n    overtitle?: string | JSX.Element;\n    description?: string;\n    additionalInfo?: string;\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n    width?: HeaderWidth;\n    /** @deprecated imageSize now depends on width */\n    imageSize?: HeaderImageSize;\n    /**\n     * @deprecated used only on the main page\n     * TODO: delete after the possibility to remove padding-bottom in the block\n     */\n    offset?: HeaderOffset;\n    image?: ThemedImage;\n    video?: ThemedMediaVideoProps;\n    videoIframe?: HeaderBlockVideoIframe;\n    mediaView?: MediaView;\n    centered?: boolean;\n    background?: ThemedHeaderBlockBackground;\n    theme?: 'light' | 'dark';\n    verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    status?: JSX.Element;\n    renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface HeroBlockBackground\n    extends Partial<MediaComponentImageProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n}\n\nexport interface HeroBlockMedia extends Partial<MediaProps> {\n    roundCorners?: boolean;\n}\n\nexport interface HeroBlockContent\n    extends Pick<ContentBlockProps, 'text' | 'list' | 'additionalInfo' | 'links' | 'theme'> {\n    title: Required<ContentBlockProps>['title'];\n}\n\nexport interface HeroBlockProps extends HeroBlockContent {\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    // TODO: add overtitle to ContentProps\n    overtitle?: string | JSX.Element;\n    /** Buttons are always rendered at size `xl` — a per-button `size` has no effect. */\n    buttons?: ThemeSupporting<\n        | Pick<\n              ButtonProps,\n              'url' | 'text' | 'theme' | 'primary' | 'extraProps' | 'target' | 'analyticsEvents'\n          >\n        | React.ReactNode\n    >[];\n    media?: ThemeSupporting<HeroBlockMedia>;\n    fullWidth?: boolean;\n    verticalOffset?: 's' | 'm' | 'l' | 'xl';\n    background?: ThemeSupporting<HeroBlockBackground>;\n}\n\nexport interface ExtendedFeaturesItem\n    extends Omit<\n        ContentBlockProps,\n        'title' | 'theme' | 'centered' | 'colSizes' | 'size' | 'title'\n    > {\n    title?: string;\n    label?: string;\n    icon?: ThemedImage;\n    /** @deprecated **/\n    link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n    items: ExtendedFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n    title: string;\n    text: string;\n    theme?: 'accent' | 'accent-light' | 'primary';\n    media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n    items: PromoFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n    onClick?: (index: number, newOpenState: boolean) => void;\n}\n\nexport interface QuestionsProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface FoldableListItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface FoldableListProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n    title: string;\n    description?: string;\n    images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n    direction?: MediaDirection;\n    mobileDirection?: MediaDirection;\n    largeMedia?: boolean;\n    mediaOnly?: boolean;\n    mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {\n    description?: string;\n    /** @deprecated  Use array of buttons from ContentBlockProps instead**/\n    button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n    media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n    map: Omit<MapProps, 'forceAspectRatio' | 'areaMargin' | 'copyrightPosition'>;\n}\n\nexport interface InfoBlockProps {\n    theme?: TextTheme;\n    backgroundColor?: ThemeSupporting<string>;\n    /** @deprecated **/\n    title?: string;\n    /** @deprecated **/\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n    /** @deprecated **/\n    sectionsTitle?: string;\n    /** @deprecated **/\n    links?: Pick<LinkProps, 'text' | 'url'>[];\n    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n    content: string[][];\n    legend?: string[];\n    hideLegend?: boolean;\n    justify?: Justify[];\n    marker?: LegendTableMarkerType;\n    /**\n     * Only as accessible name, not displayed explicitly\n     */\n    caption?: string;\n}\n\nexport interface TableBlockProps {\n    title: string;\n    table: TableProps;\n}\n\nexport interface TabsBlockItem\n    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n        WithBorder {\n    tabName: string;\n    /**\n     * @deprecated Use array links from ContentBlockProps instead\n     */\n    link?: LinkProps;\n    image?: ThemedImage;\n    caption?: string;\n    media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n    title?: TitleItemProps | string;\n    description?: string;\n    tabsColSizes?: GridColumnSizesType;\n    centered?: boolean;\n    direction?: MediaDirection;\n    items: TabsBlockItem[];\n    contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    titleClassName?: string;\n    centered?: boolean;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n    background?: ThemeSupporting<\n        BackgroundImageProps & {\n            border?: CardBorder;\n        }\n    >;\n}\n\nexport type FilterTag = {\n    id: string;\n    label: string;\n    analyticsEvent?: AnalyticsEventsProp;\n};\n\nexport type FilterItem = {\n    tags: string[];\n    card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable {\n    tags: FilterTag[];\n    items: FilterItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    tagButtonSize?: ButtonSize;\n    allTag?: boolean | string | FilterTag;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n    url?: string;\n    text?: string;\n    src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n    title?: string;\n    description?: string;\n    size?: 's' | 'm' | 'l';\n    items: IconsBlockItemProps[];\n    colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n    size?: ContentSize;\n    background?: ThemeSupporting<BackgroundImageProps>;\n    centered?: boolean;\n    theme?: ContentTheme;\n    textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n    textContent: ContentBlockProps;\n    fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n    title?: string;\n    text?: string;\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n    list: ContentItemProps[];\n    size: ContentSize;\n    theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n    title?: TitleItemBaseProps | string;\n    titleId?: string;\n    text?: string;\n    textId?: string;\n    additionalInfo?: string;\n    links?: LinkProps[];\n    buttons?: (ButtonProps | React.ReactNode)[];\n    size?: ContentSize;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n    theme?: ContentTheme;\n    list?: ContentItemProps[];\n    controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n    Vk = 'vk',\n    Telegram = 'telegram',\n    Twitter = 'twitter',\n    Facebook = 'facebook',\n    LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n    items: PCShareSocialNetwork[];\n    title?: string;\n}\n\nexport enum FormBlockDataTypes {\n    YANDEX = 'yandex',\n    HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n    FormContent = 'form-content',\n    ContentForm = 'content-form',\n    Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n    yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n    hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockBackgroundProps extends Omit<BackgroundImageProps, 'style'> {\n    style?: DeviceSupporting<React.CSSProperties>;\n}\n\nexport interface FormBlockProps {\n    formData: FormBlockData;\n    title?: string;\n    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n    direction?: FormBlockDirection;\n    background?: ThemeSupporting<FormBlockBackgroundProps>;\n    customFormNode?: React.ReactNode;\n    additionalContentNode?: React.ReactNode;\n}\n\nexport interface FooterLinkColumn {\n    title: string;\n    links: LinkProps[];\n}\n\nexport interface FooterLogoProps {\n    image: ThemeSupporting<ImageProps>;\n    url?: string;\n    alt?: string;\n}\n\nexport interface FooterSection {\n    columns: FooterLinkColumn[];\n}\n\nexport interface FooterContactItem {\n    icon: ThemeSupporting<ImageProps>;\n    url: string;\n    urlTitle?: string;\n}\n\nexport interface FooterContacts {\n    title?: string;\n    iconsSize?: 'm' | 'l';\n    links?: FooterContactItem[];\n    linksPosition?: 'left' | 'center';\n    titlePosition?: 'top' | 'near';\n}\n\nexport interface FooterDisclaimerFloor {\n    text: string;\n    align: 'left' | 'center';\n}\n\nexport interface FooterCopyright {\n    links?: Required<Pick<LinkProps, 'text' | 'url'>>[];\n    linksOverflowStrategy?: 'dropdown' | 'line-wrap';\n    languageSwitcher?: {\n        items: {\n            text: string;\n            href: string;\n        }[];\n        buttonText?: string;\n        image?: ThemeSupporting<ImageProps>;\n    };\n    logo?: FooterLogoProps;\n    copyrightText?: string;\n}\n\nexport interface FooterAttributionFloor {\n    text: string;\n}\n\nexport interface FooterSecondFloor {\n    copyright?: string;\n    links?: LinkProps[];\n    contacts?: FooterContactItem[];\n}\n\nexport interface FooterBlockProps {\n    /** Floor 1: first row — logo (if present) + these columns */\n    navigation?: {\n        logo?: FooterLogoProps & {\n            placement?: 'left' | 'top';\n        };\n        colSizes?: GridColumnSizesType;\n        columnsPerRow?: number;\n        columns: FooterLinkColumn[];\n    };\n    /** Floor 2: social row (title + social icons) */\n    contacts?: FooterContacts;\n    /** Floor 3: legal disclaimer (YFM) */\n    disclaimer?: FooterDisclaimerFloor;\n    /** Floor 4: privacy/terms links, language, copyright */\n    copyright?: FooterCopyright;\n    /** Floor 5: attribution (\"Created with ...\") */\n    attribution?: boolean;\n    backgroundColor?: ThemeSupporting<string>;\n    indentTop?: IndentValue;\n}\n\n//block models\nexport type HeaderBlockModel = {\n    type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type HeroBlockModel = {\n    type: BlockType.HeroBlock;\n} & HeroBlockProps;\n\nexport type SliderOldBlockModel = {\n    type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n    type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n    type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n    type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n    type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n    type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n    type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n    type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n    type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n    type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n    type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n    type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n    type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n    type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n    type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n    type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n    type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n    type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n    type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type FooterBlockModel = {\n    type: BlockType.FooterBlock;\n} & FooterBlockProps;\n\nexport type SliderBlockModel = {\n    type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n    | SliderOldBlockModel\n    | SliderBlockModel\n    | ExtendedFeaturesBlockModel\n    | PromoFeaturesBlockModel\n    | QuestionsBlockModel\n    | FoldableListBlockModel\n    | BannerBlockModel\n    | CompaniesBlockModel\n    | MediaBlockModel\n    | MapBlockModel\n    | InfoBlockModel\n    | TableBlockModel\n    | TabsBlockModel\n    | HeaderBlockModel\n    | HeroBlockModel\n    | IconsBlockModel\n    | HeaderSliderBlockModel\n    | CardLayoutBlockModel\n    | ContentLayoutBlockModel\n    | ShareBLockModel\n    | FilterBlockModel\n    | FormBlockModel\n    | FooterBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}
+{"version":3,"file":"blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/blocks.ts"],"names":[],"mappings":";;;AA+CA,IAAY,SAyBX;AAzBD,WAAY,SAAS;IACjB,wDAA2C,CAAA;IAC3C,8DAAiD,CAAA;IACjD,kBAAkB;IAClB,gDAAmC,CAAA;IACnC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,+CAAkC,CAAA;IAClC,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;IACxB,sDAAyC,CAAA;IACzC,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,uCAA0B,CAAA;IAC1B,kDAAqC,CAAA;IACrC,wDAA2C,CAAA;IAC3C,uCAA0B,CAAA;IAC1B,mCAAsB,CAAA;IACtB,yCAA4B,CAAA;IAC5B,qCAAwB,CAAA;IACxB,yCAA4B,CAAA;AAChC,CAAC,EAzBW,SAAS,yBAAT,SAAS,QAyBpB;AAEY,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACtC,QAAA,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,qCAArB,qBAAqB,QAKhC;AAED,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,0BAAV,UAAU,QAIrB;AAqXD,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,oCAApB,oBAAoB,QAM/B;AAOD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAED,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,kCAAlB,kBAAkB,QAI7B","sourcesContent":["import * as React from 'react';\n\nimport {ButtonSize} from '@gravity-ui/uikit';\n\nimport {GridColumnSize, GridColumnSizesType, IndentValue} from '../../grid/types';\nimport {ThemeSupporting} from '../../utils';\nimport {DeviceSupporting} from '../../utils/breakpoint';\nimport {AnalyticsEventsBase, AnalyticsEventsProp} from '../common';\n\nimport {\n    AnchorProps,\n    Animatable,\n    BackgroundImageProps,\n    ButtonProps,\n    CardBorder,\n    ContentSize,\n    ContentTextSize,\n    ContentTheme,\n    FileLinkProps,\n    GravityIconProps,\n    HeaderBreadCrumbsProps,\n    HeaderImageSize,\n    HeaderOffset,\n    HeaderWidth,\n    ImageDeviceProps,\n    ImageProps,\n    Justify,\n    LegendTableMarkerType,\n    LinkProps,\n    MapProps,\n    MediaComponentImageProps,\n    MediaComponentVideoProps,\n    MediaDirection,\n    MediaProps,\n    MediaView,\n    TextSize,\n    TextTheme,\n    ThemedImage,\n    ThemedMediaProps,\n    ThemedMediaVideoProps,\n    TitleItemBaseProps,\n    TitleItemProps,\n    WithBorder,\n    YandexFormProps,\n} from './common';\nimport {BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels} from './sub-blocks';\n\nexport enum BlockType {\n    PromoFeaturesBlock = 'promo-features-block',\n    ExtendedFeaturesBlock = 'extended-features-block',\n    /** @deprecated */\n    SliderOldBlock = 'slider-old-block',\n    SliderBlock = 'slider-block',\n    QuestionsBlock = 'questions-block',\n    FoldableListBlock = 'foldable-list-block',\n    BannerBlock = 'banner-block',\n    CompaniesBlock = 'companies-block',\n    MediaBlock = 'media-block',\n    InfoBlock = 'info-block',\n    TableBlock = 'table-block',\n    TabsBlock = 'tabs-block',\n    HeaderSliderBlock = 'header-slider-block',\n    HeaderBlock = 'header-block',\n    HeroBlock = 'hero-block',\n    IconsBlock = 'icons-block',\n    CardLayoutBlock = 'card-layout-block',\n    ContentLayoutBlock = 'content-layout-block',\n    ShareBlock = 'share-block',\n    MapBlock = 'map-block',\n    FilterBlock = 'filter-block',\n    FormBlock = 'form-block',\n    FooterBlock = 'footer-block',\n}\n\nexport const BlockTypes = Object.values(BlockType);\nexport const HeaderBlockTypes = [\n    BlockType.HeaderBlock,\n    BlockType.HeaderSliderBlock,\n    BlockType.HeroBlock,\n];\n\nexport interface Childable {\n    children?: SubBlock[];\n}\n\n//block props\nexport interface BlockBaseProps {\n    anchor?: AnchorProps;\n    visible?: GridColumnSize | Partial<Record<GridColumnSize, boolean>>;\n    /** @deprecated */\n    resetPaddings?: boolean;\n    indent?: {\n        top?: IndentValue;\n        bottom?: IndentValue;\n    };\n    qa?: string;\n}\n\nexport interface LoadableProps {\n    source: string;\n    /**\n     * @deprecated Will be moved to params\n     */\n    serviceId?: number;\n    params?: Record<string, string | number | boolean | object>;\n}\n\nexport interface LoadableChildren {\n    loadable?: LoadableProps;\n}\n\nexport enum SliderBreakpointNames {\n    Sm = 'sm',\n    Md = 'md',\n    Lg = 'lg',\n    Xl = 'xl',\n}\n\nexport enum SliderType {\n    MediaCard = 'media-card',\n    HeaderCard = 'header-card',\n    FullscreenCard = 'fullscreen-card',\n}\n\nexport type SliderBreakpointParams = Record<SliderBreakpointNames, number>;\nexport type SlidesToShow = Partial<SliderBreakpointParams> | number;\n\nexport interface SliderOldProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface SliderProps extends Childable, Animatable, LoadableChildren {\n    dots?: boolean;\n    arrows?: boolean;\n    slidesToShow?: SlidesToShow;\n    disclaimer?: {\n        text: string;\n        size?: TextSize;\n    };\n    title?: TitleItemBaseProps | string;\n    description?: string;\n    autoplay?: number;\n    //for server transforms\n    randomOrder?: boolean;\n    adaptive?: boolean;\n}\n\nexport interface HeaderSliderBlockProps extends Omit<SliderOldProps, 'title' | 'description'> {\n    items: HeaderBlockProps[];\n}\n\ninterface HeaderBackgroundProps {\n    /** @deprecated replaced by Media Props image */\n    url?: string;\n    /** @deprecated replaced by Media Props image */\n    disableCompress?: boolean;\n}\n\nexport interface HeaderBlockBackground extends Partial<HeaderBackgroundProps>, Partial<MediaProps> {\n    fullWidth?: boolean;\n    fullWidthMedia?: boolean;\n}\n\nexport type ThemedHeaderBlockBackground = ThemeSupporting<HeaderBlockBackground>;\n\nexport interface HeaderBlockVideoIframe {\n    src: string;\n    autoplay?: boolean;\n    previewImg?: string;\n    height?: number;\n}\n\nexport interface HeaderBlockProps {\n    title: string;\n    overtitle?: string | JSX.Element;\n    description?: string;\n    additionalInfo?: string;\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];\n    width?: HeaderWidth;\n    /** @deprecated imageSize now depends on width */\n    imageSize?: HeaderImageSize;\n    /**\n     * @deprecated used only on the main page\n     * TODO: delete after the possibility to remove padding-bottom in the block\n     */\n    offset?: HeaderOffset;\n    image?: ThemedImage;\n    video?: ThemedMediaVideoProps;\n    videoIframe?: HeaderBlockVideoIframe;\n    mediaView?: MediaView;\n    centered?: boolean;\n    background?: ThemedHeaderBlockBackground;\n    theme?: 'light' | 'dark';\n    verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    status?: JSX.Element;\n    renderTitle?: (title: string) => React.ReactNode;\n}\n\nexport interface HeroBlockBackground\n    extends Partial<MediaComponentImageProps>,\n        Partial<MediaComponentVideoProps> {\n    color?: string;\n}\n\nexport interface HeroBlockMedia extends Partial<MediaProps> {\n    roundCorners?: boolean;\n}\n\nexport interface HeroBlockContent\n    extends Pick<ContentBlockProps, 'text' | 'list' | 'additionalInfo' | 'links' | 'theme'> {\n    title: Required<ContentBlockProps>['title'];\n}\n\nexport interface HeroBlockProps extends HeroBlockContent {\n    breadcrumbs?: HeaderBreadCrumbsProps;\n    // TODO: add overtitle to ContentProps\n    overtitle?: string | JSX.Element;\n    /** Buttons are always rendered at size `xl` — a per-button `size` has no effect. */\n    buttons?: ThemeSupporting<\n        | Pick<\n              ButtonProps,\n              'url' | 'text' | 'theme' | 'primary' | 'extraProps' | 'target' | 'analyticsEvents'\n          >\n        | React.ReactNode\n    >[];\n    media?: ThemeSupporting<HeroBlockMedia>;\n    fullWidth?: boolean;\n    verticalOffset?: 's' | 'm' | 'l' | 'xl';\n    background?: ThemeSupporting<HeroBlockBackground>;\n}\n\nexport interface ExtendedFeaturesItem\n    extends Omit<\n        ContentBlockProps,\n        'title' | 'theme' | 'centered' | 'colSizes' | 'size' | 'title'\n    > {\n    title?: string;\n    label?: string;\n    icon?: ThemedImage;\n    /** @deprecated **/\n    link?: LinkProps;\n}\n\nexport interface ExtendedFeaturesProps extends Animatable {\n    items: ExtendedFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n}\n\nexport interface PromoFeaturesItem {\n    title: string;\n    text: string;\n    theme?: 'accent' | 'accent-light' | 'primary';\n    media?: ThemeSupporting<MediaProps>;\n}\n\nexport interface PromoFeaturesProps extends Animatable {\n    items: PromoFeaturesItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    theme?: 'grey' | 'default';\n}\n\nexport interface QuestionItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n    onClick?: (index: number, newOpenState: boolean) => void;\n}\n\nexport interface QuestionsProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: QuestionItem[];\n}\n\nexport interface QuestionBlockItemProps extends QuestionItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface FoldableListItem {\n    title: string;\n    text: string;\n    listStyle?: 'dash' | 'disk';\n    link?: LinkProps;\n}\n\nexport interface FoldableListProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {\n    items: FoldableListItem[];\n}\n\nexport interface FoldableListBlockItemProps extends FoldableListItem {\n    isOpened: boolean;\n    onClick: () => void;\n}\n\nexport interface BannerBlockProps extends BannerCardProps, Animatable {}\n\nexport interface CompaniesBlockProps extends Animatable {\n    title: string;\n    description?: string;\n    images: ThemeSupporting<ImageDeviceProps>;\n}\n\nexport interface MediaBaseBlockProps extends Animatable, MediaContentProps {\n    direction?: MediaDirection;\n    mobileDirection?: MediaDirection;\n    largeMedia?: boolean;\n    mediaOnly?: boolean;\n    mediaOnlyColSizes?: GridColumnSizesType;\n}\n\nexport interface MediaContentProps\n    extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'theme' | 'centered'> {\n    description?: string;\n    /** @deprecated  Use array of buttons from ContentBlockProps instead**/\n    button?: ButtonProps;\n}\n\nexport interface MediaBlockProps extends MediaBaseBlockProps, WithBorder {\n    media: ThemeSupporting<MediaProps>;\n}\n\nexport interface MapBlockProps extends MediaBaseBlockProps, WithBorder {\n    map: Omit<MapProps, 'forceAspectRatio' | 'areaMargin' | 'copyrightPosition'>;\n}\n\nexport interface InfoBlockProps {\n    theme?: TextTheme;\n    backgroundColor?: ThemeSupporting<string>;\n    /** @deprecated **/\n    title?: string;\n    /** @deprecated **/\n    buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme'>[];\n    /** @deprecated **/\n    sectionsTitle?: string;\n    /** @deprecated **/\n    links?: Pick<LinkProps, 'text' | 'url'>[];\n    leftContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n    rightContent?: Omit<ContentBlockProps, 'colSizes' | 'theme' | 'size'>;\n}\n\nexport interface TableProps {\n    content: string[][];\n    legend?: string[];\n    hideLegend?: boolean;\n    justify?: Justify[];\n    marker?: LegendTableMarkerType;\n    /**\n     * Only as accessible name, not displayed explicitly\n     */\n    caption?: string;\n}\n\nexport interface TableBlockProps {\n    title: string;\n    table: TableProps;\n}\n\nexport interface TabsBlockItem\n    extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>,\n        WithBorder {\n    tabName: string;\n    /**\n     * @deprecated Use array links from ContentBlockProps instead\n     */\n    link?: LinkProps;\n    image?: ThemedImage;\n    caption?: string;\n    media?: ThemedMediaProps;\n}\n\nexport interface TabsBlockProps extends Animatable {\n    title?: TitleItemProps | string;\n    description?: string;\n    tabsColSizes?: GridColumnSizesType;\n    centered?: boolean;\n    direction?: MediaDirection;\n    items: TabsBlockItem[];\n    contentSize?: ContentSize;\n}\n\nexport interface CardLayoutBlockProps extends Childable, Animatable, LoadableChildren {\n    title?: TitleItemProps | string;\n    titleClassName?: string;\n    centered?: boolean;\n    description?: string;\n    colSizes?: GridColumnSizesType;\n    background?: ThemeSupporting<\n        BackgroundImageProps & {\n            border?: CardBorder;\n        }\n    >;\n}\n\nexport type FilterTag = {\n    collapsible?: boolean;\n    id: string;\n    label: string;\n    analyticsEvent?: AnalyticsEventsProp;\n};\n\nexport type FilterItem = {\n    tags: string[];\n    card: SubBlockModels;\n};\n\nexport interface FilterBlockProps extends Animatable {\n    visibleRowsCount?: Partial<Record<GridColumnSize, number>>;\n    expandButtonText?: string;\n    collapseButtonText?: string;\n    tags: FilterTag[];\n    items: FilterItem[];\n    title?: TitleItemProps | string;\n    description?: string;\n    tagButtonSize?: ButtonSize;\n    allTag?: boolean | string | FilterTag;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n}\n\nexport interface IconsBlockItemProps extends AnalyticsEventsBase {\n    url?: string;\n    text?: string;\n    src: ThemeSupporting<string>;\n}\n\nexport interface IconsBlockProps {\n    title?: string;\n    description?: string;\n    size?: 's' | 'm' | 'l';\n    items: IconsBlockItemProps[];\n    colSizes?: GridColumnSizesType;\n}\n\ninterface ContentLayoutBlockParams {\n    size?: ContentSize;\n    background?: ThemeSupporting<BackgroundImageProps>;\n    centered?: boolean;\n    theme?: ContentTheme;\n    textWidth?: ContentTextSize;\n}\n\nexport interface ContentLayoutBlockProps extends ContentLayoutBlockParams {\n    textContent: ContentBlockProps;\n    fileContent?: FileLinkProps[];\n}\n\nexport type SVGIcon = (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;\n\nexport interface ContentItemProps {\n    title?: string;\n    text?: string;\n    icon?: ThemeSupporting<ImageProps | SVGIcon>;\n    gravityIcon?: ThemeSupporting<GravityIconProps>;\n}\n\nexport interface ContentListProps {\n    list: ContentItemProps[];\n    size: ContentSize;\n    theme?: ContentTheme;\n}\n\nexport interface ContentBlockProps {\n    title?: TitleItemBaseProps | string;\n    titleId?: string;\n    text?: string;\n    textId?: string;\n    additionalInfo?: string;\n    links?: LinkProps[];\n    buttons?: (ButtonProps | React.ReactNode)[];\n    size?: ContentSize;\n    colSizes?: GridColumnSizesType;\n    centered?: boolean;\n    theme?: ContentTheme;\n    list?: ContentItemProps[];\n    controlPosition?: 'default' | 'bottom';\n}\n\nexport enum PCShareSocialNetwork {\n    Vk = 'vk',\n    Telegram = 'telegram',\n    Twitter = 'twitter',\n    Facebook = 'facebook',\n    LinkedIn = 'linkedin',\n}\n\nexport interface ShareBlockProps {\n    items: PCShareSocialNetwork[];\n    title?: string;\n}\n\nexport enum FormBlockDataTypes {\n    YANDEX = 'yandex',\n    HUBSPOT = 'hubspot',\n}\n\nexport enum FormBlockDirection {\n    FormContent = 'form-content',\n    ContentForm = 'content-form',\n    Center = 'center',\n}\n\nexport interface FormBlockYandexData {\n    yandex: ThemeSupporting<YandexFormProps>;\n}\n\nexport interface FormBlockHubspotData {\n    hubspot: ThemeSupporting<HubspotFormProps>;\n}\n\nexport type FormBlockData = FormBlockYandexData | FormBlockHubspotData;\n\nexport interface FormBlockBackgroundProps extends Omit<BackgroundImageProps, 'style'> {\n    style?: DeviceSupporting<React.CSSProperties>;\n}\n\nexport interface FormBlockProps {\n    formData: FormBlockData;\n    title?: string;\n    textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;\n    direction?: FormBlockDirection;\n    background?: ThemeSupporting<FormBlockBackgroundProps>;\n    customFormNode?: React.ReactNode;\n    additionalContentNode?: React.ReactNode;\n}\n\nexport interface FooterLinkColumn {\n    title: string;\n    links: LinkProps[];\n}\n\nexport interface FooterLogoProps {\n    image: ThemeSupporting<ImageProps>;\n    url?: string;\n    alt?: string;\n}\n\nexport interface FooterSection {\n    columns: FooterLinkColumn[];\n}\n\nexport interface FooterContactItem {\n    icon: ThemeSupporting<ImageProps>;\n    url: string;\n    urlTitle?: string;\n}\n\nexport interface FooterContacts {\n    title?: string;\n    iconsSize?: 'm' | 'l';\n    links?: FooterContactItem[];\n    linksPosition?: 'left' | 'center';\n    titlePosition?: 'top' | 'near';\n}\n\nexport interface FooterDisclaimerFloor {\n    text: string;\n    align: 'left' | 'center';\n}\n\nexport interface FooterCopyright {\n    links?: Required<Pick<LinkProps, 'text' | 'url'>>[];\n    linksOverflowStrategy?: 'dropdown' | 'line-wrap';\n    languageSwitcher?: {\n        items: {\n            text: string;\n            href: string;\n        }[];\n        buttonText?: string;\n        image?: ThemeSupporting<ImageProps>;\n    };\n    logo?: FooterLogoProps;\n    copyrightText?: string;\n}\n\nexport interface FooterAttributionFloor {\n    text: string;\n}\n\nexport interface FooterSecondFloor {\n    copyright?: string;\n    links?: LinkProps[];\n    contacts?: FooterContactItem[];\n}\n\nexport interface FooterBlockProps {\n    /** Floor 1: first row — logo (if present) + these columns */\n    navigation?: {\n        logo?: FooterLogoProps & {\n            placement?: 'left' | 'top';\n        };\n        colSizes?: GridColumnSizesType;\n        columnsPerRow?: number;\n        columns: FooterLinkColumn[];\n    };\n    /** Floor 2: social row (title + social icons) */\n    contacts?: FooterContacts;\n    /** Floor 3: legal disclaimer (YFM) */\n    disclaimer?: FooterDisclaimerFloor;\n    /** Floor 4: privacy/terms links, language, copyright */\n    copyright?: FooterCopyright;\n    /** Floor 5: attribution (\"Created with ...\") */\n    attribution?: boolean;\n    backgroundColor?: ThemeSupporting<string>;\n    indentTop?: IndentValue;\n}\n\n//block models\nexport type HeaderBlockModel = {\n    type: BlockType.HeaderBlock;\n} & HeaderBlockProps;\n\nexport type HeroBlockModel = {\n    type: BlockType.HeroBlock;\n} & HeroBlockProps;\n\nexport type SliderOldBlockModel = {\n    type: BlockType.SliderOldBlock;\n} & SliderOldProps;\n\nexport type ExtendedFeaturesBlockModel = {\n    type: BlockType.ExtendedFeaturesBlock;\n} & ExtendedFeaturesProps;\n\nexport type PromoFeaturesBlockModel = {\n    type: BlockType.PromoFeaturesBlock;\n} & PromoFeaturesProps;\n\nexport type QuestionsBlockModel = {\n    type: BlockType.QuestionsBlock;\n} & QuestionsProps;\n\nexport type FoldableListBlockModel = {\n    type: BlockType.FoldableListBlock;\n} & FoldableListProps;\n\nexport type BannerBlockModel = {\n    type: BlockType.BannerBlock;\n} & BannerBlockProps;\n\nexport type CompaniesBlockModel = {\n    type: BlockType.CompaniesBlock;\n} & CompaniesBlockProps;\n\nexport type MediaBlockModel = {\n    type: BlockType.MediaBlock;\n} & MediaBlockProps;\n\nexport type MapBlockModel = {\n    type: BlockType.MapBlock;\n} & MapBlockProps;\n\nexport type InfoBlockModel = {\n    type: BlockType.InfoBlock;\n} & InfoBlockProps;\n\nexport type TableBlockModel = {\n    type: BlockType.TableBlock;\n} & TableBlockProps;\n\nexport type TabsBlockModel = {\n    type: BlockType.TabsBlock;\n} & TabsBlockProps;\n\nexport type CardLayoutBlockModel = {\n    type: BlockType.CardLayoutBlock;\n} & CardLayoutBlockProps;\n\nexport type FilterBlockModel = {\n    type: BlockType.FilterBlock;\n} & FilterBlockProps;\n\nexport type IconsBlockModel = {\n    type: BlockType.IconsBlock;\n} & IconsBlockProps;\n\nexport type HeaderSliderBlockModel = {\n    type: BlockType.HeaderSliderBlock;\n} & HeaderSliderBlockProps;\n\nexport type ContentLayoutBlockModel = {\n    type: BlockType.ContentLayoutBlock;\n} & ContentLayoutBlockProps;\n\nexport type ShareBLockModel = {\n    type: BlockType.ShareBlock;\n} & ShareBlockProps;\n\nexport type FormBlockModel = {\n    type: BlockType.FormBlock;\n} & FormBlockProps;\n\nexport type FooterBlockModel = {\n    type: BlockType.FooterBlock;\n} & FooterBlockProps;\n\nexport type SliderBlockModel = {\n    type: BlockType.SliderBlock;\n} & SliderProps;\n\ntype BlockModels =\n    | SliderOldBlockModel\n    | SliderBlockModel\n    | ExtendedFeaturesBlockModel\n    | PromoFeaturesBlockModel\n    | QuestionsBlockModel\n    | FoldableListBlockModel\n    | BannerBlockModel\n    | CompaniesBlockModel\n    | MediaBlockModel\n    | MapBlockModel\n    | InfoBlockModel\n    | TableBlockModel\n    | TabsBlockModel\n    | HeaderBlockModel\n    | HeroBlockModel\n    | IconsBlockModel\n    | HeaderSliderBlockModel\n    | CardLayoutBlockModel\n    | ContentLayoutBlockModel\n    | ShareBLockModel\n    | FilterBlockModel\n    | FormBlockModel\n    | FooterBlockModel;\n\nexport type Block = BlockModels & BlockBaseProps;\n"]}

package/build/docs/INDEX.md

@@ -29,6 +29,7 @@ A library for rendering whole web pages or page sections from declarative JSON/Y
 - **YFM in block text needs server processing.** Markdown-like fields render as plain text unless you run content through `contentTransformer`/`fullTransform` from `@gravity-ui/page-constructor/server`; `@diplodoc/transform` is a required peer dependency.
 - **Import the SCSS styles.** Add `@gravity-ui/page-constructor/styles/styles.scss` (SCSS, not CSS); custom blocks import the same file to reuse mixins/variables.
 - **Vite needs `vite-plugin-dynamic-import`.** Dynamic block imports fail under Vite without it.
+- **The grid needs a global `box-sizing: border-box` reset.** The package does not ship one; without it the container padding overflows the viewport horizontally while typecheck and build stay green. Add `*, *::before, *::after { box-sizing: border-box; }` to the host app styles.
 
 ## Install