@cloud-ru/ds-uikit-product-modal-predefined 1.0.17 → 1.0.18-preview-424ddd29.0

package/README.md

@@ -300,6 +300,7 @@ export function ReleaseNotesVideo() {
 | `onSlideChange` | `((slide: number) => void)` | — | Действие при смене слайда |
 | `open` | `boolean` | — | Управление состоянием показан/не показан |
 | `readLaterButtonProps` | `ButtonProps` | — | Только mobile: дополнительные пропсы action-кнопки "Ознакомиться позже" (на desktop игнорируется). |
+| `snapPoint` | `SnapPoint` | `0.85` | Только mobile: фиксированная позиция bottom sheet по высоте (на desktop игнорируется). <br/> Доля вьюпорта, пиксели или viewport-единицы — см. `SnapPoint` из `@cloud-ru/ds-bottom-sheet`. |
 
 ##### Related types
 
@@ -314,6 +315,12 @@ export function ReleaseNotesVideo() {
 
 - `ReleaseNotesContentState` = `"data"` \| `"error"` \| `"noData"`
 
+### Размеры и иллюстрации
+
+На desktop карточка новости — квадрат 380×380: иллюстрация занимает правую половину целиком, текст — остаток ширины. Размер карточки фиксирован, поэтому окно одного размера во всех состояниях и не зависит ни от длины описания, ни от того, загрузились ли данные; описание, которое не помещается, прокручивается внутри карточки. На mobile карточка растёт по контенту, а прокручивается тело sheet'а целиком — размер держит сам sheet. Его позицию задаёт проп `snapPoint` — доля вьюпорта, пиксели или viewport-единицы; по умолчанию `1`, весь экран.
+
+Размеры медиа-слота задаёт раскладка, а не сам файл: на desktop это те же 380×380, на mobile — квадрат во всю ширину карточки. До загрузки слот занят скелетоном, при ошибке загрузки — заглушкой с иконкой. Изображение вписывается по `object-fit: cover`: всё, что выходит за границы слота, обрезается — оставляйте в иллюстрации запас по краям.
+
 ### Адаптивность
 
 `ReleaseNotes` — адаптивный компонент с переключением поверхности (surface-swap). Раскладку он берёт из `AdaptiveProvider` (контекст `@cloud-ru/ds-adaptive`); публичный API единый для обеих платформ:
@@ -349,7 +356,7 @@ export function ReleaseNotesVideo() {
 
 | Пропы | desktop | mobile |
 |-------|---------|--------|
-| `readLaterButtonProps` | игнорируется | используется |
+| `readLaterButtonProps`, `snapPoint` | игнорируются | используются |
 | `open`, `onClose`, `container`, `closeOnPopstate`, `contentState`, `items`, `loading`, `onReadLaterClick`, `onDataErrorRetryClick`, `onSlideChange` | используется | используется |
 
 Подробнее о модели адаптивности — **Adaptive**.

package/dist/cjs/constants.d.ts

@@ -3,6 +3,24 @@ export declare const CONTENT_STATE: {
     readonly NoData: "noData";
     readonly Error: "error";
 };
+export declare const SURFACE: {
+    readonly Modal: "modal";
+    readonly BottomSheet: "bottomSheet";
+};
+/**
+ * Дефолтная позиция bottom sheet с новостями — по макету весь вьюпорт. Фиксированная позиция вместо
+ * высоты по контенту: иначе sheet меняет размер и на переходе `loading → data`, и при переключении
+ * слайдов разной длины. Переопределяется пропом `snapPoint`.
+ */
+export declare const DEFAULT_RELEASE_NOTES_SNAP_POINT = 1;
+/** Задержка перед показом скелетона, мс. Ниже неё загрузка не успевает стать заметной. */
+export declare const SKELETON_DELAY_MS = 200;
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+export declare const MEDIA_STATUS: {
+    readonly Pending: "pending";
+    readonly Ready: "ready";
+    readonly Error: "error";
+};
 export declare const CONFIRM_TEXT_VARIANT: {
     readonly Name: "name";
     readonly Text: "text";
@@ -17,11 +35,15 @@ export declare const TEST_IDS: {
     readonly confirmCopyButton: "modal-predefined__confirm-copy-button";
     readonly releaseNotesItem: "modal-predefined__release-notes-item";
     readonly releaseNotesMedia: "modal-predefined__release-notes-media";
+    readonly releaseNotesImage: "modal-predefined__release-notes-image";
+    readonly releaseNotesMediaFallback: "modal-predefined__release-notes-media-fallback";
+    readonly releaseNotesSkeleton: "modal-predefined__release-notes-skeleton";
     readonly releaseNotesVideo: "modal-predefined__release-notes-video";
     readonly releaseNotesError: "modal-predefined__release-notes-error";
     readonly releaseNotesNoData: "modal-predefined__release-notes-no-data";
     readonly releaseNotesRetryButton: "modal-predefined__release-notes-retry-button";
     readonly releaseNotesReadLaterButton: "modal-predefined__release-notes-read-later-button";
+    readonly releaseNotesPaginationSlider: "modal-predefined__release-notes-pagination-slider";
     readonly releaseNotesPrevButton: "modal-predefined__release-notes-prev-button";
     readonly releaseNotesNextButton: "modal-predefined__release-notes-next-button";
 };

package/dist/cjs/constants.js

@@ -1,11 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_IDS = exports.CONFIRM_TEXT_VARIANT = exports.CONTENT_STATE = void 0;
+exports.TEST_IDS = exports.CONFIRM_TEXT_VARIANT = exports.MEDIA_STATUS = exports.SKELETON_DELAY_MS = exports.DEFAULT_RELEASE_NOTES_SNAP_POINT = exports.SURFACE = exports.CONTENT_STATE = void 0;
 exports.CONTENT_STATE = {
     Data: 'data',
     NoData: 'noData',
     Error: 'error',
 };
+exports.SURFACE = {
+    Modal: 'modal',
+    BottomSheet: 'bottomSheet',
+};
+/**
+ * Дефолтная позиция bottom sheet с новостями — по макету весь вьюпорт. Фиксированная позиция вместо
+ * высоты по контенту: иначе sheet меняет размер и на переходе `loading → data`, и при переключении
+ * слайдов разной длины. Переопределяется пропом `snapPoint`.
+ */
+exports.DEFAULT_RELEASE_NOTES_SNAP_POINT = 1;
+/** Задержка перед показом скелетона, мс. Ниже неё загрузка не успевает стать заметной. */
+exports.SKELETON_DELAY_MS = 200;
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+exports.MEDIA_STATUS = {
+    Pending: 'pending',
+    Ready: 'ready',
+    Error: 'error',
+};
 exports.CONFIRM_TEXT_VARIANT = {
     Name: 'name',
     Text: 'text',
@@ -20,11 +38,15 @@ exports.TEST_IDS = {
     confirmCopyButton: 'modal-predefined__confirm-copy-button',
     releaseNotesItem: 'modal-predefined__release-notes-item',
     releaseNotesMedia: 'modal-predefined__release-notes-media',
+    releaseNotesImage: 'modal-predefined__release-notes-image',
+    releaseNotesMediaFallback: 'modal-predefined__release-notes-media-fallback',
+    releaseNotesSkeleton: 'modal-predefined__release-notes-skeleton',
     releaseNotesVideo: 'modal-predefined__release-notes-video',
     releaseNotesError: 'modal-predefined__release-notes-error',
     releaseNotesNoData: 'modal-predefined__release-notes-no-data',
     releaseNotesRetryButton: 'modal-predefined__release-notes-retry-button',
     releaseNotesReadLaterButton: 'modal-predefined__release-notes-read-later-button',
+    releaseNotesPaginationSlider: 'modal-predefined__release-notes-pagination-slider',
     releaseNotesPrevButton: 'modal-predefined__release-notes-prev-button',
     releaseNotesNextButton: 'modal-predefined__release-notes-next-button',
 };

package/dist/cjs/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.js

@@ -17,5 +17,5 @@ function DesktopReleaseNotes({ open, onClose, closeOnPopstate, contentState = co
     const { t } = locale_1.modalPredefinedLocale.useTranslations();
     const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = (0, hooks_1.useReleaseNotesNavigation)({ onClose, onReadLaterClick, onSlideChange });
     const shouldShowFooter = contentState === constants_1.CONTENT_STATE.Data && (loading || items.length > 0);
-    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('releaseNotes.title') }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsx)(ReleaseNotesContent_1.ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'modal', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }) }), shouldShowFooter && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsx)(ReleaseNotesFooter_1.ReleaseNotesFooter, { surface: 'modal', total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, counterLabel: t('releaseNotes.counter', { page: readablePageNumber, total: items.length }), readLaterLabel: t('releaseNotes.readLater'), onReadLaterClick: handleReadLaterClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('releaseNotes.title') }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsx)(ReleaseNotesContent_1.ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'modal', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }) }), shouldShowFooter && ((0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsx)(ReleaseNotesFooter_1.ReleaseNotesFooter, { surface: 'modal', loading: loading, total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, readLaterLabel: t('releaseNotes.readLater'), onPageChange: setPage, onReadLaterClick: handleReadLaterClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length) }) }))] }));
 }

