fix(Popover): fix rtl placement

gravity-ui · Feb 1, 2024 · ea8aaed · ea8aaed
1 parent 304054d
commit ea8aaed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -20,7 +20,6 @@ export default {
         disabled: false,
         autoclosable: true,
         openOnHover: true,
-        placement: ['right', 'bottom'],
         hasArrow: true,
         hasClose: false,
         theme: 'info',