@cloud-ru/ds-uikit-product-modal-predefined 1.0.8-preview-04507fc5.0 → 1.0.8

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.8 (2026-08-27)
+
+### Bug Fixes
+
+- **FF-8948:** truncate long confirm text in InputConfirm ([4ef9666](https://github.com/cloud-ru-tech/snack-v2/commit/4ef966639386a66c91deb6fdafe95a6cc33a012a))
+
 ## 1.0.7 (2026-08-25)
 
 **Note:** Version bump only for package @ds/uikit-product-modal-predefined

package/README.md

@@ -5,7 +5,7 @@
 Пакет `@cloud-ru/ds-uikit-product-modal-predefined` предоставляет готовые product-сценарии поверх `@cloud-ru/ds-modal` и `@cloud-ru/ds-bottom-sheet`.
 
 - **DeleteModal** — удаление объекта с опциональным подтверждением через ввод текста.
-- **RecallModal** — отзыв действия с тем же Figma-first `confirmable` состоянием.
+- **RecallModal** — отзыв действия с тем же подтверждением через ввод текста.
 - **ReleaseNotes** — адаптивный release notes: модальное окно на desktop, bottom sheet на mobile; состояния `data`, `noData`, `error`.
 
 ## Установка
@@ -22,13 +22,13 @@ import { DeleteModal, RecallModal, ReleaseNotes } from '@cloud-ru/ds-uikit-produ
 
 Источник: `Product UI Kit (variables)`, root node `3179:1987`.
 
-Пакет следует Figma-first API: `confirmable` и `contentState` являются публичными визуальными осями. Legacy `@cloud-ru/uikit-product-modal-predefined` используется как источник поведения, но новый пакет не является drop-in заменой legacy API.
+Пакет следует Figma-first API: `contentState` — публичная визуальная ось, поле подтверждения включается пропом `confirmText`. Legacy `@cloud-ru/uikit-product-modal-predefined` используется как источник поведения, но новый пакет не является drop-in заменой legacy API.
 
 ## DeleteModal
 
-Готовое модальное окно удаления с Figma-first состоянием confirmable.
+Готовое модальное окно удаления с опциональным подтверждением через ввод текста.
 
-`DeleteModal` — готовый сценарий удаления объекта. Для варианта из макета `deleteModalConfirmable` используйте `confirmable` и `confirmText`.
+`DeleteModal` — готовый сценарий удаления объекта. Вариант из макета `deleteModalConfirmable` включается пропом `confirmText`: если он передан, модалка показывает поле подтверждения.
 
 ### Примеры использования
 
@@ -73,7 +73,6 @@ export function DeleteConfirmable() {
         open={open}
         onClose={() => setOpen(false)}
         objectType='виртуальную машину'
-        confirmable
         confirmText='vm-production-01'
         onDelete={close => close()}
       />
@@ -89,9 +88,8 @@ export function DeleteConfirmable() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `closeOnPopstate` | `boolean` | — | Закрытие при навигации по истории |
-| `confirmText` | `string` | — | Текст, который нужно ввести для подтверждения |
+| `confirmText` | `string` | — | Текст, который нужно ввести для подтверждения. Если передан — модалка показывает поле подтверждения |
 | `confirmTextVariant` | `"name"` \| `"text"` | `name` | Тип текста подтверждения |
-| `confirmable` | `boolean` | `false` | Состояние с подтверждением через ввод текста |
 | `content` | `ReactNode` | — | Основной текст модалки |
 | `data-test-id` | `string` | — |  |
 | `deleting` | `boolean` | — | Состояние загрузки кнопки удаления |
@@ -110,9 +108,9 @@ export function DeleteConfirmable() {
 
 ## RecallModal
 
-Готовое модальное окно отзыва действия с опциональным confirmable состоянием.
+Готовое модальное окно отзыва действия с опциональным подтверждением через ввод текста.
 
-`RecallModal` — готовый сценарий отзыва действия. Визуальная ось `confirmable` соответствует макету `recallModalConfirmable`.
+`RecallModal` — готовый сценарий отзыва действия. Вариант из макета `recallModalConfirmable` включается пропом `confirmText`: если он передан, модалка показывает поле подтверждения.
 
 ### Примеры использования
 
@@ -151,7 +149,6 @@ export function RecallConfirmable() {
       <RecallModal
         open={open}
         onClose={() => setOpen(false)}
-        confirmable
         confirmText='recall-operation-01'
         onRecall={close => close()}
       />
@@ -167,8 +164,7 @@ export function RecallConfirmable() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `closeOnPopstate` | `boolean` | — | Закрытие при навигации по истории |
-| `confirmText` | `string` | — | Текст, который нужно ввести для подтверждения |
-| `confirmable` | `boolean` | `false` | Состояние с подтверждением через ввод текста |
+| `confirmText` | `string` | — | Текст, который нужно ввести для подтверждения. Если передан — модалка показывает поле подтверждения |
 | `content` | `ReactNode` | — | Основной текст модалки |
 | `data-test-id` | `string` | — |  |
 | `hideConfirmCopyButton` | `boolean` | — | Скрыть кнопку копирования текста подтверждения |

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

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

package/dist/cjs/components/DeleteModal/DeleteModal.js

@@ -14,14 +14,14 @@ const helperComponents_1 = require("../../helperComponents");
 const hooks_1 = require("../../hooks");
 const locale_1 = require("../../locale");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmable = false, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant = constants_1.CONFIRM_TEXT_VARIANT.Name, ...rest }) {
+function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant = constants_1.CONFIRM_TEXT_VARIANT.Name, ...rest }) {
     const { t } = locale_1.modalPredefinedLocale.useTranslations();
     const inputRef = (0, react_1.useRef)(null);
     const { value, error, handleChange, reset, validate } = (0, hooks_1.useTextFieldValidation)({
-        target: confirmable ? confirmText : undefined,
+        target: confirmText,
         errorText: t('confirm.error'),
     });
-    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const shouldShowConfirm = Boolean(confirmText);
     const title = objectType ? t('deleteModal.title', { objectType }) : t('deleteModal.fallbackTitle');
     const confirmPlaceholder = confirmTextVariant === constants_1.CONFIRM_TEXT_VARIANT.Text ? t('confirm.textPlaceholder') : t('confirm.namePlaceholder');
     const handleClose = () => {
@@ -35,5 +35,5 @@ function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTo
         }
         onDelete(handleClose);
     };
-    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, "data-confirmable": confirmable || undefined, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.deleteModal, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaTop }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: title, subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('deleteModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.InputConfirm, { ref: inputRef, confirmText: confirmText ?? '', hideConfirmCopyButton: hideConfirmCopyButton, value: value, error: error, size: 'l', copyLineAlign: 'start', confirmLabel: t('deleteModal.confirmLabel'), placeholder: confirmPlaceholder, onChange: handleChange }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaBottom }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('deleteModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('deleteModal.approve'), loading: deleting, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
 }

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

@@ -1,3 +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:auto;
 }

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

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

