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

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.18 (2026-09-06)
+
+### Bug Fixes
+
+- **FF-8945:** align release notes with the layout and stabilize its size ([e1a32a6](https://github.com/cloud-ru-tech/snack-v2/commit/e1a32a6e5219acc6bf68f116010cbb169255f949))
+- **FF-8977:** shorten CI critical path via build split and faster tests ([3ce8ae9](https://github.com/cloud-ru-tech/snack-v2/commit/3ce8ae91f9e109380a015d6a2762e8676afc87ed))
+
 ## 1.0.17 (2026-09-03)
 
 **Note:** Version bump only for package @ds/uikit-product-modal-predefined

package/dist/cjs/constants.d.ts

@@ -13,8 +13,6 @@ export declare const SURFACE: {
  * слайдов разной длины. Переопределяется пропом `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";

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.TEST_IDS = exports.CONFIRM_TEXT_VARIANT = exports.MEDIA_STATUS = exports.DEFAULT_RELEASE_NOTES_SNAP_POINT = exports.SURFACE = exports.CONTENT_STATE = void 0;
 exports.CONTENT_STATE = {
     Data: 'data',
     NoData: 'noData',
@@ -16,8 +16,6 @@ exports.SURFACE = {
  * слайдов разной длины. Переопределяется пропом `snapPoint`.
  */
 exports.DEFAULT_RELEASE_NOTES_SNAP_POINT = 1;
-/** Задержка перед показом скелетона, мс. Ниже неё загрузка не успевает стать заметной. */
-exports.SKELETON_DELAY_MS = 200;
 /** Состояние загрузки иллюстрации/видео в карточке новости. */
 exports.MEDIA_STATUS = {
     Pending: 'pending',

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

@@ -42,5 +42,5 @@ function NoteItemMedia({ image, video }) {
             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 }) })] })] }));
+    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, { className: styles_module_scss_1.default.title, variant: 'title', size: 'l', 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

@@ -2,11 +2,9 @@ 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;
+export declare function NoteItemSkeleton({ surface }: NoteItemSkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,6 +15,6 @@ 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)))] })] }));
+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/styles.module.css

@@ -4,15 +4,6 @@
   -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);
@@ -63,6 +54,10 @@
   min-height:0;
 }
 
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
 .description{
   flex:1;
   min-height:0;
@@ -75,10 +70,4 @@
 
 .root[data-surface=modal] .media{
   order:2;
-}
-
-@media (prefers-reduced-motion: reduce){
-  .root{
-    animation:none;
-  }
 }

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

@@ -11,22 +11,19 @@ const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const info_block_1 = require("@cloud-ru/ds-info-block");
 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;
-    const showSkeleton = (0, hooks_1.useDelayedLoading)(loading);
-    if (!loading && contentState === constants_1.CONTENT_STATE.Error) {
+    if (loading) {
+        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)("div", { className: styles_module_scss_1.default.skeletonSlide, 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 }) }) }));
     }
-    if (!loading && (contentState === constants_1.CONTENT_STATE.NoData || !hasItems)) {
+    if (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 }) }));
     }
-    // Скелетон отрисован слайдом той же карусели: у неё есть собственные отступы, и отдельная
-    // обёртка для состояния загрузки дала бы другую высоту на переходе `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}`)) }) }));
+    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}`))) }) }));
 }

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

@@ -2,6 +2,8 @@
   display:flex;
   flex-direction:column;
   row-gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
 }
 
 .modal{
@@ -16,6 +18,12 @@
   min-width:0;
 }
 
+.skeletonSlide{
+  box-sizing:border-box;
+  width:100%;
+  padding:calc(var(--sn-carousel-anatomy-contentWrapper-content-paddingVertical, var(--sn-primitive-dimension-4, 4px)) + var(--sn-primitive-strokeWeight-strokeRegular, 1px)) var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+
 .stateWrapper{
   display:flex;
   flex-direction:column;

package/dist/cjs/hooks.d.ts

@@ -23,10 +23,4 @@ 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,9 +2,7 @@
 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)('');
@@ -59,20 +57,3 @@ 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/style.css

@@ -80,15 +80,6 @@
   -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);
