From 6b0d4014e632a68773ec43000348029b2df354c0 Mon Sep 17 00:00:00 2001
From: Evgeny Alaev <alaev89@yandex-team.ru>
Date: Fri, 14 Feb 2025 19:12:31 +0300
Subject: [PATCH] feat(Popup): add disableTransition property

---
 src/components/Popup/Popup.scss   |  4 ++++
 src/components/Popup/Popup.tsx    | 15 +++++++++++++--
 src/components/Popup/README-ru.md |  1 +
 src/components/Popup/README.md    |  1 +
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
index abce6e899..f919c1999 100644
--- a/src/components/Popup/Popup.scss
+++ b/src/components/Popup/Popup.scss
@@ -30,6 +30,10 @@ $transition-distance: 10px;
         visibility: visible;
     }
 
+    &_disable-transition {
+        transition: none;
+    }
+
     & > :first-child:not(#{$block}__arrow),
     & > #{$block}__arrow + * {
         border-start-start-radius: inherit;
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 28cc837ba..2cecda4b5 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -121,6 +121,8 @@ export interface PopupProps extends DOMProps, AriaLabelingProps, QAProps {
      * Do not use as layer
      */
     disableLayer?: boolean;
+    /** Disables animation of popup appearing/disappearing */
+    disableTransition?: boolean;
     /** ARIA role or special component role (select, combobox) */
     role?: UseRoleProps['role'];
     /** HTML `id` attribute */
@@ -169,6 +171,7 @@ export function Popup({
     children,
     disablePortal = false,
     disableLayer = false,
+    disableTransition = false,
     qa,
     role: roleProp,
     zIndex = 1000,
@@ -259,7 +262,9 @@ export function Popup({
 
     const {getFloatingProps} = useInteractions(floatingInteractions ?? [role, dismiss]);
 
-    const {isMounted, status} = useTransitionStatus(context, {duration: TRANSITION_DURATION});
+    const {isMounted, status} = useTransitionStatus(context, {
+        duration: disableTransition ? 0 : TRANSITION_DURATION,
+    });
     const previousStatus = usePrevious(status);
 
     React.useEffect(() => {
@@ -338,7 +343,13 @@ export function Popup({
                 >
                     <div
                         ref={contentRef}
-                        className={b({open: isMounted}, className)}
+                        className={b(
+                            {
+                                open: isMounted,
+                                'disable-transition': disableTransition,
+                            },
+                            className,
+                        )}
                         style={style}
                         data-qa={qa}
                         {...filterDOMProps(restProps)}
diff --git a/src/components/Popup/README-ru.md b/src/components/Popup/README-ru.md
index c186d2fc6..1f89ea3cb 100644
--- a/src/components/Popup/README-ru.md
+++ b/src/components/Popup/README-ru.md
@@ -96,6 +96,7 @@ LANDING_BLOCK-->
 | disableFocusOut         | Disables triggering close on focusout                                                      |                           `boolean`                           |    `false`    |
 | disableOutsideClick     | Disables triggering close on outside clicks                                                |                           `boolean`                           |    `false`    |
 | disablePortal           | Disables using `Portal` for children                                                       |                           `boolean`                           |    `false`    |
+| disableTransition       | Disables animation of popup appearing/disappearing                                         |                           `boolean`                           |    `false`    |
 | floatingContext         | `Floating UI` context to provide interactions                                              |                     `FloatingRootContext`                     |               |
 | floatingInteractions    | Override `Floating UI` interactions                                                        |                     `Array<ElementProps>`                     |               |
 | floatingMiddlewares     | `Floating UI` middlewares. If set, they will completely overwrite the default middlewares. |                      `Array<Middleware>`                      |               |
diff --git a/src/components/Popup/README.md b/src/components/Popup/README.md
index 4924da2c7..74562a1bb 100644
--- a/src/components/Popup/README.md
+++ b/src/components/Popup/README.md
@@ -96,6 +96,7 @@ LANDING_BLOCK-->
 | disableFocusOut         | Disables triggering close on focusout                                                      |                           `boolean`                           |    `false`    |
 | disableOutsideClick     | Disables triggering close on outside clicks                                                |                           `boolean`                           |    `false`    |
 | disablePortal           | Disables using `Portal` for children                                                       |                           `boolean`                           |    `false`    |
+| disableTransition       | Disables animation of popup appearing/disappearing                                         |                           `boolean`                           |    `false`    |
 | floatingContext         | `Floating UI` context to provide interactions                                              |                     `FloatingRootContext`                     |               |
 | floatingInteractions    | Override `Floating UI` interactions                                                        |                     `Array<ElementProps>`                     |               |
 | floatingMiddlewares     | `Floating UI` middlewares. If set, they will completely overwrite the default middlewares. |                      `Array<Middleware>`                      |               |