@doyourjob/gravity-ui-page-constructor 5.31.62 → 5.31.63

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/page-constructor/)
+# @gravity-ui/page-constructor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/page-constructor)](https://www.npmjs.com/package/@gravity-ui/page-constructor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/page-constructor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/page-constructor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/page-constructor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://doyourjob-agency.github.io/page-constructor/main/)
 
 ## Page constructor
 

package/build/cjs/blocks/Reports/Reports.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-reports-block__title {
+  margin-bottom: 24px;
+}
 .pc-reports-block__select {
   margin-bottom: 32px;
 }

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

@@ -1,3 +1,3 @@
 import { ReportsBlockProps } from '../../models';
-export declare const ReportsBlock: ({ typeKey, empty }: ReportsBlockProps) => JSX.Element;
+export declare const ReportsBlock: ({ title, typeKey, empty }: ReportsBlockProps) => JSX.Element;
 export default ReportsBlock;

package/build/cjs/blocks/Reports/Reports.js

@@ -8,9 +8,13 @@ const reportsContext_1 = require("../../context/reportsContext");
 const utils_1 = require("../../utils");
 const ReportsItem_1 = tslib_1.__importDefault(require("./ReportsItem/ReportsItem"));
 const b = (0, utils_1.block)('reports-block');
-const ReportsBlock = ({ typeKey, empty }) => {
+const titleColSizes = {
+    all: 12,
+};
+const ReportsBlock = ({ title, typeKey, empty }) => {
     const data = (0, react_1.useContext)(reportsContext_1.ReportsContext);
-    const { selects, items, filesOutline } = (0, react_1.useMemo)(() => data[typeKey], [data, typeKey]);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const { selects, items, itemsPerPage, filesOutline } = (0, react_1.useMemo)(() => data[typeKey], [data, typeKey]);
     const initFilters = (0, react_1.useMemo)(() => (selects === null || selects === void 0 ? void 0 : selects.reduce((acc, select) => (Object.assign(Object.assign({}, acc), { [select.name]: select.init })), {})) || {}, [selects]);
     const [localFilters, setLocalFilters] = (0, react_1.useState)(initFilters);
     const handleChange = (0, react_1.useCallback)((name, value) => setLocalFilters((prev) => (Object.assign(Object.assign({}, prev), { [name]: value }))), []);
@@ -23,9 +27,20 @@ const ReportsBlock = ({ typeKey, empty }) => {
             return acc;
         }, false))
         : items, [items, localFilters]);
+    const paginatedItems = (0, react_1.useMemo)(() => {
+        if (!itemsPerPage)
+            return filteredItems;
+        const startIndex = (page - 1) * itemsPerPage;
+        return filteredItems.slice(startIndex, startIndex + itemsPerPage);
+    }, [filteredItems, itemsPerPage, page]);
+    const titleProps = !title || typeof title === 'string'
+        ? { text: title, textSize: 'm' }
+        : title;
     return (react_1.default.createElement("div", { className: b() },
+        title && react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
         (selects === null || selects === void 0 ? void 0 : selects.length) && (react_1.default.createElement("div", { className: b('select') }, selects.map(({ name, options }) => (react_1.default.createElement(components_1.Select, { key: name, name: name, options: options, onChange: handleChange }))))),
-        filteredItems.length ? (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => (react_1.default.createElement(ReportsItem_1.default, Object.assign({ key: index }, item, { filesOutline: filesOutline }))))) : (react_1.default.createElement("div", { className: b('empty') }, empty))));
+        paginatedItems.length ? (paginatedItems.map((item, index) => (react_1.default.createElement(ReportsItem_1.default, Object.assign({ key: index }, item, { filesOutline: filesOutline }))))) : (react_1.default.createElement("div", { className: b('empty') }, empty)),
+        itemsPerPage && (react_1.default.createElement(components_1.Paginator, { page: page, itemsPerPage: itemsPerPage, totalItems: filteredItems.length, maxPages: Infinity, onPageChange: setPage }))));
 };
 exports.ReportsBlock = ReportsBlock;
 exports.default = exports.ReportsBlock;

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

