@snack-uikit/modal 0.19.15-preview-f9bb03b8.0 → 0.20.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.20.1 (2026-06-24)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.19.19]($PUBLIC_PROJECT_URL/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/link@0.18.2]($PUBLIC_PROJECT_URL/blob/master/packages/link/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.18.14]($PUBLIC_PROJECT_URL/blob/master/packages/tooltip/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.13]($PUBLIC_PROJECT_URL/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.20.0 (2026-06-16)
+
+
+### Features
+
+* **SITE-10721:** add animation for modal ([13f4370](https://github.com/cloud-ru-tech/snack-uikit/commit/13f4370740d84c4d246c9adc512ecc7ec76e1486))
+
+
+
+
+
 ## 0.19.14 (2026-05-18)
 
 ### Only dependencies have been changed

package/README.md

@@ -147,6 +147,8 @@ function Example() {
 | size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер модального окна |
 | className | `string` | - | CSS-класс |
 | closeOnPopstate | `boolean` | - | Закрывать при переходе по истории браузера |
+| animationDuration | `number` | - | Длительность анимации открытия/закрытия в миллисекундах. Если не передан — анимации нет. |
+| animationDurationPercent | `number` | 0.4 | Разница в процентах между появлением модального окна и оверлей можно ставить от 0 до 1 |
 ## ModalCustom.Header
 ### Props
 | name | type | default value | description |
@@ -183,6 +185,8 @@ function Example() {
 | mode | enum Mode: `"regular"`, `"aggressive"`, `"forced"` | regular | Режим отображения модального окна: <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc` <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части |
 | className | `string` | - | CSS-класс |
 | closeOnPopstate | `boolean` | - | Закрывать при переходе по истории браузера |
+| animationDuration | `number` | - | Длительность анимации открытия/закрытия в миллисекундах. Если не передан — анимации нет. |
+| animationDurationPercent | `number` | - | Разница в процентах между появлением модального окна и оверлей можно ставить от 0 до 1 |
 | titleTooltip | `ReactNode` | - | Всплывающая подсказка для заголовка |
 | subtitle | `string` | - | Подзаголовок |
 | content | `ReactNode` | - | Содержимое модального окна |

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

@@ -26,8 +26,18 @@ export type ModalCustomProps = WithSupportProps<{
     children: ReactNode;
     /** Закрывать при переходе по истории браузера */
     closeOnPopstate?: boolean;
+    /**
+     * Длительность анимации открытия/закрытия в миллисекундах.
+     * Если не передан — анимации нет.
+     */
+    animationDuration?: number;
+    /**
+     * Разница в процентах между появлением модального окна и оверлей
+     * можно ставить от 0 до 1
+     */
+    animationDurationPercent?: number;
 }>;
-export declare function ModalCustom({ open, onClose, size, mode, children, className, closeOnPopstate, ...rest }: ModalCustomProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ModalCustom({ open, onClose, size, mode, children, className, closeOnPopstate, animationDuration, animationDurationPercent, ...rest }: ModalCustomProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ModalCustom {
     type HeaderProps = ModalHeaderProps;
     type BodyProps = ModalBodyProps;

package/dist/cjs/components/ModalCustom/ModalCustom.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ModalCustom = ModalCustom;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const react_modal_1 = __importDefault(require("react-modal"));
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
@@ -33,9 +34,27 @@ function ModalCustom(_a) {
       mode = constants_1.MODE.Regular,
       children,
       className,
-      closeOnPopstate
+      closeOnPopstate,
+      animationDuration,
+      animationDurationPercent = 0.4
     } = _a,
-    rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className", "closeOnPopstate"]);
+    rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className", "closeOnPopstate", "animationDuration", "animationDurationPercent"]);
+  const animDuration = animationDuration !== null && animationDuration !== void 0 ? animationDuration : 0;
+  const isAnimated = animDuration > 0;
+  const [shouldRender, setShouldRender] = (0, react_1.useState)(open);
+  const [animationState, setAnimationState] = (0, react_1.useState)(constants_1.ANIMATION_STATE.Entering);
+  (0, react_1.useEffect)(() => {
+    if (!isAnimated) return;
+    if (open) {
+      setShouldRender(true);
+      setAnimationState(constants_1.ANIMATION_STATE.Entering);
+    } else {
+      setAnimationState(constants_1.ANIMATION_STATE.Exiting);
+      const closeTotalDuration = animDuration + Math.round(animDuration * animationDurationPercent);
+      const timer = setTimeout(() => setShouldRender(false), closeTotalDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, isAnimated, animDuration, animationDurationPercent]);
   const handleCloseButtonClick = () => {
     onClose();
   };
@@ -48,9 +67,15 @@ function ModalCustom(_a) {
   (0, utils_1.useModalOpenState)(open, () => hasCloseButton && onClose(), {
     closeOnPopstate
   });
-  if (!open) {
+  const isRendered = isAnimated ? shouldRender : open;
+  if (!isRendered) {
     return null;
   }
+  const animDelay = Math.round(animDuration * animationDurationPercent);
+  const contentStyle = isAnimated ? {
+    '--_modal-anim-duration': `${animDuration}ms`,
+    '--_modal-anim-delay': `${animDelay}ms`
+  } : undefined;
   return (0, jsx_runtime_1.jsxs)(react_modal_1.default, {
     data: Object.assign(Object.assign({}, (0, utils_2.getDataTestAttributes)(rest)), {
       size
@@ -61,9 +86,17 @@ function ModalCustom(_a) {
     overlayElement: (_, content) => (0, jsx_runtime_1.jsx)(helperComponents_1.OverlayElement, {
       blur: [constants_1.MODE.Forced, constants_1.MODE.Aggressive].includes(mode),
       content: content,
-      onClose: handleClose
+      onClose: handleClose,
+      animationDuration: isAnimated ? animDuration : undefined,
+      animationState: isAnimated ? animationState : undefined
+    }),
+    className: (0, classnames_1.default)(styles_module_scss_1.default.modal, className, isAnimated && {
+      [styles_module_scss_1.default.entering]: animationState === constants_1.ANIMATION_STATE.Entering,
+      [styles_module_scss_1.default.exiting]: animationState === constants_1.ANIMATION_STATE.Exiting
     }),
-    className: (0, classnames_1.default)(styles_module_scss_1.default.modal, className),
+    style: contentStyle ? {
+      content: contentStyle
+    } : undefined,
     children: [hasCloseButton && (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.headerElements,
       children: (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClose, {

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

@@ -1,3 +1,27 @@
+@keyframes modal-blur-rise{
+  from{
+    transform:translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity:0;
+    filter:blur(4px);
+  }
+  to{
+    transform:translate(-50%, -50%);
+    opacity:1;
+    filter:blur(0);
+  }
+}
+@keyframes modal-blur-fall{
+  from{
+    transform:translate(-50%, -50%);
+    opacity:1;
+    filter:blur(0);
+  }
+  to{
+    transform:translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity:0;
+    filter:blur(4px);
+  }
+}
 .modal{
   position:fixed;
   top:50%;
@@ -30,6 +54,14 @@
   width:var(--size-modal-width-l, 1872px);
 }
 
+.entering{
+  animation:modal-blur-rise var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) var(--_modal-anim-delay, 0ms) both;
+}
+
+.exiting{
+  animation:modal-blur-fall var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
 .headerElements{
   padding-top:var(--space-modal-header-elements-top, 16px);
   padding-right:var(--space-modal-header-elements-side, 16px);

package/dist/cjs/constants.d.ts

@@ -17,6 +17,10 @@ export declare const CONTENT_ALIGN: {
     readonly Default: "default";
     readonly Center: "center";
 };
+export declare const ANIMATION_STATE: {
+    readonly Entering: "entering";
+    readonly Exiting: "exiting";
+};
 export declare const TEST_IDS: {
     overlay: string;
     closeButton: string;

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEST_IDS = exports.CONTENT_ALIGN = exports.ALIGN = exports.MODE = exports.SIZE = void 0;
+exports.TEST_IDS = exports.ANIMATION_STATE = exports.CONTENT_ALIGN = exports.ALIGN = exports.MODE = exports.SIZE = void 0;
 exports.SIZE = {
   S: 's',
   M: 'm',
@@ -23,6 +23,10 @@ exports.CONTENT_ALIGN = {
   Default: 'default',
   Center: 'center'
 };
+exports.ANIMATION_STATE = {
+  Entering: 'entering',
+  Exiting: 'exiting'
+};
 exports.TEST_IDS = {
   overlay: 'modal__overlay',
   closeButton: 'modal__close-button',

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

@@ -1,7 +1,10 @@
 import { ReactElement } from 'react';
+import { AnimationState } from '../../types';
 export type OverlayElementProps = {
     onClose(): void;
     content: ReactElement;
     blur?: boolean;
+    animationDuration?: number;
+    animationState?: AnimationState;
 };
-export declare function OverlayElement({ onClose, content, blur }: OverlayElementProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverlayElement({ onClose, content, blur, animationDuration, animationState, }: OverlayElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/OverlayElement/OverlayElement.js

@@ -10,22 +10,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OverlayElement = OverlayElement;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function OverlayElement(_ref) {
   let {
     onClose,
     content,
-    blur = false
+    blur = false,
+    animationDuration,
+    animationState
   } = _ref;
   const handleClick = e => {
     e.stopPropagation();
     onClose();
   };
+  // Backdrop появляется сразу при открытии (без задержки).
+  // При закрытии: ждет пока модалка исчезнет (exit-delay = 40% от длительности диалога).
+  // Длительность backdrop = 62.5% от длительности диалога (пропорция 250ms / 400ms из пресета).
+  const backdropDuration = animationDuration !== undefined ? Math.round(animationDuration * 0.625) : undefined;
+  const exitDelay = animationDuration !== undefined ? Math.round(animationDuration * 0.4) : 0;
+  const overlayStyle = animationDuration !== undefined ? {
+    '--_modal-anim-duration': `${backdropDuration}ms`,
+    '--_modal-anim-exit-delay': `${exitDelay}ms`
+  } : undefined;
   return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
     children: [(0, jsx_runtime_1.jsx)("div", {
-      className: styles_module_scss_1.default.modalOverlay,
+      className: (0, classnames_1.default)(styles_module_scss_1.default.modalOverlay, animationState && {
+        [styles_module_scss_1.default.overlayEntering]: animationState === constants_1.ANIMATION_STATE.Entering,
+        [styles_module_scss_1.default.overlayExiting]: animationState === constants_1.ANIMATION_STATE.Exiting
+      }),
       "data-blur": blur || undefined,
+      style: overlayStyle,
       onClick: handleClick,
       "data-test-id": constants_1.TEST_IDS.overlay
     }), content]

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

@@ -1,3 +1,19 @@
+@keyframes backdrop-fade-in{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+@keyframes backdrop-fade-out{
+  from{
+    opacity:1;
+  }
+  to{
+    opacity:0;
+  }
+}
 .modalOverlay{
   position:fixed;
   top:0;
@@ -9,4 +25,12 @@
 }
 .modalOverlay[data-blur]{
   backdrop-filter:blur(var(--background-blur-background-blur, 16px));
+}
+
+.overlayEntering{
+  animation:backdrop-fade-in var(--_modal-anim-duration, 250ms) ease-out both;
+}
+
+.overlayExiting{
+  animation:backdrop-fade-out var(--_modal-anim-duration, 250ms) ease-out var(--_modal-anim-exit-delay, 0ms) both;
 }

package/dist/cjs/types.d.ts

@@ -1,6 +1,7 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+import { ALIGN, ANIMATION_STATE, CONTENT_ALIGN, MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
 export type Mode = ValueOf<typeof MODE>;
 export type Align = ValueOf<typeof ALIGN>;
 export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;
+export type AnimationState = ValueOf<typeof ANIMATION_STATE>;

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

@@ -26,8 +26,18 @@ export type ModalCustomProps = WithSupportProps<{
     children: ReactNode;
     /** Закрывать при переходе по истории браузера */
     closeOnPopstate?: boolean;
+    /**
+     * Длительность анимации открытия/закрытия в миллисекундах.
+     * Если не передан — анимации нет.
+     */
+    animationDuration?: number;
+    /**
+     * Разница в процентах между появлением модального окна и оверлей
+     * можно ставить от 0 до 1
+     */
+    animationDurationPercent?: number;
 }>;
-export declare function ModalCustom({ open, onClose, size, mode, children, className, closeOnPopstate, ...rest }: ModalCustomProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ModalCustom({ open, onClose, size, mode, children, className, closeOnPopstate, animationDuration, animationDurationPercent, ...rest }: ModalCustomProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ModalCustom {
     type HeaderProps = ModalHeaderProps;
     type BodyProps = ModalBodyProps;

package/dist/esm/components/ModalCustom/ModalCustom.js

@@ -11,14 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useEffect, useState } from 'react';
 import RCModal from 'react-modal';
 import { isBrowser, useModalOpenState } from '@snack-uikit/utils';
-import { MODE, SIZE } from '../../constants';
+import { ANIMATION_STATE, MODE, SIZE } from '../../constants';
 import { ButtonClose, ModalBody, ModalFooter, ModalHeader, OverlayElement, } from '../../helperComponents';
 import styles from './styles.module.css';
 import { getDataTestAttributes } from './utils';
 export function ModalCustom(_a) {
-    var { open, onClose, size = SIZE.S, mode = MODE.Regular, children, className, closeOnPopstate } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className", "closeOnPopstate"]);
+    var { open, onClose, size = SIZE.S, mode = MODE.Regular, children, className, closeOnPopstate, animationDuration, animationDurationPercent = 0.4 } = _a, rest = __rest(_a, ["open", "onClose", "size", "mode", "children", "className", "closeOnPopstate", "animationDuration", "animationDurationPercent"]);
+    const animDuration = animationDuration !== null && animationDuration !== void 0 ? animationDuration : 0;
+    const isAnimated = animDuration > 0;
+    const [shouldRender, setShouldRender] = useState(open);
+    const [animationState, setAnimationState] = useState(ANIMATION_STATE.Entering);
+    useEffect(() => {
+        if (!isAnimated)
+            return;
+        if (open) {
+            setShouldRender(true);
+            setAnimationState(ANIMATION_STATE.Entering);
+        }
+        else {
+            setAnimationState(ANIMATION_STATE.Exiting);
+            const closeTotalDuration = animDuration + Math.round(animDuration * animationDurationPercent);
+            const timer = setTimeout(() => setShouldRender(false), closeTotalDuration);
+            return () => clearTimeout(timer);
+        }
+    }, [open, isAnimated, animDuration, animationDurationPercent]);
     const handleCloseButtonClick = () => {
         onClose();
     };
@@ -31,10 +50,21 @@ export function ModalCustom(_a) {
     useModalOpenState(open, () => hasCloseButton && onClose(), {
         closeOnPopstate,
     });
-    if (!open) {
+    const isRendered = isAnimated ? shouldRender : open;
+    if (!isRendered) {
         return null;
     }
-    return (_jsxs(RCModal, { data: Object.assign(Object.assign({}, getDataTestAttributes(rest)), { size }), isOpen: true, onRequestClose: handleClose, appElement: isBrowser() ? document.body : undefined, overlayElement: (_, content) => (_jsx(OverlayElement, { blur: [MODE.Forced, MODE.Aggressive].includes(mode), content: content, onClose: handleClose })), className: cn(styles.modal, className), children: [hasCloseButton && (_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: handleCloseButtonClick }) })), children] }));
+    const animDelay = Math.round(animDuration * animationDurationPercent);
+    const contentStyle = isAnimated
+        ? {
+            '--_modal-anim-duration': `${animDuration}ms`,
+            '--_modal-anim-delay': `${animDelay}ms`,
+        }
+        : undefined;
+    return (_jsxs(RCModal, { data: Object.assign(Object.assign({}, getDataTestAttributes(rest)), { size }), isOpen: true, onRequestClose: handleClose, appElement: isBrowser() ? document.body : undefined, overlayElement: (_, content) => (_jsx(OverlayElement, { blur: [MODE.Forced, MODE.Aggressive].includes(mode), content: content, onClose: handleClose, animationDuration: isAnimated ? animDuration : undefined, animationState: isAnimated ? animationState : undefined })), className: cn(styles.modal, className, isAnimated && {
+            [styles.entering]: animationState === ANIMATION_STATE.Entering,
+            [styles.exiting]: animationState === ANIMATION_STATE.Exiting,
+        }), style: contentStyle ? { content: contentStyle } : undefined, children: [hasCloseButton && (_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: handleCloseButtonClick }) })), children] }));
 }
 (function (ModalCustom) {
     ModalCustom.Header = ModalHeader;

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

@@ -1,3 +1,27 @@
+@keyframes modal-blur-rise{
+  from{
+    transform:translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity:0;
+    filter:blur(4px);
+  }
+  to{
+    transform:translate(-50%, -50%);
+    opacity:1;
+    filter:blur(0);
+  }
+}
+@keyframes modal-blur-fall{
+  from{
+    transform:translate(-50%, -50%);
+    opacity:1;
+    filter:blur(0);
+  }
+  to{
+    transform:translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity:0;
+    filter:blur(4px);
+  }
+}
 .modal{
   position:fixed;
   top:50%;
@@ -30,6 +54,14 @@
   width:var(--size-modal-width-l, 1872px);
 }
 
+.entering{
+  animation:modal-blur-rise var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) var(--_modal-anim-delay, 0ms) both;
+}
+
+.exiting{
+  animation:modal-blur-fall var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
 .headerElements{
   padding-top:var(--space-modal-header-elements-top, 16px);
   padding-right:var(--space-modal-header-elements-side, 16px);

package/dist/esm/constants.d.ts

@@ -17,6 +17,10 @@ export declare const CONTENT_ALIGN: {
     readonly Default: "default";
     readonly Center: "center";
 };
+export declare const ANIMATION_STATE: {
+    readonly Entering: "entering";
+    readonly Exiting: "exiting";
+};
 export declare const TEST_IDS: {
     overlay: string;
     closeButton: string;

package/dist/esm/constants.js

@@ -17,6 +17,10 @@ export const CONTENT_ALIGN = {
     Default: 'default',
     Center: 'center',
 };
+export const ANIMATION_STATE = {
+    Entering: 'entering',
+    Exiting: 'exiting',
+};
 export const TEST_IDS = {
     overlay: 'modal__overlay',
     closeButton: 'modal__close-button',

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

@@ -1,7 +1,10 @@
 import { ReactElement } from 'react';
+import { AnimationState } from '../../types';
 export type OverlayElementProps = {
     onClose(): void;
     content: ReactElement;
     blur?: boolean;
+    animationDuration?: number;
+    animationState?: AnimationState;
 };
-export declare function OverlayElement({ onClose, content, blur }: OverlayElementProps): import("react/jsx-runtime").JSX.Element;
+export declare function OverlayElement({ onClose, content, blur, animationDuration, animationState, }: OverlayElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/OverlayElement/OverlayElement.js

@@ -1,10 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { TEST_IDS } from '../../constants';
+import cn from 'classnames';
+import { ANIMATION_STATE, TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
-export function OverlayElement({ onClose, content, blur = false }) {
+export function OverlayElement({ onClose, content, blur = false, animationDuration, animationState, }) {
     const handleClick = e => {
         e.stopPropagation();
         onClose();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.modalOverlay, "data-blur": blur || undefined, onClick: handleClick, "data-test-id": TEST_IDS.overlay }), content] }));
+    // Backdrop появляется сразу при открытии (без задержки).
+    // При закрытии: ждет пока модалка исчезнет (exit-delay = 40% от длительности диалога).
+    // Длительность backdrop = 62.5% от длительности диалога (пропорция 250ms / 400ms из пресета).
+    const backdropDuration = animationDuration !== undefined ? Math.round(animationDuration * 0.625) : undefined;
+    const exitDelay = animationDuration !== undefined ? Math.round(animationDuration * 0.4) : 0;
+    const overlayStyle = animationDuration !== undefined
+        ? {
+            '--_modal-anim-duration': `${backdropDuration}ms`,
+            '--_modal-anim-exit-delay': `${exitDelay}ms`,
+        }
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.modalOverlay, animationState && {
+                    [styles.overlayEntering]: animationState === ANIMATION_STATE.Entering,
+                    [styles.overlayExiting]: animationState === ANIMATION_STATE.Exiting,
+                }), "data-blur": blur || undefined, style: overlayStyle, onClick: handleClick, "data-test-id": TEST_IDS.overlay }), content] }));
 }

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

@@ -1,3 +1,19 @@
+@keyframes backdrop-fade-in{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+@keyframes backdrop-fade-out{
+  from{
+    opacity:1;
+  }
+  to{
+    opacity:0;
+  }
+}
 .modalOverlay{
   position:fixed;
   top:0;
@@ -9,4 +25,12 @@
 }
 .modalOverlay[data-blur]{
   backdrop-filter:blur(var(--background-blur-background-blur, 16px));
+}
+
+.overlayEntering{
+  animation:backdrop-fade-in var(--_modal-anim-duration, 250ms) ease-out both;
+}
+
+.overlayExiting{
+  animation:backdrop-fade-out var(--_modal-anim-duration, 250ms) ease-out var(--_modal-anim-exit-delay, 0ms) both;
 }

package/dist/esm/types.d.ts

@@ -1,6 +1,7 @@
 import { ValueOf } from '@snack-uikit/utils';
-import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+import { ALIGN, ANIMATION_STATE, CONTENT_ALIGN, MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
 export type Mode = ValueOf<typeof MODE>;
 export type Align = ValueOf<typeof ALIGN>;
 export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;
+export type AnimationState = ValueOf<typeof ANIMATION_STATE>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Modal",
-  "version": "0.19.15-preview-f9bb03b8.0",
+  "version": "0.20.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,14 +36,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.19-preview-f9bb03b8.0",
+    "@snack-uikit/button": "0.19.19",
     "@snack-uikit/icon-predefined": "0.7.12",
     "@snack-uikit/icons": "0.27.7",
-    "@snack-uikit/link": "0.18.2-preview-f9bb03b8.0",
+    "@snack-uikit/link": "0.18.2",
     "@snack-uikit/loaders": "0.9.11",
     "@snack-uikit/scroll": "0.11.0",
-    "@snack-uikit/tooltip": "0.18.14-preview-f9bb03b8.0",
-    "@snack-uikit/truncate-string": "0.7.13-preview-f9bb03b8.0",
+    "@snack-uikit/tooltip": "0.18.14",
+    "@snack-uikit/truncate-string": "0.7.13",
     "@snack-uikit/typography": "0.8.13",
     "@snack-uikit/utils": "4.0.2",
     "classnames": "2.5.1",
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react-modal": "3.16.0"
   },
-  "gitHead": "f8d6d62803196605e87a4ac72c7a7796d13feee0"
+  "gitHead": "dfbff14ac89d87d7a86abd70d307e92bf11906cb"
 }

package/src/components/ModalCustom/ModalCustom.tsx

@@ -1,10 +1,10 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode, useEffect, useState } from 'react';
 import RCModal from 'react-modal';
 
 import { isBrowser, useModalOpenState, WithSupportProps } from '@snack-uikit/utils';
 
-import { MODE, SIZE } from '../../constants';
+import { ANIMATION_STATE, MODE, SIZE } from '../../constants';
 import {
   ButtonClose,
   ModalBody,
@@ -15,7 +15,7 @@ import {
   ModalHeaderProps,
   OverlayElement,
 } from '../../helperComponents';
-import { Mode, Size } from '../../types';
+import { AnimationState, Mode, Size } from '../../types';
 import styles from './styles.module.scss';
 import { getDataTestAttributes } from './utils';
 
@@ -43,6 +43,16 @@ export type ModalCustomProps = WithSupportProps<{
   children: ReactNode;
   /** Закрывать при переходе по истории браузера */
   closeOnPopstate?: boolean;
+  /**
+   * Длительность анимации открытия/закрытия в миллисекундах.
+   * Если не передан — анимации нет.
+   */
+  animationDuration?: number;
+  /**
+   * Разница в процентах между появлением модального окна и оверлей
+   * можно ставить от 0 до 1
+   */
+  animationDurationPercent?: number;
 }>;
 
 export function ModalCustom({
@@ -53,8 +63,30 @@ export function ModalCustom({
   children,
   className,
   closeOnPopstate,
+  animationDuration,
+  animationDurationPercent = 0.4,
   ...rest
 }: ModalCustomProps) {
+  const animDuration = animationDuration ?? 0;
+  const isAnimated = animDuration > 0;
+
+  const [shouldRender, setShouldRender] = useState(open);
+  const [animationState, setAnimationState] = useState<AnimationState>(ANIMATION_STATE.Entering);
+
+  useEffect(() => {
+    if (!isAnimated) return;
+
+    if (open) {
+      setShouldRender(true);
+      setAnimationState(ANIMATION_STATE.Entering);
+    } else {
+      setAnimationState(ANIMATION_STATE.Exiting);
+      const closeTotalDuration = animDuration + Math.round(animDuration * animationDurationPercent);
+      const timer = setTimeout(() => setShouldRender(false), closeTotalDuration);
+      return () => clearTimeout(timer);
+    }
+  }, [open, isAnimated, animDuration, animationDurationPercent]);
+
   const handleCloseButtonClick = () => {
     onClose();
   };
@@ -71,10 +103,20 @@ export function ModalCustom({
     closeOnPopstate,
   });
 
-  if (!open) {
+  const isRendered = isAnimated ? shouldRender : open;
+
+  if (!isRendered) {
     return null;
   }
 
+  const animDelay = Math.round(animDuration * animationDurationPercent);
+  const contentStyle: CSSProperties | undefined = isAnimated
+    ? ({
+        '--_modal-anim-duration': `${animDuration}ms`,
+        '--_modal-anim-delay': `${animDelay}ms`,
+      } as CSSProperties)
+    : undefined;
+
   return (
     <RCModal
       data={{ ...getDataTestAttributes(rest), size }}
@@ -86,9 +128,19 @@ export function ModalCustom({
           blur={([MODE.Forced, MODE.Aggressive] as Mode[]).includes(mode)}
           content={content}
           onClose={handleClose}
+          animationDuration={isAnimated ? animDuration : undefined}
+          animationState={isAnimated ? animationState : undefined}
         />
       )}
-      className={cn(styles.modal, className)}
+      className={cn(
+        styles.modal,
+        className,
+        isAnimated && {
+          [styles.entering]: animationState === ANIMATION_STATE.Entering,
+          [styles.exiting]: animationState === ANIMATION_STATE.Exiting,
+        },
+      )}
+      style={contentStyle ? { content: contentStyle } : undefined}
     >
       {hasCloseButton && (
         <div className={styles.headerElements}>

package/src/components/ModalCustom/styles.module.scss

@@ -2,6 +2,34 @@
 
 $sizes: 's', 'm', 'l';
 
+@keyframes modal-blur-rise {
+  from {
+    transform: translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity: 0;
+    filter: blur(4px);
+  }
+
+  to {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+@keyframes modal-blur-fall {
+  from {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  to {
+    transform: translate(-50%, calc(-50% + 3px)) scale(0.97);
+    opacity: 0;
+    filter: blur(4px);
+  }
+}
+
 .modal {
   position: fixed;
   top: 50%;
@@ -26,6 +54,15 @@ $sizes: 's', 'm', 'l';
       @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'window', $size);
     }
   }
+
+}
+
+.entering {
+  animation: modal-blur-rise var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) var(--_modal-anim-delay, 0ms) both;
+}
+
+.exiting {
+  animation: modal-blur-fall var(--_modal-anim-duration, 400ms) cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 
 .headerElements {

package/src/constants.ts

@@ -21,6 +21,11 @@ export const CONTENT_ALIGN = {
   Center: 'center',
 } as const;
 
+export const ANIMATION_STATE = {
+  Entering: 'entering',
+  Exiting: 'exiting',
+} as const;
+
 export const TEST_IDS = {
   overlay: 'modal__overlay',
   closeButton: 'modal__close-button',

package/src/helperComponents/OverlayElement/OverlayElement.tsx

@@ -1,26 +1,57 @@
-import { MouseEventHandler, ReactElement } from 'react';
+import cn from 'classnames';
+import { CSSProperties, MouseEventHandler, ReactElement } from 'react';
 
-import { TEST_IDS } from '../../constants';
+import { ANIMATION_STATE, TEST_IDS } from '../../constants';
+import { AnimationState } from '../../types';
 import styles from './styles.module.scss';
 
 export type OverlayElementProps = {
   onClose(): void;
   content: ReactElement;
   blur?: boolean;
+  animationDuration?: number;
+  animationState?: AnimationState;
 };
 
-export function OverlayElement({ onClose, content, blur = false }: OverlayElementProps) {
+export function OverlayElement({
+  onClose,
+  content,
+  blur = false,
+  animationDuration,
+  animationState,
+}: OverlayElementProps) {
   const handleClick: MouseEventHandler = e => {
     e.stopPropagation();
     onClose();
   };
 
+  // Backdrop появляется сразу при открытии (без задержки).
+  // При закрытии: ждет пока модалка исчезнет (exit-delay = 40% от длительности диалога).
+  // Длительность backdrop = 62.5% от длительности диалога (пропорция 250ms / 400ms из пресета).
+  const backdropDuration = animationDuration !== undefined ? Math.round(animationDuration * 0.625) : undefined;
+  const exitDelay = animationDuration !== undefined ? Math.round(animationDuration * 0.4) : 0;
+
+  const overlayStyle: CSSProperties | undefined =
+    animationDuration !== undefined
+      ? ({
+          '--_modal-anim-duration': `${backdropDuration}ms`,
+          '--_modal-anim-exit-delay': `${exitDelay}ms`,
+        } as CSSProperties)
+      : undefined;
+
   return (
     <>
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
-        className={styles.modalOverlay}
+        className={cn(
+          styles.modalOverlay,
+          animationState && {
+            [styles.overlayEntering]: animationState === ANIMATION_STATE.Entering,
+            [styles.overlayExiting]: animationState === ANIMATION_STATE.Exiting,
+          },
+        )}
         data-blur={blur || undefined}
+        style={overlayStyle}
         onClick={handleClick}
         data-test-id={TEST_IDS.overlay}
       />

package/src/helperComponents/OverlayElement/styles.module.scss

@@ -1,5 +1,15 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
 
+@keyframes backdrop-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes backdrop-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
 .modalOverlay {
   position: fixed;
   top: 0;
@@ -15,3 +25,11 @@
     backdrop-filter: blur(styles-tokens-modal.simple-var(styles-tokens-modal.$background-blur-background-blur));
   }
 }
+
+.overlayEntering {
+  animation: backdrop-fade-in var(--_modal-anim-duration, 250ms) ease-out both;
+}
+
+.overlayExiting {
+  animation: backdrop-fade-out var(--_modal-anim-duration, 250ms) ease-out var(--_modal-anim-exit-delay, 0ms) both;
+}

package/src/types.ts

@@ -1,6 +1,6 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+import { ALIGN, ANIMATION_STATE, CONTENT_ALIGN, MODE, SIZE } from './constants';
 
 export type Size = ValueOf<typeof SIZE>;
 
@@ -9,3 +9,5 @@ export type Mode = ValueOf<typeof MODE>;
 export type Align = ValueOf<typeof ALIGN>;
 
 export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;
+
+export type AnimationState = ValueOf<typeof ANIMATION_STATE>;