package/dist/cjs/components/RecallModal/RecallModal.js

@@ -14,14 +14,14 @@ const helperComponents_1 = require("../../helperComponents");
 const hooks_1 = require("../../hooks");
 const locale_1 = require("../../locale");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmable = false, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
+function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
     const { t } = locale_1.modalPredefinedLocale.useTranslations();
     const inputRef = (0, react_1.useRef)(null);
     const { value, error, handleChange, reset, validate } = (0, hooks_1.useTextFieldValidation)({
-        target: confirmable ? confirmText : undefined,
+        target: confirmText,
         errorText: t('confirm.error'),
     });
-    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const shouldShowConfirm = Boolean(confirmText);
     const handleClose = () => {
         reset();
         onClose();
@@ -33,5 +33,5 @@ function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRec
         }
         onRecall(handleClose);
     };
-    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, "data-confirmable": confirmable || undefined, ...rest, children: [(0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.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 }))] }) }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(modal_1.ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: modal_1.WIDTH.S, "data-test-id": constants_1.TEST_IDS.recallModal, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaTop }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Header, { title: t('recallModal.title'), subtitle: subtitle, slotAfterTitle: titleTooltip ? (0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { size: 's', tip: titleTooltip }) : undefined }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Body, { className: styles_module_scss_1.default.body, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [content ?? t('recallModal.content'), shouldShowConfirm && ((0, jsx_runtime_1.jsx)(helperComponents_1.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 }))] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.safeAreaBottom }), (0, jsx_runtime_1.jsx)(modal_1.ModalCustom.Footer, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Outline, appearance: button_1.APPEARANCE.Neutral, label: t('recallModal.cancel'), onClick: handleClose, "data-test-id": constants_1.TEST_IDS.cancelButton }), (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Critical, label: t('recallModal.approve'), loading: loading, onClick: handleApproveClick, "data-test-id": constants_1.TEST_IDS.approveButton })] }) })] }));
 }

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

