npm - @gravity-ui/page-constructor - Versions diffs - 8.23.5 → 8.24.1-alpha.0 - Mend

@gravity-ui/page-constructor 8.23.5 → 8.24.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/build/cjs/sub-blocks/PriceCard/PriceCard.css CHANGED Viewed

@@ -28,12 +28,13 @@ unpredictable css rules order in build */
 .pc-price-card__content_theme_dark .pc-price-card__info .yfm * {
   color: var(--g-color-text-light-primary);
 }
-.pc-price-card__content_theme_dark .pc-price-card__info a {
+.pc-price-card__content_theme_dark.pc-price-card__content_theme_dark .pc-price-card__info a {
   text-decoration: underline;
 }
-.pc-price-card__content_theme_dark .pc-price-card__info a:hover {
+.pc-price-card__content_theme_dark.pc-price-card__content_theme_dark .pc-price-card__info a:hover {
   color: var(--g-color-text-light-secondary);
 }
 .pc-price-card__content_theme_light {
   color: var(--g-color-text-dark-primary);
 }
@@ -41,12 +42,13 @@ unpredictable css rules order in build */
 .pc-price-card__content_theme_light .pc-price-card__info .yfm * {
   color: var(--g-color-text-dark-primary);
 }
-.pc-price-card__content_theme_light .pc-price-card__info a {
+.pc-price-card__content_theme_light.pc-price-card__content_theme_light .pc-price-card__info a {
   text-decoration: underline;
 }
-.pc-price-card__content_theme_light .pc-price-card__info a:hover {
+.pc-price-card__content_theme_light.pc-price-card__content_theme_light .pc-price-card__info a:hover {
   color: var(--g-color-text-dark-secondary);
 }
 .pc-price-card__title.pc-price-card__title {
   font-size: var(--g-text-subheader-3-font-size);
   line-height: var(--g-text-subheader-3-line-height);

package/build/docs/INDEX.md CHANGED Viewed

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

package/build/docs/blocks/FilterBlock.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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 {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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/build/esm/blocks/FilterBlock/schema.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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/blocks/Footer/components/CopyrightFloor/CopyrightFloor.css CHANGED Viewed

@@ -72,15 +72,16 @@ unpredictable css rules order in build */
 .pc-footer-block__links-floor-list_wrap {
   flex-wrap: wrap;
 }
-.pc-footer-block__links-floor-list a {
+.pc-footer-block.pc-footer-block .pc-footer-block__links-floor-list a {
   display: inline-block;
   text-decoration: none;
   color: var(--g-color-text-primary);
 }
-.pc-footer-block__links-floor-list a:hover {
+.pc-footer-block.pc-footer-block .pc-footer-block__links-floor-list a:hover {
   color: var(--g-color-text-secondary);
   background-color: transparent;
 }
 .pc-footer-block__links-floor-inner_centered .pc-footer-block__links-floor-list_wrap {
   justify-content: center;
 }

package/build/esm/components/FullscreenImage/FullscreenImage.css CHANGED Viewed

@@ -12,7 +12,6 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__modal-content {
   position: relative;
   border-radius: var(--pc-border-radius);
-  width: 100%;
 }
 .pc-fullscreen-image__modal-content-wrapper {
   width: 100%;
@@ -27,6 +26,7 @@ unpredictable css rules order in build */
   justify-content: center;
 }
 .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
+  width: 100%;
   background-color: transparent;
 }
 .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__expand-icon-wrapper, .pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__close-icon-wrapper {

package/build/esm/constructor-items.d.ts CHANGED Viewed

@@ -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/containers/PageConstructor/PageConstructor.css CHANGED Viewed

@@ -66,12 +66,13 @@ unpredictable css rules order in build */
   font-family: var(--g-font-family-sans);
   color: var(--g-color-text-primary);
 }
-.yfm_constructor code,
-.yfm_constructor kbd,
-.yfm_constructor pre {
+.yfm_constructor.yfm_constructor code,
+.yfm_constructor.yfm_constructor kbd,
+.yfm_constructor.yfm_constructor pre {
   font-family: var(--g-font-family-monospace);
   color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
 .yfm_constructor.yfm_constructor h3,
@@ -150,13 +151,13 @@ unpredictable css rules order in build */
 .yfm_constructor a:focus:not(:focus-visible) {
   box-shadow: none;
 }
-.yfm_constructor table {
+.yfm_constructor.yfm_constructor table {
   color: var(--g-color-text-primary);
   border: 1px solid var(--g-color-line-generic);
   background: var(--g-color-base-background);
 }
-.yfm_constructor thead,
-.yfm_constructor table tr:nth-child(2n) {
+.yfm_constructor.yfm_constructor thead,
+.yfm_constructor.yfm_constructor table tr:nth-child(2n) {
   background-color: var(--g-color-base-generic);
 }

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

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