@cloud-ru/ds-uikit-product-modal-predefined 1.0.16 → 1.0.18-preview-177d5565.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.17 (2026-09-03)
+
+**Note:** Version bump only for package @ds/uikit-product-modal-predefined
+
 ## 1.0.16 (2026-09-03)
 
 **Note:** Version bump only for package @ds/uikit-product-modal-predefined

package/README.md

@@ -314,6 +314,10 @@ export function ReleaseNotesVideo() {
 
 - `ReleaseNotesContentState` = `"data"` \| `"error"` \| `"noData"`
 
+### Иллюстрации
+
+Размеры медиа-слота задаёт раскладка, а не сам файл: на desktop высота слота равна высоте текстовой колонки, на mobile слот сохраняет соотношение 16:10. До загрузки слот занят скелетоном, при ошибке загрузки — заглушкой с иконкой, поэтому геометрия окна не меняется. Изображение вписывается по `object-fit: cover`: всё, что выходит за границы слота, обрезается — оставляйте в иллюстрации запас по краям.
+
 ### Адаптивность
 
 `ReleaseNotes` — адаптивный компонент с переключением поверхности (surface-swap). Раскладку он берёт из `AdaptiveProvider` (контекст `@cloud-ru/ds-adaptive`); публичный API единый для обеих платформ:

package/dist/cjs/constants.d.ts

@@ -3,6 +3,16 @@ export declare const CONTENT_STATE: {
     readonly NoData: "noData";
     readonly Error: "error";
 };
+export declare const SURFACE: {
+    readonly Modal: "modal";
+    readonly BottomSheet: "bottomSheet";
+};
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+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,6 +27,9 @@ 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";

package/dist/cjs/constants.js

@@ -1,11 +1,21 @@
 "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.SURFACE = exports.CONTENT_STATE = void 0;
 exports.CONTENT_STATE = {
     Data: 'data',
     NoData: 'noData',
     Error: 'error',
 };
+exports.SURFACE = {
+    Modal: 'modal',
+    BottomSheet: 'bottomSheet',
+};
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+exports.MEDIA_STATUS = {
+    Pending: 'pending',
+    Ready: 'ready',
+    Error: 'error',
+};
 exports.CONFIRM_TEXT_VARIANT = {
     Name: 'name',
     Text: 'text',
@@ -20,6 +30,9 @@ 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',

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,10 @@
+import { Surface } from '../../types';
+export type NoteItemSkeletonProps = {
+    /** Поверхность отображения */
+    surface?: Surface;
+};
+/**
+ * Скелетон карточки новости: те же классы сетки и тот же медиа-слот, что и у `NoteItem`,
+ * поэтому переход `loading → data` не меняет геометрию.
+ */
+export declare function NoteItemSkeleton({ surface }: 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 }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-surface": surface, "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: true, 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: true, lines: TITLE_LINES, variant: 'headline', size: 's' }), PARAGRAPH_LINES.map((lines, index) => ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { loading: true, 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

@@ -18,8 +18,15 @@
   border-radius:var(--sn-primitive-dimension-16, 16px);
 }
 
-.image,
-.video{
+.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:16/10;
+}
+
+.file{
   display:block;
   width:100%;
   height:100%;
@@ -27,9 +34,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{

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,7 +9,6 @@ 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 NoteItem_1 = require("../NoteItem");
@@ -18,7 +17,7 @@ function ReleaseNotesContent({ contentState, items, loading, pageIndex, surface,
     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)' }) }));
+        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)(NoteItem_1.NoteItemSkeleton, { surface: surface }) }));
     }
     if (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 }) }) }));

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,8 +1,9 @@
 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;
     /** Текущая страница, zero-based */

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

@@ -11,7 +11,7 @@ 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';
+    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 })] }))] }));
 }

package/dist/cjs/style.css

@@ -94,8 +94,15 @@
   border-radius:var(--sn-primitive-dimension-16, 16px);
 }
 
-.image,
-.video{
+.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:16/10;
+}
+
+.file{
   display:block;
   width:100%;
   height:100%;
@@ -103,9 +110,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{
@@ -163,10 +177,6 @@
   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));
