@cloud-ru/ds-uikit-product-modal-predefined 1.0.0

package/dist/cjs/style.css

@@ -0,0 +1,243 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
+}
+.root{
+  display:flex;
+  flex-direction:column;
+}
+
+.confirmText{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  margin-bottom:var(--sn-primitive-dimension-8, 8px);
+}
+
+.confirmText[data-align=start]{
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  justify-content:flex-start;
+}
+
+.confirmLabel{
+  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-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.confirmValue{
+  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));
+}
+.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));
+}
+.root[data-surface=bottomSheet]{
+  grid-template-columns:minmax(0, 1fr);
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  min-height:0;
+}
+
+.media{
+  position:relative;
+  overflow:hidden;
+  min-width:0;
+  border-radius:var(--sn-primitive-dimension-16, 16px);
+}
+
+.image,
+.video{
+  display:block;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.videoSkeleton{
+  position:absolute;
+  inset:0;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-12, 12px);
+  min-width:0;
+}
+
+.description{
+  min-height:0;
+}
+
+.root[data-surface=modal] .content{
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  order:1;
+}
+
+.root[data-surface=modal] .media{
+  order:2;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.modal{
+  min-width:calc(11 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.bottomSheet{
+  min-width:0;
+}
+
+.carousel{
+  min-width:0;
+}
+
+.stateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+.stateWrapper[data-surface=modal]{
+  height:calc(7 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
+}
+.stateWrapper[data-surface=bottomSheet]{
+  min-height:calc(7 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.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));
+}
+.root{
+  position:relative;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-16, 16px);
+       column-gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+}
+
+.controls{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  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;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,67 @@
+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';
+export type ReleaseNotesContentState = ValueOf<typeof CONTENT_STATE>;
+export type ConfirmTextVariant = ValueOf<typeof CONFIRM_TEXT_VARIANT>;
+export type NoteItemProps = {
+    /** Заголовок новости */
+    title: string;
+    /** Описание новости в markdown */
+    description: string;
+    /** Иллюстрация */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /** Видео вместо статичной иллюстрации */
+    video?: string;
+};
+type BaseActionModalProps = Pick<ModalCustomProps, 'open' | 'onClose' | 'mode' | 'closeOnPopstate'> & {
+    /** Подсказка рядом с заголовком */
+    titleTooltip?: ReactNode;
+    /** Состояние с подтверждением через ввод текста */
+    confirmable?: boolean;
+    /** Текст, который нужно ввести для подтверждения */
+    confirmText?: string;
+    /** Скрыть кнопку копирования текста подтверждения */
+    hideConfirmCopyButton?: boolean;
+    /** Основной текст модалки */
+    content?: ReactNode;
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+};
+export type DeleteModalProps = WithSupportProps<BaseActionModalProps & {
+    /** Тип удаляемого объекта, отображается в заголовке */
+    objectType?: string;
+    /** Колбэк подтверждения удаления */
+    onDelete(onClose: () => void): void;
+    /** Состояние загрузки кнопки удаления */
+    deleting?: boolean;
+    /** Тип текста подтверждения */
+    confirmTextVariant?: ConfirmTextVariant;
+}>;
+export type RecallModalProps = WithSupportProps<BaseActionModalProps & {
+    /** Колбэк подтверждения отзыва */
+    onRecall(onClose: () => void): void;
+    /** Состояние загрузки кнопки отзыва */
+    loading?: boolean;
+}>;
+export type ReleaseNotesProps = WithSupportProps<Pick<ModalCustomProps, 'open' | 'onClose' | 'closeOnPopstate'> & {
+    /** Визуальное состояние контента по Figma */
+    contentState?: ReleaseNotesContentState;
+    /** Массив новостей */
+    items: NoteItemProps[];
+    /** Состояние загрузки контента */
+    loading?: boolean;
+    /** Действие "Ознакомиться позже" */
+    onReadLaterClick?(): void;
+    /** Действие перезагрузки на экране ошибки */
+    onDataErrorRetryClick?(): void;
+    /** Действие при смене слайда */
+    onSlideChange?(slide: number): void;
+    /** Только mobile: дополнительные пропсы action-кнопки "Ознакомиться позже" (на desktop игнорируется). */
+    readLaterButtonProps?: Partial<ButtonProps>;
+}>;
+export {};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/DeleteModal/DeleteModal.d.ts

@@ -0,0 +1,2 @@
+import { DeleteModalProps } from '../../types.js';
+export declare function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmable, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant, ...rest }: DeleteModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DeleteModal/DeleteModal.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { useRef } from 'react';
+import { CONFIRM_TEXT_VARIANT, TEST_IDS } from '../../constants.js';
+import { InputConfirm } from '../../helperComponents/index.js';
+import { useTextFieldValidation } from '../../hooks.js';
+import { modalPredefinedLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmable = false, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant = CONFIRM_TEXT_VARIANT.Name, ...rest }) {
+    const { t } = modalPredefinedLocale.useTranslations();
+    const inputRef = useRef(null);
+    const { value, error, handleChange, reset, validate } = useTextFieldValidation({
+        target: confirmable ? confirmText : undefined,
+        errorText: t('confirm.error'),
+    });
+    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const title = objectType ? t('deleteModal.title', { objectType }) : t('deleteModal.fallbackTitle');
+    const confirmPlaceholder = confirmTextVariant === CONFIRM_TEXT_VARIANT.Text ? t('confirm.textPlaceholder') : t('confirm.namePlaceholder');
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+    const handleApproveClick = () => {
+        if (!validate()) {
+            inputRef.current?.focus();
+            return;
+        }
+        onDelete(handleClose);
+    };
+    return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, "data-confirmable": confirmable || undefined, ...rest, children: [_jsx("div", { className: styles.safeAreaTop }), _jsx(ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), _jsx("div", { className: styles.safeAreaBottom }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
+}

package/dist/esm/components/DeleteModal/index.d.ts

@@ -0,0 +1 @@
+export * from './DeleteModal.js';

package/dist/esm/components/DeleteModal/index.js

@@ -0,0 +1 @@
+export * from './DeleteModal.js';

package/dist/esm/components/DeleteModal/styles.module.css

@@ -0,0 +1,33 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}

package/dist/esm/components/RecallModal/RecallModal.d.ts

@@ -0,0 +1,2 @@
+import { RecallModalProps } from '../../types.js';
+export declare function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmable, confirmText, hideConfirmCopyButton, subtitle, ...rest }: RecallModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RecallModal/RecallModal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { useRef } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { InputConfirm } from '../../helperComponents/index.js';
+import { useTextFieldValidation } from '../../hooks.js';
+import { modalPredefinedLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmable = false, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
+    const { t } = modalPredefinedLocale.useTranslations();
+    const inputRef = useRef(null);
+    const { value, error, handleChange, reset, validate } = useTextFieldValidation({
+        target: confirmable ? confirmText : undefined,
+        errorText: t('confirm.error'),
+    });
+    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+    const handleApproveClick = () => {
+        if (!validate()) {
+            inputRef.current?.focus();
+            return;
+        }
+        onRecall(handleClose);
+    };
+    return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, "data-confirmable": confirmable || undefined, ...rest, children: [_jsx("div", { className: styles.safeAreaTop }), _jsx(ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? _jsx(QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsxs("div", { className: styles.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && (_jsx(InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', confirmLabel: t('recallModal.confirmLabel'), hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', placeholder: t('confirm.namePlaceholder'), onChange: handleChange }))] }) }), _jsx("div", { className: styles.safeAreaBottom }), _jsx(ModalCustom.Footer, { children: _jsxs("div", { className: styles.footer, children: [_jsx(Button, { view: VIEW.Outline, appearance: APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": TEST_IDS.cancelButton }), _jsx(Button, { view: VIEW.Filled, appearance: APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": TEST_IDS.approveButton })] }) })] }));
+}

