@gravity-ui/page-constructor 8.23.5 → 8.24.0

package/build/docs/blocks/FilterBlock.md

@@ -68,25 +68,29 @@ Renders a set of cards grouped by tags, with a row of toggle buttons that lets t
 
 ## Properties
 
-| Property           | Type                                              | Default                   | Description                                                                                                                      |
-| ------------------ | ------------------------------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `title`            | `string \| TitleProps`                            | —                         | Block heading (string or Title options).                              |
-| `description`      | `string`                                          | —                         | YFM subtitle shown under the title.                                                                                              |
-| `tags` _required_  | `FilterTag[]`                                     | —                         | Tag definitions used as filter toggles (see below).                                                                              |
-| `items` _required_ | `FilterItem[]`                                    | —                         | Cards to filter (see below).                                                                                                     |
-| `allTag`           | `boolean \| string \| FilterTag`                  | —                         | Adds an "All" toggle. `true` uses the default label; a string overrides the label; an object supplies `{label, analyticsEvent}`. |
-| `tagButtonSize`    | `'s' \| 'm' \| 'l' \| 'xl'`                       | —                         | Size of the filter tag buttons.                                                                                                  |
-| `centered`         | `boolean`                                         | `false`                   | Centers the header and the tag button row.                                                                                       |
-| `colSizes`         | `{all?, sm?, md?, lg?, xl?}` (each `number` 1–12) | `{all: 12, sm: 6, md: 4}` | Column width per breakpoint for a single card.                                                                                   |
-| `animated`         | `boolean`                                         | —                         | Enables entrance animation for the block.                                                                                        |
+| Property             | Type                                              | Default                   | Description                                                                                                                      |
+| -------------------- | ------------------------------------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `title`              | `string \| TitleProps`                            | —                         | Block heading (string or Title options).                              |
+| `description`        | `string`                                          | —                         | YFM subtitle shown under the title.                                                                                              |
+| `tags` _required_    | `FilterTag[]`                                     | —                         | Tag definitions used as filter toggles (see below).                                                                              |
+| `items` _required_   | `FilterItem[]`                                    | —                         | Cards to filter (see below).                                                                                                     |
+| `allTag`             | `boolean \| string \| FilterTag`                  | —                         | Adds an "All" toggle. `true` uses the default label; a string overrides the label; an object supplies `{label, analyticsEvent}`. |
+| `tagButtonSize`      | `'s' \| 'm' \| 'l' \| 'xl'`                       | —                         | Size of the filter tag buttons.                                                                                                  |
+| `centered`           | `boolean`                                         | `false`                   | Centers the header and the tag button row.                                                                                       |
+| `colSizes`           | `{all?, sm?, md?, lg?, xl?}` (each `number` 1–12) | `{all: 12, sm: 6, md: 4}` | Column width per breakpoint for a single card.                                                                                   |
+| `animated`           | `boolean`                                         | —                         | Enables entrance animation for the block.                                                                                        |
+| `visibleRowsCount`   | `{all?, sm?, md?, lg?, xl?}` (positive integers)  | Unlimited                 | Shared collapsed row limits for opted-in tabs; values inherit from smaller breakpoints.                                          |
+| `expandButtonText`   | `string`                                          | Localized “Show all”      | Expand button label.                                                                                                             |
+| `collapseButtonText` | `string`                                          | Localized “Show less”     | Collapse button label.                                                                                                           |
 
 ### `FilterTag`
 
-| Property           | Type                   | Default | Description                                                        |
-| ------------------ | ---------------------- | ------- | ------------------------------------------------------------------ |
-| `id` _required_    | `string`               | —       | Tag identifier. Must match at least one value in an item's `tags`. |
-| `label` _required_ | `string`               | —       | Tag button label.                                                  |
-| `analyticsEvent`   | `AnalyticsEventSchema` | —       | Analytics event fired when the tag is selected.                    |
+| Property           | Type                   | Default | Description                                                                                                                     |
+| ------------------ | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `id` _required_    | `string`               | —       | Tag identifier. Must match at least one value in an item's `tags`.                                                              |
+| `label` _required_ | `string`               | —       | Tag button label.                                                                                                               |
+| `analyticsEvent`   | `AnalyticsEventSchema` | —       | Analytics event fired when the tag is selected.                                                                                 |
+| `collapsible`      | `boolean`              | `false` | Enables collapsing for this tab when a matching `visibleRowsCount` limit exists. Also supported by the object form of `allTag`. |
 
 ### `FilterItem`
 