package/dist/cjs/helperComponents/MobileReleaseNotes/MobileReleaseNotes.d.ts

@@ -1,2 +1,2 @@
 import { ReleaseNotesProps } from '../../types';
-export declare function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, ...rest }: ReleaseNotesProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, snapPoint, ...rest }: ReleaseNotesProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileReleaseNotes/MobileReleaseNotes.js

@@ -9,7 +9,7 @@ const hooks_1 = require("../../hooks");
 const locale_1 = require("../../locale");
 const ReleaseNotesContent_1 = require("../ReleaseNotesContent");
 const ReleaseNotesFooter_1 = require("../ReleaseNotesFooter");
-function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState = constants_1.CONTENT_STATE.Data, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, ...rest }) {
+function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState = constants_1.CONTENT_STATE.Data, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, readLaterButtonProps, snapPoint = constants_1.DEFAULT_RELEASE_NOTES_SNAP_POINT, ...rest }) {
     const { t } = locale_1.modalPredefinedLocale.useTranslations();
     const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = (0, hooks_1.useReleaseNotesNavigation)({ onClose, onReadLaterClick, onSlideChange });
     const { onClick: onReadLaterButtonClick, ...readLaterButtonRest } = readLaterButtonProps ?? {};
@@ -18,9 +18,5 @@ function MobileReleaseNotes({ open, onClose, closeOnPopstate, contentState = con
         onReadLaterButtonClick?.(event);
         handleReadLaterClick();
     };
-    return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet
-    // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
-    , { 
-        // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
-        withDividers: false, open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, title: t('releaseNotes.title'), content: (0, jsx_runtime_1.jsx)(ReleaseNotesContent_1.ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'bottomSheet', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }), footer: shouldShowFooter ? ((0, jsx_runtime_1.jsx)(ReleaseNotesFooter_1.ReleaseNotesFooter, { surface: 'bottomSheet', total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, counterLabel: t('releaseNotes.counter', { page: readablePageNumber, total: items.length }), readLaterLabel: t('releaseNotes.readLater'), onReadLaterClick: handleReadLaterButtonClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length), readLaterButtonProps: readLaterButtonRest })) : undefined, "data-content-state": contentState, "data-surface": 'bottomSheet', ...(0, utils_1.extractSupportProps)(rest) }));
+    return ((0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, snapPoints: [snapPoint], title: t('releaseNotes.title'), content: (0, jsx_runtime_1.jsx)(ReleaseNotesContent_1.ReleaseNotesContent, { contentState: contentState, items: items, loading: loading, pageIndex: pageIndex, surface: 'bottomSheet', noDataTitle: t('releaseNotes.noDataTitle'), noDataDescription: t('releaseNotes.noDataDescription'), errorTitle: t('releaseNotes.errorTitle'), errorDescription: t('releaseNotes.errorDescription'), retryLabel: t('releaseNotes.retry'), onPageChange: setPage, onDataErrorRetryClick: onDataErrorRetryClick }), footer: shouldShowFooter ? ((0, jsx_runtime_1.jsx)(ReleaseNotesFooter_1.ReleaseNotesFooter, { surface: 'bottomSheet', loading: loading, total: items.length, pageIndex: pageIndex, readablePageNumber: readablePageNumber, readLaterLabel: t('releaseNotes.readLater'), onPageChange: setPage, onReadLaterClick: handleReadLaterButtonClick, onPrevPageClick: handlePrevPageClick, onNextPageClick: () => handleNextPageClick(items.length), readLaterButtonProps: readLaterButtonRest })) : undefined, "data-content-state": contentState, "data-surface": 'bottomSheet', ...(0, utils_1.extractSupportProps)(rest) }));
 }