package/dist/esm/components/RecallModal/index.d.ts

@@ -0,0 +1 @@
+export * from './RecallModal.js';

package/dist/esm/components/RecallModal/index.js

@@ -0,0 +1 @@
+export * from './RecallModal.js';

package/dist/esm/components/RecallModal/styles.module.css

@@ -0,0 +1,33 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}

package/dist/esm/components/ReleaseNotes/ReleaseNotes.d.ts

@@ -0,0 +1,7 @@
+import { ReleaseNotesProps } from '../../types.js';
+/**
+ * Адаптивный release-notes: на `mobile` — bottom sheet, иначе — модальное окно. Поверхность выбирается
+ * по `useAdaptiveLayout()` из `@cloud-ru/ds-adaptive` и пропом не задаётся. Форс раскладки — через
+ * `withLayoutType(ReleaseNotes, 'mobile')` либо `AdaptiveProvider` в поддереве.
+ */
+export declare function ReleaseNotes(props: ReleaseNotesProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ReleaseNotes/ReleaseNotes.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopReleaseNotes, MobileReleaseNotes } from '../../helperComponents/index.js';
+/**
+ * Адаптивный release-notes: на `mobile` — bottom sheet, иначе — модальное окно. Поверхность выбирается
+ * по `useAdaptiveLayout()` из `@cloud-ru/ds-adaptive` и пропом не задаётся. Форс раскладки — через
+ * `withLayoutType(ReleaseNotes, 'mobile')` либо `AdaptiveProvider` в поддереве.
+ */
+export function ReleaseNotes(props) {
+    const { layoutType } = useAdaptiveLayout();
+    return isMobileLayout(layoutType) ? _jsx(MobileReleaseNotes, { ...props }) : _jsx(DesktopReleaseNotes, { ...props });
+}