@@ -1,3 +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:auto;
 }

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

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

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

@@ -1,3 +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));
 }

package/dist/cjs/helperComponents/InputConfirm/InputConfirm.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputConfirm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const fields_1 = require("@cloud-ru/ds-fields");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
 const uikit_product_copy_1 = require("@cloud-ru/ds-uikit-product-copy");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.InputConfirm = (0, react_1.forwardRef)(function InputConfirm({ confirmText, confirmLabel, hideConfirmCopyButton, value, error, label, size = 'm', copyLineAlign = 'space-between', placeholder, onChange, ...rest }, ref) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [confirmLabel && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.confirmLabel, children: confirmLabel }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.confirmText, "data-align": copyLineAlign, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.confirmValue, children: confirmText }), !hideConfirmCopyButton && (0, jsx_runtime_1.jsx)(uikit_product_copy_1.CopyButton, { valueToCopy: confirmText, "data-test-id": constants_1.TEST_IDS.confirmCopyButton })] }), (0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...rest, ref: ref, inputMode: 'text', label: label, required: Boolean(label), size: size, placeholder: placeholder, value: value, onChange: onChange, hint: error, validationState: error ? fields_1.VALIDATION_STATE.Error : fields_1.VALIDATION_STATE.Default, "data-test-id": constants_1.TEST_IDS.confirmInput })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [confirmLabel && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.confirmLabel, children: confirmLabel }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.confirmText, "data-align": copyLineAlign, children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.confirmValue, variant: 'middle', text: confirmText }), !hideConfirmCopyButton && (0, jsx_runtime_1.jsx)(uikit_product_copy_1.CopyButton, { valueToCopy: confirmText, "data-test-id": constants_1.TEST_IDS.confirmCopyButton })] }), (0, jsx_runtime_1.jsx)(fields_1.FieldCombo, { ...rest, ref: ref, inputMode: 'text', label: label, required: Boolean(label), size: size, placeholder: placeholder, value: value, onChange: onChange, hint: error, validationState: error ? fields_1.VALIDATION_STATE.Error : fields_1.VALIDATION_STATE.Default, "data-test-id": constants_1.TEST_IDS.confirmInput })] }));
 });

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

@@ -35,4 +35,5 @@
   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));
+  min-width:0;
 }

package/dist/cjs/style.css

@@ -1,3 +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:auto;
 }
@@ -15,6 +31,22 @@
   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;
 }
@@ -32,6 +64,22 @@
   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));
 }
@@ -72,6 +120,7 @@
   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));
+  min-width:0;
 }
 .root{
   display:grid;

package/dist/cjs/types.d.ts

@@ -21,9 +21,7 @@ export type NoteItemProps = {
 type BaseActionModalProps = Pick<ModalCustomProps, 'open' | 'onClose' | 'mode' | 'closeOnPopstate'> & {
     /** Подсказка рядом с заголовком */
     titleTooltip?: ReactNode;
-    /** Состояние с подтверждением через ввод текста */
-    confirmable?: boolean;
-    /** Текст, который нужно ввести для подтверждения */
+    /** Текст, который нужно ввести для подтверждения. Если передан — модалка показывает поле подтверждения */
     confirmText?: string;
     /** Скрыть кнопку копирования текста подтверждения */
     hideConfirmCopyButton?: boolean;

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

@@ -1,2 +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;
+export declare function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, confirmText, hideConfirmCopyButton, subtitle, confirmTextVariant, ...rest }: DeleteModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,14 +8,14 @@ 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 }) {
+export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType, titleTooltip, onDelete, deleting, content, 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,
+        target: confirmText,
         errorText: t('confirm.error'),
     });
-    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const shouldShowConfirm = Boolean(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 = () => {
@@ -29,5 +29,5 @@ export function DeleteModal({ open, onClose, mode, closeOnPopstate, objectType,
         }
         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(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(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 })] }) })] }));
+    return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.deleteModal, ...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/styles.module.css

@@ -1,3 +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:auto;
 }

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