package/dist/cjs/helperComponents/NoteItem/NoteItem.d.ts

@@ -1,6 +1,6 @@
-import { NoteItemProps } from '../../types';
+import { NoteItemProps, Surface } from '../../types';
 type NoteItemComponentProps = NoteItemProps & {
-    surface?: 'modal' | 'bottomSheet';
+    surface?: Surface;
 };
 export declare function NoteItem({ title, description, image, video, surface }: NoteItemComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/NoteItem/NoteItem.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoteItem = NoteItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const markdown_1 = require("@cloud-ru/ds-markdown");
 const scroll_1 = require("@cloud-ru/ds-scroll");
 const skeleton_1 = require("@cloud-ru/ds-skeleton");
@@ -12,9 +13,34 @@ const typography_1 = require("@cloud-ru/ds-typography");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function NoteItem({ title, description, image, video, surface = 'modal' }) {
-    const [isVideoReady, setIsVideoReady] = (0, react_1.useState)(false);
-    const [hasVideoError, setHasVideoError] = (0, react_1.useState)(false);
-    const shouldShowVideo = Boolean(video && !hasVideoError);
-    return ((0, jsx_runtime_1.jsxs)("article", { className: styles_module_scss_1.default.root, "data-surface": surface, "data-test-id": constants_1.TEST_IDS.releaseNotesItem, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-test-id": constants_1.TEST_IDS.releaseNotesMedia, children: [shouldShowVideo && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { className: styles_module_scss_1.default.video, src: video, muted: true, loop: true, playsInline: true, autoPlay: true, onLoadedData: () => setIsVideoReady(true), onError: () => setHasVideoError(true), "data-test-id": constants_1.TEST_IDS.releaseNotesVideo }), !isVideoReady && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.videoSkeleton, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, width: '100%', height: '100%' }) }))] })), !shouldShowVideo && (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: image.src, alt: image.alt })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'headline', size: 's', children: title }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.description, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Leave, children: (0, jsx_runtime_1.jsx)(markdown_1.Markdown, { value: description }) })] })] }));
+/** Размер иконки-заглушки в медиа-слоте, когда иллюстрация не загрузилась. */
+const FALLBACK_ICON_SIZE = 48;
+/**
+ * Медиа-слот новости: иллюстрация или видео. Размеры слота задаёт разметка, а не intrinsic-размер
+ * файла, поэтому загрузка не меняет раскладку карточки. До готовности файла слот занят скелетоном,
+ * при ошибке загрузки — заглушкой с иконкой.
+ */
+function NoteItemMedia({ image, video }) {
+    const [imageStatus, setImageStatus] = (0, react_1.useState)(constants_1.MEDIA_STATUS.Pending);
+    const [videoStatus, setVideoStatus] = (0, react_1.useState)(constants_1.MEDIA_STATUS.Pending);
+    // При ошибке видео отображается статичная иллюстрация, и состояние слота определяет уже она.
+    const withVideo = Boolean(video) && videoStatus !== constants_1.MEDIA_STATUS.Error;
+    const status = withVideo ? videoStatus : imageStatus;
+    // Изображение из кеша может завершить загрузку до подписки на `onLoad` — состояние снимается с узла.
+    const handleImageRef = (0, react_1.useCallback)((node) => {
+        if (!node?.complete || !node.getAttribute('src')) {
+            return;
+        }
+        setImageStatus(node.naturalWidth > 0 ? constants_1.MEDIA_STATUS.Ready : constants_1.MEDIA_STATUS.Error);
+    }, []);
+    const handleImageLoad = (0, react_1.useCallback)(() => setImageStatus(constants_1.MEDIA_STATUS.Ready), []);
+    const handleImageError = (0, react_1.useCallback)(() => setImageStatus(constants_1.MEDIA_STATUS.Error), []);
+    const handleVideoLoad = (0, react_1.useCallback)(() => setVideoStatus(constants_1.MEDIA_STATUS.Ready), []);
+    const handleVideoError = (0, react_1.useCallback)(() => setVideoStatus(constants_1.MEDIA_STATUS.Error), []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-status": status, "data-test-id": constants_1.TEST_IDS.releaseNotesMedia, children: [withVideo ? ((0, jsx_runtime_1.jsx)("video", { className: styles_module_scss_1.default.file, src: video, muted: true, loop: true, playsInline: true, autoPlay: true, "aria-hidden": true, onLoadedData: handleVideoLoad, onError: handleVideoError, "data-test-id": constants_1.TEST_IDS.releaseNotesVideo })) : (
+            // При ошибке `<img>` не рендерится: иначе поверх заглушки остаётся превью браузера с alt-текстом.
+            status !== constants_1.MEDIA_STATUS.Error && ((0, jsx_runtime_1.jsx)("img", { ref: handleImageRef, className: styles_module_scss_1.default.file, src: image.src, alt: image.alt, onLoad: handleImageLoad, onError: handleImageError, "data-test-id": constants_1.TEST_IDS.releaseNotesImage }))), status === constants_1.MEDIA_STATUS.Pending && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.mediaOverlay, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, width: '100%', height: '100%' }) })), status === constants_1.MEDIA_STATUS.Error && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.mediaOverlay, role: 'img', "aria-label": image.alt, "data-test-id": constants_1.TEST_IDS.releaseNotesMediaFallback, children: (0, jsx_runtime_1.jsx)(system_1.ImageSVG, { className: styles_module_scss_1.default.mediaFallbackIcon, size: FALLBACK_ICON_SIZE }) }))] }));
+}
+function NoteItem({ title, description, image, video, surface = constants_1.SURFACE.Modal }) {
+    return ((0, jsx_runtime_1.jsxs)("article", { className: styles_module_scss_1.default.root, "data-surface": surface, "data-test-id": constants_1.TEST_IDS.releaseNotesItem, children: [(0, jsx_runtime_1.jsx)(NoteItemMedia, { image: image, video: video }, `${video ?? ''}|${image.src}`), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'headline', size: 's', children: title }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.description, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Leave, children: (0, jsx_runtime_1.jsx)(markdown_1.Markdown, { value: description }) })] })] }));
 }