package/dist/esm/components/ReleaseNotes/index.d.ts

@@ -0,0 +1 @@
+export * from './ReleaseNotes.js';

package/dist/esm/components/ReleaseNotes/index.js

@@ -0,0 +1 @@
+export * from './ReleaseNotes.js';

package/dist/esm/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DeleteModal/index.js';
+export * from './RecallModal/index.js';
+export * from './ReleaseNotes/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './DeleteModal/index.js';
+export * from './RecallModal/index.js';
+export * from './ReleaseNotes/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const CONTENT_STATE: {
+    readonly Data: "data";
+    readonly NoData: "noData";
+    readonly Error: "error";
+};
+export declare const CONFIRM_TEXT_VARIANT: {
+    readonly Name: "name";
+    readonly Text: "text";
+};
+export declare const TEST_IDS: {
+    readonly deleteModal: "delete-modal";
+    readonly recallModal: "recall-modal";
+    readonly releaseNotes: "release-notes";
+    readonly approveButton: "modal-predefined__approve-button";
+    readonly cancelButton: "modal-predefined__cancel-button";
+    readonly confirmInput: "modal-predefined__confirm-input";
+    readonly confirmCopyButton: "modal-predefined__confirm-copy-button";
+    readonly releaseNotesItem: "modal-predefined__release-notes-item";
+    readonly releaseNotesMedia: "modal-predefined__release-notes-media";
+    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 releaseNotesPrevButton: "modal-predefined__release-notes-prev-button";
+    readonly releaseNotesNextButton: "modal-predefined__release-notes-next-button";
+};

package/dist/esm/constants.js

@@ -0,0 +1,27 @@
+export const CONTENT_STATE = {
+    Data: 'data',
+    NoData: 'noData',
+    Error: 'error',
+};
+export const CONFIRM_TEXT_VARIANT = {
+    Name: 'name',
+    Text: 'text',
+};
+export const TEST_IDS = {
+    deleteModal: 'delete-modal',
+    recallModal: 'recall-modal',
+    releaseNotes: 'release-notes',
+    approveButton: 'modal-predefined__approve-button',
+    cancelButton: 'modal-predefined__cancel-button',
+    confirmInput: 'modal-predefined__confirm-input',
+    confirmCopyButton: 'modal-predefined__confirm-copy-button',
+    releaseNotesItem: 'modal-predefined__release-notes-item',
+    releaseNotesMedia: 'modal-predefined__release-notes-media',
+    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',
+    releaseNotesPrevButton: 'modal-predefined__release-notes-prev-button',
+    releaseNotesNextButton: 'modal-predefined__release-notes-next-button',
+};

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

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

package/dist/esm/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { CONTENT_STATE } from '../../constants.js';
+import { useReleaseNotesNavigation } from '../../hooks.js';
+import { modalPredefinedLocale } from '../../locale/index.js';
+import { ReleaseNotesContent } from '../ReleaseNotesContent/index.js';
+import { ReleaseNotesFooter } from '../ReleaseNotesFooter/index.js';
+import styles from './styles.module.css';
+export function DesktopReleaseNotes({ open, onClose, closeOnPopstate, contentState = CONTENT_STATE.Data, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChange, ...rest }) {
+    const { t } = modalPredefinedLocale.useTranslations();
+    const { pageIndex, readablePageNumber, setPage, handleClose, handleReadLaterClick, handleNextPageClick, handlePrevPageClick, } = useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange });
+    const shouldShowFooter = contentState === CONTENT_STATE.Data && (loading || items.length > 0);
+    return (_jsxs(ModalCustom, { open: open, onClose: handleClose, closeOnPopstate: closeOnPopstate, width: WIDTH.M, "data-content-state": contentState, "data-surface": 'modal', ...extractSupportProps(rest), children: [_jsx("div", { className: styles.safeAreaTop }), _jsx(ModalCustom.Header, { title: t('releaseNotes.title') }), _jsx(ModalCustom.Body, { className: styles.body, content: _jsx(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 }) }), _jsx("div", { className: styles.safeAreaBottom }), shouldShowFooter && (_jsx(ModalCustom.Footer, { children: _jsx(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) }) }))] }));
+}

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

@@ -0,0 +1 @@
+export * from './DesktopReleaseNotes.js';

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

@@ -0,0 +1 @@
+export * from './DesktopReleaseNotes.js';

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

@@ -0,0 +1,19 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
+}