From 3d1d50efad678054ae26c2279ea57398fdff30a9 Mon Sep 17 00:00:00 2001
From: Sergey Pavlyuk <sergeypavlyuk@yandex-team.ru>
Date: Fri, 1 Mar 2024 15:21:42 +0300
Subject: [PATCH] feat(Popup): add transition callbacks

---
 src/components/Popup/Popup.tsx | 22 ++++++++++++++++++++++
 src/components/Popup/README.md |  4 ++++
 2 files changed, 26 insertions(+)

diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
index 8ada3b5ef9..058717a7e6 100644
--- a/src/components/Popup/Popup.tsx
+++ b/src/components/Popup/Popup.tsx
@@ -20,6 +20,8 @@ import './Popup.scss';
 export type PopupPlacement = PopperPlacement;
 export type PopupAnchorRef = PopperAnchorRef;
 
+type VoidFunction = () => void;
+
 export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps {
     open?: boolean;
     children?: React.ReactNode;
@@ -32,6 +34,10 @@ export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps,
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onTransitionEnter?: VoidFunction;
+    onTransitionEntered?: VoidFunction;
+    onTransitionExit?: VoidFunction;
+    onTransitionExited?: VoidFunction;
     disablePortal?: boolean;
     container?: HTMLElement;
     contentClassName?: string;
@@ -71,6 +77,10 @@ export function Popup({
     onMouseLeave,
     onFocus,
     onBlur,
+    onTransitionEnter,
+    onTransitionEntered,
+    onTransitionExit,
+    onTransitionExited,
     disablePortal,
     container,
     strategy,
@@ -132,6 +142,18 @@ export function Popup({
                 mountOnEnter={!keepMounted}
                 unmountOnExit={!keepMounted}
                 appear={true}
+                onEnter={() => {
+                    onTransitionEnter?.();
+                }}
+                onEntered={() => {
+                    onTransitionEntered?.();
+                }}
+                onExit={() => {
+                    onTransitionExit?.();
+                }}
+                onExited={() => {
+                    onTransitionExited?.();
+                }}
             >
                 <div
                     ref={handleRef}
diff --git a/src/components/Popup/README.md b/src/components/Popup/README.md
index 0892211ed2..9119578f6f 100644
--- a/src/components/Popup/README.md
+++ b/src/components/Popup/README.md
@@ -110,6 +110,10 @@ LANDING_BLOCK-->
 | onMouseEnter         | `mouseenter` event handler                                                         |                `Function`                |                 |
 | onMouseLeave         | `mouseleave` event handler                                                         |                `Function`                |                 |
 | onOutsideClick       | Outside click event handler                                                        |                `Function`                |                 |
+| onTransitionEnter    | On start open popup animation                                                      |                `Function`                |                 |
+| onTransitionEntered  | On finish open popup animation                                                     |                `Function`                |                 |
+| onTransitionExit     | On start close popup animation                                                     |                `Function`                |                 |
+| onTransitionExited   | On finish close popup animation                                                    |                `Function`                |                 |
 | open                 | Manages `Popup` visibility                                                         |                `boolean`                 |     `false`     |
 | placement            | `Popper.js` placement                                                              | `PopupPlacement` `Array<PopupPlacement>` |                 |
 | qa                   | Test attribute (`data-qa`)                                                         |                 `string`                 |                 |