package/dist/cjs/helperComponents/NoteItem/NoteItemSkeleton.d.ts

@@ -0,0 +1,12 @@
+import { Surface } from '../../types';
+export type NoteItemSkeletonProps = {
+    /** Поверхность отображения */
+    surface?: Surface;
+    /** Показывать ли сами плейсхолдеры. При `false` карточка занимает место, но остаётся пустой */
+    loading?: boolean;
+};
+/**
+ * Скелетон карточки новости: те же классы сетки и тот же медиа-слот, что и у `NoteItem`,
+ * поэтому переход `loading → data` не меняет геометрию.
+ */
+export declare function NoteItemSkeleton({ surface, loading }: NoteItemSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/NoteItem/NoteItemSkeleton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoteItemSkeleton = NoteItemSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Строки скелетона текста: заголовок и абзацы описания — по структуре типовой новости. */
+const TITLE_LINES = 1;
+const PARAGRAPH_LINES = [2, 3, 3];
+/**
+ * Скелетон карточки новости: те же классы сетки и тот же медиа-слот, что и у `NoteItem`,
+ * поэтому переход `loading → data` не меняет геометрию.
+ */
+function NoteItemSkeleton({ surface = constants_1.SURFACE.Modal, loading = true }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-surface": surface, "data-loading": loading, "aria-hidden": true, "data-test-id": constants_1.TEST_IDS.releaseNotesSkeleton, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.media, "data-test-id": constants_1.TEST_IDS.releaseNotesMedia, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: loading, width: '100%', height: '100%' }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: loading, lines: TITLE_LINES, variant: 'headline', size: 's' }), PARAGRAPH_LINES.map((lines, index) => ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: loading, lines: lines }, index)))] })] }));
+}

package/dist/cjs/helperComponents/NoteItem/index.d.ts

@@ -1 +1,2 @@
 export * from './NoteItem';
+export * from './NoteItemSkeleton';

package/dist/cjs/helperComponents/NoteItem/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./NoteItem"), exports);
+__exportStar(require("./NoteItemSkeleton"), exports);

package/dist/cjs/helperComponents/NoteItem/styles.module.css

@@ -1,25 +1,41 @@
 .root{
   display:grid;
-  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
-  -moz-column-gap:var(--sn-primitive-dimension-24, 24px);
-       column-gap:var(--sn-primitive-dimension-24, 24px);
-  min-height:calc(5 * var(--sn-primitive-dimension-64, 64px));
+  grid-template-columns:minmax(0, 1fr) calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  height:calc(6 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
+  animation:appear 0.2s ease-out;
+}
+@keyframes appear{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
 }
 .root[data-surface=bottomSheet]{
   grid-template-columns:minmax(0, 1fr);
   row-gap:var(--sn-primitive-dimension-16, 16px);
-  min-height:0;
+  height:auto;
 }
 
 .media{
   position:relative;
   overflow:hidden;
   min-width:0;
-  border-radius:var(--sn-primitive-dimension-16, 16px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.media[data-status=error]{
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.root[data-surface=bottomSheet] .media{
+  aspect-ratio:1;
 }
 
-.image,
-.video{
+.file{
   display:block;
   width:100%;
   height:100%;
@@ -27,9 +43,16 @@
      object-fit:cover;
 }
 
-.videoSkeleton{
+.mediaOverlay{
   position:absolute;
   inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.mediaFallbackIcon{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
 }
 
 .content{
@@ -37,9 +60,11 @@
   flex-direction:column;
   row-gap:var(--sn-primitive-dimension-12, 12px);
   min-width:0;
+  min-height:0;
 }
 
 .description{
+  flex:1;
   min-height:0;
 }
 
@@ -50,4 +75,10 @@
 
 .root[data-surface=modal] .media{
   order:2;
+}
+
+@media (prefers-reduced-motion: reduce){
+  .root{
+    animation:none;
+  }
 }

package/dist/cjs/helperComponents/ReleaseNotesContent/ReleaseNotesContent.d.ts

@@ -1,4 +1,4 @@
-import { NoteItemProps, ReleaseNotesContentState } from '../../types';
+import { NoteItemProps, ReleaseNotesContentState, Surface } from '../../types';
 export type ReleaseNotesContentProps = {
     /** Визуальное состояние */
     contentState: ReleaseNotesContentState;
@@ -9,7 +9,7 @@ export type ReleaseNotesContentProps = {
     /** Текущая страница, zero-based */
     pageIndex: number;
     /** Поверхность */
-    surface: 'modal' | 'bottomSheet';
+    surface: Surface;
     /** Заголовок no-data */
     noDataTitle: string;
     /** Описание no-data */

package/dist/cjs/helperComponents/ReleaseNotesContent/ReleaseNotesContent.js

@@ -9,22 +9,24 @@ const button_1 = require("@cloud-ru/ds-button");
 const carousel_1 = require("@cloud-ru/ds-carousel");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const info_block_1 = require("@cloud-ru/ds-info-block");
-const skeleton_1 = require("@cloud-ru/ds-skeleton");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
 const NoteItem_1 = require("../NoteItem");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function ReleaseNotesContent({ contentState, items, loading, pageIndex, surface, noDataTitle, noDataDescription, errorTitle, errorDescription, retryLabel, onPageChange, onDataErrorRetryClick, }) {
     const total = items.length;
     const hasItems = total > 0;
-    if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.loading, "data-surface": surface, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: true, width: '100%', height: '100%', borderRadius: 'var(--border-radius-l)' }) }));
-    }
-    if (contentState === constants_1.CONTENT_STATE.Error) {
+    const showSkeleton = (0, hooks_1.useDelayedLoading)(loading);
+    if (!loading && contentState === constants_1.CONTENT_STATE.Error) {
         return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.stateWrapper, "data-surface": surface, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { className: styles_module_scss_1.default.state, size: 'l', title: errorTitle, content: errorDescription, icon: { icon: system_1.CrossSVG, appearance: 'neutral', background: true }, "data-test-id": constants_1.TEST_IDS.releaseNotesError, footer: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'filled', appearance: 'neutral', size: 'l', label: retryLabel, onClick: onDataErrorRetryClick, "data-test-id": constants_1.TEST_IDS.releaseNotesRetryButton }) }) }));
     }