@@ -3,6 +3,38 @@ export declare const ReportsBlock: {
         additionalProperties: boolean;
         required: string[];
         properties: {
+            title: {
+                oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        urlTitle: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                    contentType?: undefined;
+                })[];
+            };
             typeKey: {
                 type: string;
             };

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

@@ -6,7 +6,16 @@ exports.ReportsBlock = {
     'reports-block': {
         additionalProperties: false,
         required: ['typeKey'],
-        properties: Object.assign(Object.assign({}, common_1.BaseProps), { typeKey: {
+        properties: Object.assign(Object.assign({}, common_1.BaseProps), { title: {
+                oneOf: [
+                    {
+                        type: 'string',
+                        contentType: 'text',
+                        optionName: 'text',
+                    },
+                    Object.assign(Object.assign({}, common_1.TitleProps), { optionName: 'options' }),
+                ],
+            }, typeKey: {
                 type: 'string',
             }, empty: {
                 type: 'string',

package/build/cjs/components/Paginator/Paginator.css

@@ -0,0 +1,61 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-paginator {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.pc-paginator__item {
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 52px;
+  min-height: 52px;
+  margin: 0 4px;
+  padding: 16px 20px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--g-color-text-primary);
+}
+.pc-paginator__item:hover {
+  background-color: var(--g-color-private-blue-50);
+}
+.pc-paginator__item_type_page {
+  cursor: pointer;
+}
+.pc-paginator__item_type_page.pc-paginator__item_active {
+  background-color: var(--g-color-private-blue-200-solid);
+  cursor: default;
+}
+.pc-paginator__item_type_prev, .pc-paginator__item_type_next {
+  cursor: pointer;
+  gap: 8px;
+  font-size: 14px;
+}
+.pc-paginator__pagination {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+@media (max-width: 577px) {
+  .pc-paginator__pagination {
+    flex-direction: column;
+  }
+}
+.pc-paginator__pagination-block {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 4px;
+}

package/build/cjs/components/Paginator/Paginator.d.ts

@@ -0,0 +1,3 @@
+import { PaginatorProps } from './types';
+export declare const Paginator: ({ itemsPerPage, totalItems, maxPages, page, className, onPageChange, pageCountForShowSupportButtons, }: PaginatorProps) => JSX.Element | null;
+export default Paginator;

package/build/cjs/components/Paginator/Paginator.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paginator = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../utils/cn");
+const NavigationButton_1 = require("./components/NavigationButton");
+const PaginatorItem_1 = require("./components/PaginatorItem");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+const b = (0, cn_1.block)('paginator');
+const DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS = 5;
+const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
+    const [pagesCount, setPagesCount] = (0, react_1.useState)((0, utils_1.getPagesCount)({ itemsPerPage, totalItems, maxPages }));
+    (0, react_1.useEffect)(() => {
+        const count = (0, utils_1.getPagesCount)({ itemsPerPage, totalItems, maxPages });
+        setPagesCount(count);
+    }, [itemsPerPage, totalItems, maxPages]);
+    const handlePageChange = (pageIndex) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(pageIndex);
+    const isShowSupportButtons = (0, react_1.useMemo)(() => pagesCount > pageCountForShowSupportButtons, [pageCountForShowSupportButtons, pagesCount]);
+    if (pagesCount <= 1) {
+        return null;
+    }
+    const handleArrowClick = (type) => {
+        let newPage = page;
+        if (type === 'prev' && page > 1) {
+            newPage = page - 1;
+        }
+        else if (type === 'next' && page < pagesCount) {
+            newPage = page + 1;
+        }
+        if (newPage !== page) {
+            handlePageChange(newPage);
+        }
+    };
+    const handlePageClick = (index) => {
+        if (index !== page && typeof index === 'number') {
+            handlePageChange(index);
+        }
+    };
+    const paginatorItems = (0, utils_1.getPageConfigs)({
+        page,
+        pagesCount,
+        handlePageClick,
+    });
+    if (page > 1 && isShowSupportButtons) {
+        paginatorItems.unshift({
+            key: types_1.ArrowType.Prev,
+            dataKey: types_1.ArrowType.Prev,
+            mods: { type: types_1.ArrowType.Prev },
+            onClick: handleArrowClick,
+            index: 0,
+            content: react_1.default.createElement(NavigationButton_1.NavigationButton, { arrowType: types_1.ArrowType.Prev }),
+        });
+    }
+    if (page < pagesCount && isShowSupportButtons) {
+        paginatorItems.push({
+            key: types_1.ArrowType.Next,
+            dataKey: types_1.ArrowType.Next,
+            mods: { type: types_1.ArrowType.Next },
+            index: page + 1,
+            onClick: handleArrowClick,
+            content: react_1.default.createElement(NavigationButton_1.NavigationButton, { arrowType: types_1.ArrowType.Next }),
+        });
+    }
+    const renderPaginatorItem = (item) => {
+        const { key } = item, rest = tslib_1.__rest(item, ["key"]);
+        return react_1.default.createElement(PaginatorItem_1.PaginatorItem, Object.assign({ key: `page_${key}` }, rest));
+    };
+    return (react_1.default.createElement("div", { className: b('pagination') },
+        page > 1 && isShowSupportButtons && (react_1.default.createElement("div", { className: b('pagination-block') },
+            react_1.default.createElement("ul", { className: b(null, className) }, paginatorItems.slice(0, 1).map(renderPaginatorItem)))),
+        react_1.default.createElement("div", { className: b('pagination-block') },
+            react_1.default.createElement("ul", { className: b(null, className) }, isShowSupportButtons
+                ? paginatorItems
+                    .slice(page > 1 ? 1 : 0, page < pagesCount
+                    ? paginatorItems.length - 1
+                    : paginatorItems.length)
+                    .map(renderPaginatorItem)
+                : paginatorItems.map(renderPaginatorItem))),
+        page < pagesCount && isShowSupportButtons && (react_1.default.createElement("div", { className: b('pagination-block') },
+            react_1.default.createElement("ul", { className: b(null, className) }, paginatorItems
+                .slice(paginatorItems.length - 1, paginatorItems.length)
+                .map(renderPaginatorItem))))));
+};
+exports.Paginator = Paginator;
+exports.default = exports.Paginator;

package/build/cjs/components/Paginator/components/NavigationButton.d.ts

@@ -0,0 +1,6 @@
+import { ArrowType } from '../types';
+export type NavigationButtonProps = {
+    arrowType: ArrowType;
+    disabled?: boolean;
+};
+export declare const NavigationButton: ({ arrowType, disabled }: NavigationButtonProps) => JSX.Element | null;

package/build/cjs/components/Paginator/components/NavigationButton.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("../../../icons");
+const i18n_1 = require("../i18n");
+const types_1 = require("../types");
+const NavigationButton = ({ arrowType, disabled }) => {
+    if (disabled) {
+        return null;
+    }
+    if (arrowType === types_1.ArrowType.Prev) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(icons_1.ArrowLeftIcon, null),
+            react_1.default.createElement("span", null, (0, i18n_1.i18n)('prev'))));
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", null, (0, i18n_1.i18n)('next')),
+        react_1.default.createElement(icons_1.ArrowRightIcon, null)));
+};
+exports.NavigationButton = NavigationButton;

package/build/cjs/components/Paginator/components/PaginatorItem.d.ts

@@ -0,0 +1,2 @@
+import { PaginatorItemProps } from '../types';
+export declare const PaginatorItem: ({ dataKey, mods, content, onClick }: PaginatorItemProps) => JSX.Element;

package/build/cjs/components/Paginator/components/PaginatorItem.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginatorItem = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const cn_1 = require("../../../utils/cn");
+const b = (0, cn_1.block)('paginator');
+const PaginatorItem = ({ dataKey, mods, content, onClick }) => {
+    const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
+    const handleClick = (0, react_1.useCallback)(() => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(itemKey);
+    }, [itemKey, onClick]);
+    return (react_1.default.createElement("button", { className: b('item', mods), onClick: handleClick }, content));
+};
+exports.PaginatorItem = PaginatorItem;

package/build/cjs/components/Paginator/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "prev": "Previous",
+  "next": "Next"
+}

package/build/cjs/components/Paginator/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "prev" | "next", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/cjs/components/Paginator/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}Paginator`);

package/build/cjs/components/Paginator/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "prev": "Предыдущая",
+  "next": "Следующая"
+}

package/build/cjs/components/Paginator/types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { NoStrictEntityMods } from '@bem-react/classname';
+import type { ClassNameProps } from '../../models/common';
+export interface PaginatorItemProps {
+    key: string | ArrowType;
+    dataKey: string | ArrowType;
+    mods: NoStrictEntityMods;
+    content: ReactNode;
+    onClick?: (key: number | ArrowType) => void;
+    index: number;
+}
+export type PaginatorProps = {
+    page: number;
+    totalItems: number;
+    itemsPerPage: number;
+    maxPages: number;
+    onPageChange: (page: number) => void;
+    pageCountForShowSupportButtons?: number;
+} & ClassNameProps;
+export declare enum ArrowType {
+    Prev = "prev",
+    Next = "next"
+}
+export type GetPageConfigParams = {
+    page: number;
+    pagesCount: number;
+    handlePageClick: (key: number | ArrowType) => void;
+};

package/build/cjs/components/Paginator/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowType = void 0;
+var ArrowType;
+(function (ArrowType) {
+    ArrowType["Prev"] = "prev";
+    ArrowType["Next"] = "next";
+})(ArrowType = exports.ArrowType || (exports.ArrowType = {}));

package/build/cjs/components/Paginator/utils.d.ts

@@ -0,0 +1,3 @@
+import { GetPageConfigParams, PaginatorItemProps, PaginatorProps } from './types';
+export declare const getPageConfigs: ({ page, pagesCount, handlePageClick }: GetPageConfigParams) => PaginatorItemProps[];
+export declare const getPagesCount: (props: Pick<PaginatorProps, 'totalItems' | 'itemsPerPage' | 'maxPages'>) => number;

package/build/cjs/components/Paginator/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPagesCount = exports.getPageConfigs = void 0;
+const getPageConfigs = ({ page, pagesCount, handlePageClick }) => {
+    const paginatorItems = [];
+    const showLeftDots = page > 4;
+    const showRightDots = page < pagesCount - 3;
+    const addPage = (i) => {
+        paginatorItems.push({
+            key: String(i),
+            dataKey: String(i),
+            index: i,
+            mods: { type: 'page', active: page === i },
+            onClick: handlePageClick,
+            content: i,
+        });
+    };
+    if (pagesCount <= 5) {
+        for (let i = 1; i <= pagesCount; i++) {
+            addPage(i);
+        }
+        return paginatorItems;
+    }
+    // Всегда добавляем первую
+    addPage(1);
+    // Левые троеточия
+    if (showLeftDots) {
+        paginatorItems.push({
+            key: 'ellipsis',
+            dataKey: 'ellipsis',
+            index: -1,
+            mods: { type: 'ellipsis' },
+            content: '…',
+        });
+    }
+    // Центральный блок
+    let start = Math.max(2, page - 1);
+    let end = Math.min(pagesCount - 1, page + 1);
+    if (!showLeftDots) {
+        start = 2;
+        end = 5;
+    }
+    else if (!showRightDots) {
+        start = pagesCount - 4;
+        end = pagesCount - 1;
+    }
+    for (let i = start; i <= end; i++) {
+        addPage(i);
+    }
+    // Правые троеточия
+    if (showRightDots) {
+        paginatorItems.push({
+            key: 'ellipsis',
+            dataKey: 'ellipsis',
+            index: -2,
+            mods: { type: 'ellipsis' },
+            content: '…',
+        });
+    }
+    // Последняя страница
+    if (pagesCount > 1) {
+        addPage(pagesCount);
+    }
+    return paginatorItems;
+};
+exports.getPageConfigs = getPageConfigs;
+const getPagesCount = (props) => {
+    const totalPages = Math.ceil(props.totalItems / props.itemsPerPage);
+    return Number.isFinite(props.maxPages) ? Math.min(totalPages, props.maxPages) : totalPages;
+};
+exports.getPagesCount = getPagesCount;

package/build/cjs/components/index.d.ts

@@ -43,5 +43,6 @@ export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll';
 export { default as Tag } from './Tag/Tag';
 export { default as ReportFile } from './ReportFile/ReportFile';
 export { default as Select } from './Select/Select';
+export { default as Paginator } from './Paginator/Paginator';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.ReportFile = exports.Tag = exports.InfiniteScroll = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.RouterLink = exports.ReactPlayer = exports.OverflowScroller = exports.OutsideClick = exports.MetaInfo = exports.Media = exports.Links = exports.Link = exports.InnerForm = exports.ImageBase = exports.Image = exports.IconWrapper = exports.HTML = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenMedia = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.Control = exports.ContentList = exports.CardBase = exports.BrandFooter = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.Author = exports.AnimateBlock = exports.Anchor = void 0;
+exports.Paginator = exports.Select = exports.ReportFile = exports.Tag = exports.InfiniteScroll = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.RouterLink = exports.ReactPlayer = exports.OverflowScroller = exports.OutsideClick = exports.MetaInfo = exports.Media = exports.Links = exports.Link = exports.InnerForm = exports.ImageBase = exports.Image = exports.IconWrapper = exports.HTML = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenMedia = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.Control = exports.ContentList = exports.CardBase = exports.BrandFooter = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.Author = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -94,3 +94,5 @@ var ReportFile_1 = require("./ReportFile/ReportFile");
 Object.defineProperty(exports, "ReportFile", { enumerable: true, get: function () { return __importDefault(ReportFile_1).default; } });
 var Select_1 = require("./Select/Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
+var Paginator_1 = require("./Paginator/Paginator");
+Object.defineProperty(exports, "Paginator", { enumerable: true, get: function () { return __importDefault(Paginator_1).default; } });

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

@@ -28,7 +28,7 @@ export declare const blockMap: {
     "link-table-block": ({ title, items }: import("./models").LinkTableBlockProps) => JSX.Element;
     "services-block": ({ title, serviceLinkType }: import("./models").ServicesBlockProps) => JSX.Element;
     "quotes-block": ({ theme: localTheme, items, background, backgroundColor, }: import("./models").QuotesBlockProps) => JSX.Element;
-    "reports-block": ({ typeKey, empty }: import("./models").ReportsBlockProps) => JSX.Element;
+    "reports-block": ({ title, typeKey, empty }: import("./models").ReportsBlockProps) => JSX.Element;
     "form-wall-block": (props: import("./models").FormWallBlockProps) => JSX.Element;
     "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
 };

package/build/cjs/context/reportsContext/ReportsContext.d.ts

@@ -9,6 +9,7 @@ interface Select extends SelectProps {
 type ReportsData = {
     selects?: Select[];
     items: Item[];
+    itemsPerPage?: number;
 } & Pick<ReportsItemProps, 'filesOutline'>;
 export type ReportsContextProps = Record<string, ReportsData>;
 export declare const ReportsContext: React.Context<ReportsContextProps>;

package/build/cjs/icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ArrowLeftIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/build/cjs/icons/ArrowLeftIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowLeftIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const ArrowLeftIcon = (props) => (react_1.default.createElement("svg", Object.assign({ height: "12", width: "12", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", fillRule: "evenodd", d: "M8 10L4 6l4-4" })));
+exports.ArrowLeftIcon = ArrowLeftIcon;

package/build/cjs/icons/ArrowRightIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ArrowRightIcon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/build/cjs/icons/ArrowRightIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowRightIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svg_1 = require("../utils/svg");
+const ArrowRightIcon = (props) => (react_1.default.createElement("svg", Object.assign({ height: "12", width: "12", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "currentColor" }, svg_1.a11yHiddenSvgProps, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", fillRule: "evenodd", d: "M4 2l4 4-4 4" })));
+exports.ArrowRightIcon = ArrowRightIcon;

package/build/cjs/icons/index.d.ts

@@ -2,3 +2,5 @@ export * from './Chevron';
 export * from './Github';
 export * from './NavigationChevron';
 export * from './NavigationArrow';
+export * from './ArrowLeftIcon';
+export * from './ArrowRightIcon';

package/build/cjs/icons/index.js

@@ -5,3 +5,5 @@ tslib_1.__exportStar(require("./Chevron"), exports);
 tslib_1.__exportStar(require("./Github"), exports);
 tslib_1.__exportStar(require("./NavigationChevron"), exports);
 tslib_1.__exportStar(require("./NavigationArrow"), exports);
+tslib_1.__exportStar(require("./ArrowLeftIcon"), exports);
+tslib_1.__exportStar(require("./ArrowRightIcon"), exports);

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

@@ -389,6 +389,7 @@ export interface ReportsItemProps extends ReportsItem {
     filesOutline?: boolean;
 }
 export interface ReportsBlockProps {
+    title?: TitleItemBaseProps | string;
     typeKey: string;
     empty?: string;
 }

package/build/esm/blocks/Reports/Reports.css

@@ -1,5 +1,8 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-reports-block__title {
+  margin-bottom: 24px;
+}
 .pc-reports-block__select {
   margin-bottom: 32px;
 }

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

@@ -1,4 +1,4 @@
 import { ReportsBlockProps } from '../../models';
 import './Reports.css';
-export declare const ReportsBlock: ({ typeKey, empty }: ReportsBlockProps) => JSX.Element;
+export declare const ReportsBlock: ({ title, typeKey, empty }: ReportsBlockProps) => JSX.Element;
 export default ReportsBlock;

package/build/esm/blocks/Reports/Reports.js

@@ -1,13 +1,17 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
-import { Select } from '../../components';
+import { Paginator, Select, Title } from '../../components';
 import { ReportsContext } from '../../context/reportsContext';
 import { block } from '../../utils';
 import ReportsItem from './ReportsItem/ReportsItem';
 import './Reports.css';
 const b = block('reports-block');
-export const ReportsBlock = ({ typeKey, empty }) => {
+const titleColSizes = {
+    all: 12,
+};
+export const ReportsBlock = ({ title, typeKey, empty }) => {
     const data = useContext(ReportsContext);
-    const { selects, items, filesOutline } = useMemo(() => data[typeKey], [data, typeKey]);
+    const [page, setPage] = useState(1);
+    const { selects, items, itemsPerPage, filesOutline } = useMemo(() => data[typeKey], [data, typeKey]);
     const initFilters = useMemo(() => (selects === null || selects === void 0 ? void 0 : selects.reduce((acc, select) => (Object.assign(Object.assign({}, acc), { [select.name]: select.init })), {})) || {}, [selects]);
     const [localFilters, setLocalFilters] = useState(initFilters);
     const handleChange = useCallback((name, value) => setLocalFilters((prev) => (Object.assign(Object.assign({}, prev), { [name]: value }))), []);
@@ -20,8 +24,19 @@ export const ReportsBlock = ({ typeKey, empty }) => {
             return acc;
         }, false))
         : items, [items, localFilters]);
+    const paginatedItems = useMemo(() => {
+        if (!itemsPerPage)
+            return filteredItems;
+        const startIndex = (page - 1) * itemsPerPage;
+        return filteredItems.slice(startIndex, startIndex + itemsPerPage);
+    }, [filteredItems, itemsPerPage, page]);
+    const titleProps = !title || typeof title === 'string'
+        ? { text: title, textSize: 'm' }
+        : title;
     return (React.createElement("div", { className: b() },
+        title && React.createElement(Title, { className: b('title'), title: titleProps, colSizes: titleColSizes }),
         (selects === null || selects === void 0 ? void 0 : selects.length) && (React.createElement("div", { className: b('select') }, selects.map(({ name, options }) => (React.createElement(Select, { key: name, name: name, options: options, onChange: handleChange }))))),
-        filteredItems.length ? (filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, index) => (React.createElement(ReportsItem, Object.assign({ key: index }, item, { filesOutline: filesOutline }))))) : (React.createElement("div", { className: b('empty') }, empty))));
+        paginatedItems.length ? (paginatedItems.map((item, index) => (React.createElement(ReportsItem, Object.assign({ key: index }, item, { filesOutline: filesOutline }))))) : (React.createElement("div", { className: b('empty') }, empty)),
+        itemsPerPage && (React.createElement(Paginator, { page: page, itemsPerPage: itemsPerPage, totalItems: filteredItems.length, maxPages: Infinity, onPageChange: setPage }))));
 };
 export default ReportsBlock;