@@ -110,3 +114,59 @@ No dedicated themed props on the block itself; individual card `media`/`backgrou
 ## Storybook
 
 [FilterBlock](https://preview.gravity-ui.com/page-constructor/?path=/docs/blocks-filterblock--docs)
+
+## Collapsible lists
+
+Set `collapsible: true` on each tag that should initially show a limited number of
+rows, including the object form of `allTag`. This is disabled by default.
+`visibleRowsCount` sets the shared row limit for these tabs, using the same
+breakpoints as `colSizes`. Each value applies until the next configured breakpoint.
+Without a matching row limit, the list remains unlimited.
+
+```yaml
+allTag:
+  id: all
+  label: All services
+  collapsible: true
+tags:
+  - id: infrastructure
+    label: Infrastructure
+    collapsible: true
+colSizes:
+  all: 12
+  md: 6
+  lg: 3
+visibleRowsCount:
+  all: 3
+  md: 2
+  lg: 2
+expandButtonText: Show all
+collapseButtonText: Show less
+```
+
+Row counts must be positive integers. The number of visible cards is the row count
+multiplied by the number of cards that fit in the current 12-column grid. The last
+row can be incomplete when there are fewer cards remaining. The full-width normal
+button appears only when the selected tab has more cards than its limit. Its labels
+default to localized “Show all” / “Show less”. Changing tabs resets the expanded state.
+
+### Showing 8 / 9 / 8 cards
+
+Configure row counts separately to keep complete rows as the column count changes:
+
+```yaml
+colSizes: {all: 12, md: 6, lg: 4, xl: 3}
+visibleRowsCount: {all: 3, md: 4, lg: 3, xl: 2}
+```
+
+| Viewport width   | Cards per row | Visible rows | Visible cards |
+| ---------------- | ------------- | ------------ | ------------- |
+| 1185px and wider | 4             | 2            | 8             |
+| 1081–1184px      | 3             | 3            | 9             |
+| 769–1080px       | 2             | 4            | 8             |
+| Below 769px      | 1             | 3            | 3             |
+
+These limits apply only to tags with `collapsible: true`. They configure rows,
+not automatic rounding of a requested card count. Fewer matching cards are all
+shown without a toggle. See the `CollapsibleResponsiveRows` and
+`CollapsibleWithFewCards` Storybook examples.

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { GridColumnSizesType } from "../../grid/index.js";
 import { CardLayoutBlockProps as CardLayoutBlockParams, ClassNameProps } from "../../models/index.js";
 import './CardLayout.css';
+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/esm/blocks/CardLayout/CardLayout.js

@@ -6,13 +6,13 @@ import { useTheme } from "../../context/theme/index.js";
 import { Col, GridJustifyContent, Row } from "../../grid/index.js";
 import { block, getThemedValue } from "../../utils/index.js";
 import './CardLayout.css';
-const DEFAULT_SIZES = {
+export const CARD_LAYOUT_DEFAULT_SIZES = {
     all: 12,
     sm: 6,
     md: 4,
 };
 const b = block('card-layout-block');
-const CardLayout = ({ title, description, animated, colSizes = DEFAULT_SIZES, children, className, titleClassName, background, centered = false, }) => {
+const CardLayout = ({ title, description, animated, colSizes = CARD_LAYOUT_DEFAULT_SIZES, children, className, titleClassName, background, centered = false, }) => {
     const theme = useTheme();
     const { border, ...backgroundImageProps } = getThemedValue(background || {}, theme);
     return (_jsxs(AnimateBlock, { className: b(null, className), animate: animated, children: [(title || description) && (_jsx(Title, { title: title, subtitle: description, className: b('title', { centered }, titleClassName), colJustifyContent: centered ? GridJustifyContent.Center : GridJustifyContent.Start })), _jsxs("div", { className: b('content', {

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

@@ -1 +1 @@
-{"version":3,"file":"CardLayout.js","sourceRoot":"../../../../src","sources":["blocks/CardLayout/CardLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,0BAAuB;AAErC,OAAO,EAAC,YAAY,EAAE,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACtE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAuB,kBAAkB,EAAE,GAAG,EAAC,4BAAmB;AAE7E,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,aAAa,GAAwB;IACvC,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAOF,MAAM,CAAC,GAAG,KAAK,CAAC,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,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,cAAc,CAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,KAAC,KAAK,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,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAErE,CACL,EACD,eACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,KAAC,GAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,GAAG,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,eAAe,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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,OAAO,0BAAuB;AAErC,OAAO,EAAC,YAAY,EAAE,eAAe,EAAE,KAAK,EAAC,kCAAyB;AACtE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAC7C,OAAO,EAAC,GAAG,EAAuB,kBAAkB,EAAE,GAAG,EAAC,4BAAmB;AAE7E,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAElD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,yBAAyB,GAAwB;IAC1D,GAAG,EAAE,EAAE;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AAOF,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,GAAG,yBAAyB,EACpC,QAAQ,EACR,SAAS,EACT,cAAc,EACd,UAAU,EACV,QAAQ,GAAG,KAAK,GACG,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAC,MAAM,EAAE,GAAG,oBAAoB,EAAC,GAAG,cAAc,CAAC,UAAU,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAClF,OAAO,CACH,MAAC,YAAY,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,aACzD,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACvB,KAAC,KAAK,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,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAK,GAErE,CACL,EACD,eACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,iBAAiB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;iBAC1C,CAAC,aAEF,KAAC,eAAe,IAAC,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAC,CAAC,KAAM,oBAAoB,GAAI,EAC9E,KAAC,GAAG,cACC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,KAAC,GAAG,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,eAAe,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/esm/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/esm/blocks/FilterBlock/FilterBlock.d.ts

@@ -1,4 +1,4 @@
 import { FilterBlockProps } from "../../models/index.js";
 import './FilterBlock.css';
-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/esm/blocks/FilterBlock/FilterBlock.js

@@ -1,17 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { CardLayoutBlock } from "../index.js";
+import { Button } from '@gravity-ui/uikit';
 import { AnimateBlock, Title } from "../../components/index.js";
 import ButtonTabs from "../../components/ButtonTabs/ButtonTabs.js";
+import { BREAKPOINTS } from "../../constants.js";
 import { ConstructorItem } from "../../containers/PageConstructor/components/ConstructorItem/index.js";
+import { useWindowWidth } from "../../context/windowWidthContext/index.js";
 import { Col, Row } from "../../grid/index.js";
+import { GridColumnSize } from "../../grid/types.js";
 import { useAnalytics } from "../../hooks/index.js";
 import { block, getBlockKey } from "../../utils/index.js";
+import CardLayoutBlock, { CARD_LAYOUT_DEFAULT_SIZES } from "../CardLayout/CardLayout.js";
 import { i18n } from "./i18n/index.js";
 import './FilterBlock.css';
 const b = block('filter-block');
-const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, centered, animated, }) => {
+const GRID_COLUMN_SIZES = [
+    GridColumnSize.Sm,
+    GridColumnSize.Md,
+    GridColumnSize.Lg,
+    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 >= BREAKPOINTS[size] && value !== undefined) {
+            result = value;
+        }
+    }
+    return result;
+}
+const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, colSizes, visibleRowsCount, expandButtonText, collapseButtonText, centered, animated, }) => {
     const handleAnalytics = useAnalytics();
+    const width = useWindowWidth();
+    const [expanded, setExpanded] = React.useState(false);
     const tabButtons = React.useMemo(() => {
         let allButton;
         if (allTag) {
@@ -49,6 +71,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,
@@ -58,6 +83,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 ?? 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);
@@ -65,7 +103,9 @@ const FilterBlock = ({ title, description, tags, tagButtonSize, allTag, items, c
             handleAnalytics(tabButton.analyticsEvent);
         }
     }, [tabButtons, handleAnalytics]);
-    return (_jsxs(AnimateBlock, { className: b(), animate: animated, children: [title && (_jsx(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && (_jsx(Row, { children: _jsx(Col, { children: _jsx(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: selectedTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), _jsx(Row, { className: b('block-container'), children: _jsx(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), children: cards.map(({ card, key }) => (_jsx(ConstructorItem, { data: card, blockKey: key }, key))) }) })] }));
+    return (_jsxs(AnimateBlock, { className: b(), animate: animated, children: [title && (_jsx(Title, { className: b('title', { centered: centered }), title: title, subtitle: description })), tabButtons.length && (_jsx(Row, { children: _jsx(Col, { children: _jsx(ButtonTabs, { className: b('tabs', { centered: centered }), items: tabButtons, activeTab: actualTag, onSelectTab: handleSelectTab, tabSize: tagButtonSize }) }) })), _jsx(Row, { className: b('block-container'), children: _jsx(CardLayoutBlock, { title: "", colSizes: colSizes, className: b('cards-container'), animated: animated, children: visibleCards.map(({ card, key }) => (_jsx(ConstructorItem, { data: card, blockKey: key }, key))) }) }), canCollapse && (_jsx(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 ?? i18n('label-collapse'))
+                    : (expandButtonText ?? i18n('label-expand')) }))] }));
 };
 export default FilterBlock;
 //# sourceMappingURL=FilterBlock.js.map

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

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

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

@@ -13,6 +13,7 @@ export const FilterTagProps = {
             type: 'string',
         },
         analyticsEvent: AnalyticsEventSchema,
+        collapsible: { type: 'boolean' },
     },
 };
 export const FilterItemProps = {
@@ -51,6 +52,16 @@ export const FilterProps = {
             ],
         },
         colSizes: 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: filteredArray(FilterTagProps),
         items: filteredArray(FilterItemProps),
         tagButtonSize: {

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

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sourceRoot":"../../../../src","sources":["blocks/FilterBlock/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,oBAAoB,GACvB,0CAAuC;AACxC,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AACnE,OAAO,EAAC,aAAa,EAAC,yCAAsC;AAE5D,MAAM,CAAC,MAAM,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,oBAAoB;KACvC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,cAAc;QACjB,GAAG,eAAe;QAClB,GAAG,gBAAgB;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,cAAc;iBACpB;aACJ;SACJ;QACD,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC;QACnC,KAAK,EAAE,aAAa,CAAC,eAAe,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;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,cAAc,EAAE,WAAW;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,OAAO,EACH,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,oBAAoB,GACvB,0CAAuC;AACxC,OAAO,EAAC,oBAAoB,EAAC,yCAAsC;AACnE,OAAO,EAAC,aAAa,EAAC,yCAAsC;AAE5D,MAAM,CAAC,MAAM,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,oBAAoB;QACpC,WAAW,EAAE,EAAC,IAAI,EAAE,SAAS,EAAC;KACjC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,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;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,oBAAoB,EAAE,KAAK;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3B,UAAU,EAAE;QACR,GAAG,cAAc;QACjB,GAAG,eAAe;QAClB,GAAG,gBAAgB;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,cAAc;iBACpB;aACJ;SACJ;QACD,QAAQ,EAAE,oBAAoB;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,aAAa,CAAC,cAAc,CAAC;QACnC,KAAK,EAAE,aAAa,CAAC,eAAe,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;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,cAAc,EAAE,WAAW;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/esm/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/esm/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/esm/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,MAAM,CAAN,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,KAAT,SAAS,QAyBpB;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAiXD,MAAM,CAAN,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,KAApB,oBAAoB,QAM/B;AAOD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,KAAlB,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,MAAM,CAAN,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,KAAT,SAAS,QAyBpB;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,SAAS,CAAC,WAAW;IACrB,SAAS,CAAC,iBAAiB;IAC3B,SAAS,CAAC,SAAS;CACtB,CAAC;AAgCF,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC7B,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;IACT,kCAAS,CAAA;AACb,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC;AAED,MAAM,CAAN,IAAY,UAIX;AAJD,WAAY,UAAU;IAClB,sCAAwB,CAAA;IACxB,wCAA0B,CAAA;IAC1B,gDAAkC,CAAA;AACtC,CAAC,EAJW,UAAU,KAAV,UAAU,QAIrB;AAqXD,MAAM,CAAN,IAAY,oBAMX;AAND,WAAY,oBAAoB;IAC5B,iCAAS,CAAA;IACT,6CAAqB,CAAA;IACrB,2CAAmB,CAAA;IACnB,6CAAqB,CAAA;IACrB,6CAAqB,CAAA;AACzB,CAAC,EANW,oBAAoB,KAApB,oBAAoB,QAM/B;AAOD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC1B,kDAA4B,CAAA;IAC5B,kDAA4B,CAAA;IAC5B,uCAAiB,CAAA;AACrB,CAAC,EAJW,kBAAkB,KAAlB,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"]}