-    if (contentState === constants_1.CONTENT_STATE.NoData || !hasItems) {
+    if (!loading && (contentState === constants_1.CONTENT_STATE.NoData || !hasItems)) {
         return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.stateWrapper, "data-surface": surface, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { className: styles_module_scss_1.default.state, size: 'l', title: noDataTitle, content: noDataDescription, "data-test-id": constants_1.TEST_IDS.releaseNotesNoData }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, styles_module_scss_1.default[surface]), children: (0, jsx_runtime_1.jsx)(carousel_1.Carousel, { arrows: false, pagination: false, swipe: true, state: { page: pageIndex, onChange: onPageChange }, className: styles_module_scss_1.default.carousel, children: items.map(item => ((0, jsx_runtime_1.jsx)(NoteItem_1.NoteItem, { ...item, surface: surface }, `${item.title}-${item.image.src}`))) }) }));
+    // Скелетон отрисован слайдом той же карусели: у неё есть собственные отступы, и отдельная
+    // обёртка для состояния загрузки дала бы другую высоту на переходе `loading → data`.
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, styles_module_scss_1.default[surface]), children: (0, jsx_runtime_1.jsx)(carousel_1.Carousel, { arrows: false, pagination: false, swipe: !loading, state: { page: pageIndex, onChange: onPageChange }, className: styles_module_scss_1.default.carousel, children: loading
+                ? [(0, jsx_runtime_1.jsx)(NoteItem_1.NoteItemSkeleton, { surface: surface, loading: showSkeleton }, 'skeleton')]
+                : items.map(item => (0, jsx_runtime_1.jsx)(NoteItem_1.NoteItem, { ...item, surface: surface }, `${item.title}-${item.image.src}`)) }) }));
 }