@@ -1,2 +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;
+export declare function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmText, hideConfirmCopyButton, subtitle, ...rest }: RecallModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,14 +8,14 @@ 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 }) {
+export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip, onRecall, loading, content, confirmText, hideConfirmCopyButton, subtitle, ...rest }) {
     const { t } = modalPredefinedLocale.useTranslations();
     const inputRef = useRef(null);
     const { value, error, handleChange, reset, validate } = useTextFieldValidation({
-        target: confirmable ? confirmText : undefined,
+        target: confirmText,
         errorText: t('confirm.error'),
     });
-    const shouldShowConfirm = Boolean(confirmable && confirmText);
+    const shouldShowConfirm = Boolean(confirmText);
     const handleClose = () => {
         reset();
         onClose();
@@ -27,5 +27,5 @@ export function RecallModal({ open, onClose, mode, closeOnPopstate, titleTooltip
         }
         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(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(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 })] }) })] }));
+    return (_jsxs(ModalCustom, { open: open, onClose: handleClose, mode: mode, closeOnPopstate: closeOnPopstate, width: WIDTH.S, "data-test-id": TEST_IDS.recallModal, ...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/styles.module.css

@@ -1,3 +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:auto;
 }

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

@@ -11,5 +11,5 @@ export function DesktopReleaseNotes({ open, onClose, closeOnPopstate, contentSta
     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(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 }) }), 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) }) }))] }));
+    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/styles.module.css

@@ -1,3 +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));
 }

package/dist/esm/helperComponents/InputConfirm/InputConfirm.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldCombo, VALIDATION_STATE } from '@cloud-ru/ds-fields';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
 import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';
 import { forwardRef } from 'react';
 import { TEST_IDS } from '../../constants.js';
 import styles from './styles.module.css';
 export const InputConfirm = forwardRef(function InputConfirm({ confirmText, confirmLabel, hideConfirmCopyButton, value, error, label, size = 'm', copyLineAlign = 'space-between', placeholder, onChange, ...rest }, ref) {
-    return (_jsxs("div", { className: styles.root, children: [confirmLabel && _jsx("span", { className: styles.confirmLabel, children: confirmLabel }), _jsxs("div", { className: styles.confirmText, "data-align": copyLineAlign, children: [_jsx("span", { className: styles.confirmValue, children: confirmText }), !hideConfirmCopyButton && _jsx(CopyButton, { valueToCopy: confirmText, "data-test-id": TEST_IDS.confirmCopyButton })] }), _jsx(FieldCombo, { ...rest, ref: ref, inputMode: 'text', label: label, required: Boolean(label), size: size, placeholder: placeholder, value: value, onChange: onChange, hint: error, validationState: error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default, "data-test-id": TEST_IDS.confirmInput })] }));
+    return (_jsxs("div", { className: styles.root, children: [confirmLabel && _jsx("span", { className: styles.confirmLabel, children: confirmLabel }), _jsxs("div", { className: styles.confirmText, "data-align": copyLineAlign, children: [_jsx(TruncateString, { className: styles.confirmValue, variant: 'middle', text: confirmText }), !hideConfirmCopyButton && _jsx(CopyButton, { valueToCopy: confirmText, "data-test-id": TEST_IDS.confirmCopyButton })] }), _jsx(FieldCombo, { ...rest, ref: ref, inputMode: 'text', label: label, required: Boolean(label), size: size, placeholder: placeholder, value: value, onChange: onChange, hint: error, validationState: error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default, "data-test-id": TEST_IDS.confirmInput })] }));
 });

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

@@ -35,4 +35,5 @@
   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));
+  min-width:0;
 }

package/dist/esm/style.css

@@ -1,3 +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:auto;
 }
@@ -15,6 +31,22 @@
   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;
 }
@@ -32,6 +64,22 @@
   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));
 }
@@ -72,6 +120,7 @@
   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));
+  min-width:0;
 }
 .root{
   display:grid;

package/dist/esm/types.d.ts

@@ -21,9 +21,7 @@ export type NoteItemProps = {
 type BaseActionModalProps = Pick<ModalCustomProps, 'open' | 'onClose' | 'mode' | 'closeOnPopstate'> & {
     /** Подсказка рядом с заголовком */
     titleTooltip?: ReactNode;
-    /** Состояние с подтверждением через ввод текста */
-    confirmable?: boolean;
-    /** Текст, который нужно ввести для подтверждения */
+    /** Текст, который нужно ввести для подтверждения. Если передан — модалка показывает поле подтверждения */
     confirmText?: string;
     /** Скрыть кнопку копирования текста подтверждения */
     hideConfirmCopyButton?: boolean;