@@ -139,6 +130,10 @@
   min-height:0;
 }
 
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
 .description{
   flex:1;
   min-height:0;
@@ -152,16 +147,12 @@
 .root[data-surface=modal] .media{
   order:2;
 }
-
-@media (prefers-reduced-motion: reduce){
-  .root{
-    animation:none;
-  }
-}
 .root{
   display:flex;
   flex-direction:column;
   row-gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
 }
 
 .modal{
@@ -176,6 +167,12 @@
   min-width:0;
 }
 
+.skeletonSlide{
+  box-sizing:border-box;
+  width:100%;
+  padding:calc(var(--sn-carousel-anatomy-contentWrapper-content-paddingVertical, var(--sn-primitive-dimension-4, 4px)) + var(--sn-primitive-strokeWeight-strokeRegular, 1px)) var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+
 .stateWrapper{
   display:flex;
   flex-direction:column;

package/dist/esm/constants.d.ts

@@ -13,8 +13,6 @@ export declare const SURFACE: {
  * слайдов разной длины. Переопределяется пропом `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";

package/dist/esm/constants.js

@@ -13,8 +13,6 @@ export const SURFACE = {
  * слайдов разной длины. Переопределяется пропом `snapPoint`.
  */
 export const DEFAULT_RELEASE_NOTES_SNAP_POINT = 1;
-/** Задержка перед показом скелетона, мс. Ниже неё загрузка не успевает стать заметной. */
-export const SKELETON_DELAY_MS = 200;
 /** Состояние загрузки иллюстрации/видео в карточке новости. */
 export const MEDIA_STATUS = {
     Pending: 'pending',

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

@@ -36,5 +36,5 @@ function NoteItemMedia({ image, video }) {
             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 }) })] })] }));
+    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, { className: styles.title, variant: 'title', size: 'l', 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

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

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

@@ -9,6 +9,6 @@ const PARAGRAPH_LINES = [2, 3, 3];
  * Скелетон карточки новости: те же классы сетки и тот же медиа-слот, что и у `NoteItem`,
  * поэтому переход `loading → data` не меняет геометрию.
  */
-export function NoteItemSkeleton({ surface = SURFACE.Modal, loading = true }) {
-    return (_jsxs("div", { className: styles.root, "data-surface": surface, "data-loading": loading, "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: loading, width: '100%', height: '100%' }) }), _jsxs("div", { className: styles.content, children: [_jsx(SkeletonText, { loading: loading, lines: TITLE_LINES, variant: 'headline', size: 's' }), PARAGRAPH_LINES.map((lines, index) => (_jsx(SkeletonText, { loading: loading, lines: lines }, index)))] })] }));
+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/styles.module.css

@@ -4,15 +4,6 @@
   -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);
@@ -63,6 +54,10 @@
   min-height:0;
 }
 
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
 .description{
   flex:1;
   min-height:0;
@@ -75,10 +70,4 @@
 
 .root[data-surface=modal] .media{
   order:2;
-}
-
-@media (prefers-reduced-motion: reduce){
-  .root{
-    animation:none;
-  }
 }

package/dist/esm/helperComponents/ReleaseNotesContent/ReleaseNotesContent.js

@@ -5,22 +5,19 @@ import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InfoBlock } from '@cloud-ru/ds-info-block';
 import cn from 'classnames';
 import { CONTENT_STATE, TEST_IDS } from '../../constants.js';
-import { useDelayedLoading } from '../../hooks.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;
-    const showSkeleton = useDelayedLoading(loading);
-    if (!loading && contentState === CONTENT_STATE.Error) {
+    if (loading) {
+        return (_jsx("div", { className: cn(styles.root, styles[surface]), children: _jsx("div", { className: styles.skeletonSlide, 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 }) }) }));
     }
-    if (!loading && (contentState === CONTENT_STATE.NoData || !hasItems)) {
+    if (contentState === CONTENT_STATE.NoData || !hasItems) {
         return (_jsx("div", { className: styles.stateWrapper, "data-surface": surface, children: _jsx(InfoBlock, { className: styles.state, size: 'l', title: noDataTitle, content: noDataDescription, "data-test-id": TEST_IDS.releaseNotesNoData }) }));
     }
-    // Скелетон отрисован слайдом той же карусели: у неё есть собственные отступы, и отдельная
-    // обёртка для состояния загрузки дала бы другую высоту на переходе `loading → data`.
-    return (_jsx("div", { className: cn(styles.root, styles[surface]), children: _jsx(Carousel, { arrows: false, pagination: false, swipe: !loading, state: { page: pageIndex, onChange: onPageChange }, className: styles.carousel, children: loading
-                ? [_jsx(NoteItemSkeleton, { surface: surface, loading: showSkeleton }, 'skeleton')]
-                : items.map(item => _jsx(NoteItem, { ...item, surface: surface }, `${item.title}-${item.image.src}`)) }) }));
+    return (_jsx("div", { className: cn(styles.root, styles[surface]), children: _jsx(Carousel, { arrows: false, pagination: false, swipe: true, state: { page: pageIndex, onChange: onPageChange }, className: styles.carousel, children: items.map(item => (_jsx(NoteItem, { ...item, surface: surface }, `${item.title}-${item.image.src}`))) }) }));
 }

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

@@ -2,6 +2,8 @@
   display:flex;
   flex-direction:column;
   row-gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
 }
 
 .modal{
@@ -16,6 +18,12 @@
   min-width:0;
 }
 
+.skeletonSlide{
+  box-sizing:border-box;
+  width:100%;
+  padding:calc(var(--sn-carousel-anatomy-contentWrapper-content-paddingVertical, var(--sn-primitive-dimension-4, 4px)) + var(--sn-primitive-strokeWeight-strokeRegular, 1px)) var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+
 .stateWrapper{
   display:flex;
   flex-direction:column;

package/dist/esm/hooks.d.ts

@@ -23,10 +23,4 @@ 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/esm/hooks.js

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
-import { SKELETON_DELAY_MS } from './constants.js';
+import { useCallback, useState } from 'react';
 export function useTextFieldValidation({ target, errorText }) {
     const [value, setValue] = useState('');
     const [error, setError] = useState('');
@@ -54,20 +53,3 @@ export function useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideCh
         handlePrevPageClick,
     };
 }
-/**
- * Возвращает `true`, только если загрузка длится дольше `delay`. Ответ из кеша приходит за считаные
- * кадры, и скелетон в таком сценарии успевает мигнуть — подмена читается как рывок, хотя ждать
- * было нечего.
- */
-export function useDelayedLoading(loading, delay = SKELETON_DELAY_MS) {
-    const [delayPassed, setDelayPassed] = useState(false);
-    useEffect(() => {
-        if (!loading) {
-            setDelayPassed(false);
-            return;
-        }
-        const timer = setTimeout(() => setDelayPassed(true), delay);
-        return () => clearTimeout(timer);
-    }, [loading, delay]);
-    return Boolean(loading) && delayPassed;
-}

package/dist/esm/style.css

@@ -80,15 +80,6 @@
   -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);
@@ -139,6 +130,10 @@
   min-height:0;
 }
 
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
 .description{
   flex:1;
   min-height:0;
@@ -152,16 +147,12 @@
 .root[data-surface=modal] .media{
   order:2;
 }
-
-@media (prefers-reduced-motion: reduce){
-  .root{
-    animation:none;
-  }
-}
 .root{
   display:flex;
   flex-direction:column;
   row-gap:var(--sn-primitive-dimension-16, 16px);
+  box-sizing:border-box;
+  width:100%;
 }
 
 .modal{
@@ -176,6 +167,12 @@
   min-width:0;
 }
 
+.skeletonSlide{
+  box-sizing:border-box;
+  width:100%;
+  padding:calc(var(--sn-carousel-anatomy-contentWrapper-content-paddingVertical, var(--sn-primitive-dimension-4, 4px)) + var(--sn-primitive-strokeWeight-strokeRegular, 1px)) var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+
 .stateWrapper{
   display:flex;
   flex-direction:column;