package/dist/cjs/helperComponents/ReleaseNotesContent/styles.module.css

@@ -33,8 +33,4 @@
 .state{
   width:100%;
   max-width:calc(9 * var(--sn-primitive-dimension-64, 64px) + 3 * var(--sn-primitive-dimension-16, 16px));
-}
-
-.loading{
-  height:calc(5 * var(--sn-primitive-dimension-64, 64px));
 }

package/dist/cjs/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.d.ts

@@ -1,16 +1,19 @@
 import { ButtonProps } from '@cloud-ru/ds-button';
 import { MouseEvent } from 'react';
+import { Surface } from '../../types';
 export type ReleaseNotesFooterProps = {
     /** Поверхность отображения */
-    surface: 'modal' | 'bottomSheet';
+    surface: Surface;
     /** Количество страниц */
     total: number;
+    /** Состояние загрузки: количество страниц ещё неизвестно */
+    loading?: boolean;
     /** Текущая страница, zero-based */
     pageIndex: number;
     /** Номер страницы для отображения */
     readablePageNumber: number;
-    /** Текст счётчика «1 из N» (используется на bottomSheet) */
-    counterLabel: string;
+    /** Переход на страницу по клику в слайдере (используется на modal) */
+    onPageChange(pageIndex: number): void;
     /** Label кнопки «Ознакомиться позже» */
     readLaterLabel: string;
     /** Действие «Ознакомиться позже» */
@@ -22,4 +25,4 @@ export type ReleaseNotesFooterProps = {
     /** Дополнительные пропсы кнопки «Ознакомиться позже» */
     readLaterButtonProps?: Partial<ButtonProps>;
 };
-export declare function ReleaseNotesFooter({ surface, total, pageIndex, readablePageNumber, counterLabel, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, readLaterButtonProps, }: ReleaseNotesFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReleaseNotesFooter({ surface, total, loading, pageIndex, readablePageNumber, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, onPageChange, readLaterButtonProps, }: ReleaseNotesFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.js

@@ -7,11 +7,16 @@ exports.ReleaseNotesFooter = ReleaseNotesFooter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@cloud-ru/ds-button");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const pagination_1 = require("@cloud-ru/ds-pagination");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function ReleaseNotesFooter({ surface, total, pageIndex, readablePageNumber, counterLabel, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, readLaterButtonProps, }) {
-    const hasPagination = total > 1;
-    const isModal = surface === 'modal';
+function ReleaseNotesFooter({ surface, total, loading, pageIndex, readablePageNumber, readLaterLabel, onReadLaterClick, onPrevPageClick, onNextPageClick, onPageChange, readLaterButtonProps, }) {
+    // Пока новости не загрузились, страниц ещё нет, но место под навигацию занято: иначе кнопки
+    // появляются рывком поверх уже отрисованного контента.
+    const hasPagination = loading || total > 1;
+    const isModal = surface === constants_1.SURFACE.Modal;
     const buttonSize = isModal ? 'm' : 'l';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-surface": surface, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: buttonSize, label: readLaterLabel, "data-test-id": constants_1.TEST_IDS.releaseNotesReadLaterButton, ...readLaterButtonProps, onClick: onReadLaterClick }), hasPagination && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.controls, children: [!isModal && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.counter, children: counterLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), disabled: pageIndex === 0, onClick: onPrevPageClick, "data-test-id": constants_1.TEST_IDS.releaseNotesPrevButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), disabled: readablePageNumber === total, onClick: onNextPageClick, "data-test-id": constants_1.TEST_IDS.releaseNotesNextButton })] }))] }));
+    const handleSliderChange = (page) => onPageChange(page - 1);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-surface": surface, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', size: buttonSize, label: readLaterLabel, "data-test-id": constants_1.TEST_IDS.releaseNotesReadLaterButton, ...readLaterButtonProps, onClick: onReadLaterClick }), isModal && hasPagination && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.slider, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { loading: loading, className: styles_module_scss_1.default.sliderSkeleton, children: (0, jsx_runtime_1.jsx)(pagination_1.PaginationSlider, { size: pagination_1.PAGINATION_SLIDER_SIZE.Xs, total: total, page: readablePageNumber, onChange: handleSliderChange, "data-test-id": constants_1.TEST_IDS.releaseNotesPaginationSlider }) }) })), hasPagination && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.controls, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), disabled: loading || pageIndex === 0, onClick: onPrevPageClick, "data-test-id": constants_1.TEST_IDS.releaseNotesPrevButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'outline', appearance: 'neutral', size: buttonSize, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), disabled: loading || readablePageNumber === total, onClick: onNextPageClick, "data-test-id": constants_1.TEST_IDS.releaseNotesNextButton })] }))] }));
 }

package/dist/cjs/helperComponents/ReleaseNotesFooter/styles.module.css

@@ -15,13 +15,14 @@
   align-items:center;
 }
 
-.counter{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
-  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
-  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
-  white-space:nowrap;
+.slider{
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%);
+}
+
+.sliderSkeleton{
+  width:calc(3 * var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-primitive-dimension-16, 16px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
 }

package/dist/cjs/hooks.d.ts

@@ -23,4 +23,10 @@ export declare function useReleaseNotesNavigation({ onClose, onReadLaterClick, o
     handleNextPageClick: (totalPages: number) => void;
     handlePrevPageClick: () => void;
 };
+/**
+ * Возвращает `true`, только если загрузка длится дольше `delay`. Ответ из кеша приходит за считаные
+ * кадры, и скелетон в таком сценарии успевает мигнуть — подмена читается как рывок, хотя ждать
+ * было нечего.
+ */
+export declare function useDelayedLoading(loading?: boolean, delay?: number): boolean;
 export {};

package/dist/cjs/hooks.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTextFieldValidation = useTextFieldValidation;
 exports.useReleaseNotesNavigation = useReleaseNotesNavigation;
+exports.useDelayedLoading = useDelayedLoading;
 const react_1 = require("react");
+const constants_1 = require("./constants");
 function useTextFieldValidation({ target, errorText }) {
     const [value, setValue] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)('');
@@ -57,3 +59,20 @@ function useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange })
         handlePrevPageClick,
     };
 }