-}
 .root{
   position:relative;
   display:flex;

package/dist/cjs/types.d.ts

@@ -2,8 +2,11 @@ import { ButtonProps } from '@cloud-ru/ds-button';
 import { ModalCustomProps } from '@cloud-ru/ds-modal';
 import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
 import { ReactNode } from 'react';
-import { CONFIRM_TEXT_VARIANT, CONTENT_STATE } from './constants';
+import { CONFIRM_TEXT_VARIANT, CONTENT_STATE, MEDIA_STATUS, SURFACE } from './constants';
 export type ReleaseNotesContentState = ValueOf<typeof CONTENT_STATE>;
+/** Поверхность отображения release notes: модальное окно (desktop) или bottom sheet (mobile). */
+export type Surface = ValueOf<typeof SURFACE>;
+export type MediaStatus = ValueOf<typeof MEDIA_STATUS>;
 export type ConfirmTextVariant = ValueOf<typeof CONFIRM_TEXT_VARIANT>;
 export type NoteItemProps = {
     /** Заголовок новости */

package/dist/esm/constants.d.ts

@@ -3,6 +3,16 @@ export declare const CONTENT_STATE: {
     readonly NoData: "noData";
     readonly Error: "error";
 };
+export declare const SURFACE: {
+    readonly Modal: "modal";
+    readonly BottomSheet: "bottomSheet";
+};
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+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,6 +27,9 @@ 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";

package/dist/esm/constants.js

@@ -3,6 +3,16 @@ export const CONTENT_STATE = {
     NoData: 'noData',
     Error: 'error',
 };
+export const SURFACE = {
+    Modal: 'modal',
+    BottomSheet: 'bottomSheet',
+};
+/** Состояние загрузки иллюстрации/видео в карточке новости. */
+export const MEDIA_STATUS = {
+    Pending: 'pending',
+    Ready: 'ready',
+    Error: 'error',
+};
 export const CONFIRM_TEXT_VARIANT = {
     Name: 'name',
     Text: 'text',
@@ -17,6 +27,9 @@ export const 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',

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

@@ -1,6 +1,6 @@
-import { NoteItemProps } from '../../types.js';
+import { NoteItemProps, Surface } from '../../types.js';
 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/esm/helperComponents/NoteItem/NoteItem.js

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

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, SkeletonText } from '@cloud-ru/ds-skeleton';
+import { SURFACE, TEST_IDS } from '../../constants.js';
+import styles from './styles.module.css';
+/** Строки скелетона текста: заголовок и абзацы описания — по структуре типовой новости. */
+const TITLE_LINES = 1;
+const PARAGRAPH_LINES = [2, 3, 3];
+/**
+ * Скелетон карточки новости: те же классы сетки и тот же медиа-слот, что и у `NoteItem`,
+ * поэтому переход `loading → data` не меняет геометрию.
+ */
+export function NoteItemSkeleton({ surface = SURFACE.Modal }) {
+    return (_jsxs("div", { className: styles.root, "data-surface": surface, "aria-hidden": true, "data-test-id": TEST_IDS.releaseNotesSkeleton, children: [_jsx("div", { className: styles.media, "data-test-id": TEST_IDS.releaseNotesMedia, children: _jsx(Skeleton, { loading: true, width: '100%', height: '100%' }) }), _jsxs("div", { className: styles.content, children: [_jsx(SkeletonText, { loading: true, lines: TITLE_LINES, variant: 'headline', size: 's' }), PARAGRAPH_LINES.map((lines, index) => (_jsx(SkeletonText, { loading: true, lines: lines }, index)))] })] }));
+}

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

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

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

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

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

@@ -18,8 +18,15 @@
   border-radius:var(--sn-primitive-dimension-16, 16px);
 }
 
-.image,
-.video{
+.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:16/10;
+}
+
+.file{
   display:block;
   width:100%;
   height:100%;
@@ -27,9 +34,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{

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

@@ -1,4 +1,4 @@
-import { NoteItemProps, ReleaseNotesContentState } from '../../types.js';
+import { NoteItemProps, ReleaseNotesContentState, Surface } from '../../types.js';
 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/esm/helperComponents/ReleaseNotesContent/ReleaseNotesContent.js

@@ -3,16 +3,15 @@ import { Button } from '@cloud-ru/ds-button';
 import { Carousel } from '@cloud-ru/ds-carousel';
 import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InfoBlock } from '@cloud-ru/ds-info-block';
-import { Skeleton } from '@cloud-ru/ds-skeleton';
 import cn from 'classnames';
 import { CONTENT_STATE, TEST_IDS } from '../../constants.js';
-import { NoteItem } from '../NoteItem/index.js';
+import { NoteItem, NoteItemSkeleton } from '../NoteItem/index.js';
 import styles from './styles.module.css';
 export 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 (_jsx("div", { className: styles.loading, "data-surface": surface, children: _jsx(Skeleton, { loading: true, width: '100%', height: '100%', borderRadius: 'var(--border-radius-l)' }) }));
+        return (_jsx("div", { className: cn(styles.root, styles[surface]), children: _jsx(NoteItemSkeleton, { surface: surface }) }));
     }
     if (contentState === CONTENT_STATE.Error) {
         return (_jsx("div", { className: styles.stateWrapper, "data-surface": surface, children: _jsx(InfoBlock, { className: styles.state, size: 'l', title: errorTitle, content: errorDescription, icon: { icon: CrossSVG, appearance: 'neutral', background: true }, "data-test-id": TEST_IDS.releaseNotesError, footer: _jsx(Button, { view: 'filled', appearance: 'neutral', size: 'l', label: retryLabel, onClick: onDataErrorRetryClick, "data-test-id": TEST_IDS.releaseNotesRetryButton }) }) }));

package/dist/esm/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/esm/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.d.ts

@@ -1,8 +1,9 @@
 import { ButtonProps } from '@cloud-ru/ds-button';
 import { MouseEvent } from 'react';
+import { Surface } from '../../types.js';
 export type ReleaseNotesFooterProps = {
     /** Поверхность отображения */
-    surface: 'modal' | 'bottomSheet';
+    surface: Surface;
     /** Количество страниц */
     total: number;
     /** Текущая страница, zero-based */