From ea8aaeda9d9868bc73b40cd4e2202c60108802d7 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Thu, 1 Feb 2024 23:14:50 +0300
Subject: [PATCH] fix(Popover): fix rtl placement

---
 src/components/Popover/Popover.tsx                | 15 +++++++++++++--
 .../Popover/__stories__/Popover.stories.tsx       |  1 -
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 4c1091cb96..1d844c9ea7 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -4,7 +4,9 @@ import {Xmark} from '@gravity-ui/icons';
 
 import {Button} from '../Button';
 import {Icon} from '../Icon';
+import type {PopupPlacement} from '../Popup';
 import {Popup} from '../Popup';
+import {useDirection} from '../theme';
 import type {QAProps} from '../types';
 import {warnOnce} from '../utils/warn';
 
@@ -28,7 +30,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
         delayOpening,
         delayClosing,
         behavior = PopoverBehavior.Delayed,
-        placement = ['right', 'bottom'],
+        placement,
         offset = {},
         tooltipOffset,
         tooltipClassName,
@@ -62,6 +64,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
     },
     ref,
 ) {
+    const direction = useDirection();
     const controlRef = React.useRef<HTMLDivElement>(null);
     const closedManually = React.useRef(false);
     const shouldBeOpen = React.useRef(initialOpen);
@@ -86,6 +89,14 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
         shouldBeOpen,
     });
 
+    const popupPlacement = React.useMemo<PopupPlacement>(() => {
+        if (placement) {
+            return placement;
+        }
+
+        return direction === 'rtl' ? ['left', 'bottom'] : ['right', 'bottom'];
+    }, [direction, placement]);
+
     React.useImperativeHandle(
         ref,
         () => ({
@@ -120,7 +131,7 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
             )}
             contentClassName={cnPopover('tooltip-popup-content', tooltipContentClassName)}
             open={isOpen}
-            placement={placement}
+            placement={popupPlacement}
             hasArrow={hasArrow}
             offset={tooltipOffset}
             onClose={anchorRef ? undefined : closeTooltip}
diff --git a/src/components/Popover/__stories__/Popover.stories.tsx b/src/components/Popover/__stories__/Popover.stories.tsx
index 294ffef724..489970c7d1 100644
--- a/src/components/Popover/__stories__/Popover.stories.tsx
+++ b/src/components/Popover/__stories__/Popover.stories.tsx
@@ -20,7 +20,6 @@ export default {
         disabled: false,
         autoclosable: true,
         openOnHover: true,
-        placement: ['right', 'bottom'],
         hasArrow: true,
         hasClose: false,
         theme: 'info',