+/**
+ * Возвращает `true`, только если загрузка длится дольше `delay`. Ответ из кеша приходит за считаные
+ * кадры, и скелетон в таком сценарии успевает мигнуть — подмена читается как рывок, хотя ждать
+ * было нечего.
+ */
+function useDelayedLoading(loading, delay = constants_1.SKELETON_DELAY_MS) {
+    const [delayPassed, setDelayPassed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!loading) {
+            setDelayPassed(false);
+            return;
+        }
+        const timer = setTimeout(() => setDelayPassed(true), delay);
+        return () => clearTimeout(timer);
+    }, [loading, delay]);
+    return Boolean(loading) && delayPassed;
+}

package/dist/cjs/locale/index.d.ts

@@ -25,7 +25,6 @@ declare const MODAL_PREDEFINED_MESSAGES: {
         readonly releaseNotes: {
             readonly title: "What is new";
             readonly readLater: "Read later";
-            readonly counter: "{{page}} of {{total}}";
             readonly noDataTitle: "No news yet";
             readonly noDataDescription: "Platform news will appear here soon";
             readonly errorTitle: "Could not get data";
@@ -59,7 +58,6 @@ declare const MODAL_PREDEFINED_MESSAGES: {
         readonly releaseNotes: {
             readonly title: "Что нового";
             readonly readLater: "Ознакомиться позже";
-            readonly counter: "{{page}} из {{total}}";
             readonly noDataTitle: "Новостей пока нет";
             readonly noDataDescription: "Скоро здесь появятся новости платформы";
             readonly errorTitle: "Не удалось получить данные";
@@ -97,7 +95,6 @@ export declare const modalPredefinedLocale: import("@cloud-ru/ds-locale").Define
         readonly releaseNotes: {
             readonly title: "What is new";
             readonly readLater: "Read later";
-            readonly counter: "{{page}} of {{total}}";
             readonly noDataTitle: "No news yet";
             readonly noDataDescription: "Platform news will appear here soon";
             readonly errorTitle: "Could not get data";
@@ -131,7 +128,6 @@ export declare const modalPredefinedLocale: import("@cloud-ru/ds-locale").Define
         readonly releaseNotes: {
             readonly title: "Что нового";
             readonly readLater: "Ознакомиться позже";
-            readonly counter: "{{page}} из {{total}}";
             readonly noDataTitle: "Новостей пока нет";
             readonly noDataDescription: "Скоро здесь появятся новости платформы";
             readonly errorTitle: "Не удалось получить данные";

package/dist/cjs/locale/index.js

@@ -29,7 +29,6 @@ const MODAL_PREDEFINED_MESSAGES = (0, locale_1.defineMessages)({
         releaseNotes: {
             title: 'What is new',
             readLater: 'Read later',
-            counter: '{{page}} of {{total}}',
             noDataTitle: 'No news yet',
             noDataDescription: 'Platform news will appear here soon',
             errorTitle: 'Could not get data',
@@ -63,7 +62,6 @@ const MODAL_PREDEFINED_MESSAGES = (0, locale_1.defineMessages)({
         releaseNotes: {
             title: 'Что нового',
             readLater: 'Ознакомиться позже',
-            counter: '{{page}} из {{total}}',
             noDataTitle: 'Новостей пока нет',
             noDataDescription: 'Скоро здесь появятся новости платформы',
             errorTitle: 'Не удалось получить данные',