fix(components): correct Tooltip and Popover arrow alignment (DS-5146)

packages/components/src/components/Popover/Popover.test.tsx

@@ -1,8 +1,8 @@
 import { createRef } from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Button } from '../Button';
 
@@ -13,6 +13,10 @@ describe('Popover', () => {
     vi.clearAllMocks();
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   const onOpenChange = vi.fn();
 
   const baseProps = { 'data-testid': 'root', onOpenChange };
@@ -64,6 +68,98 @@ describe('Popover', () => {
     expect(getRoot()).not.toHaveAttribute('data-arrow');
   });
 
+  it('should align the arrow for a compound placement', async () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function (this: HTMLElement) {
+        if (this.dataset.testid === 'root') {
+          return {
+            bottom: 64,
+            height: 64,
+            left: 0,
+            right: 200,
+            top: 0,
+            width: 200,
+            x: 0,
+            y: 0,
+          } as DOMRect;
+        }
+
+        if (this.tagName === 'BUTTON') {
+          return {
+            bottom: 32,
+            height: 32,
+            left: 0,
+            right: 100,
+            top: 0,
+            width: 100,
+            x: 0,
+            y: 0,
+          } as DOMRect;
+        }
+
+        return {
+          bottom: 0,
+          height: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          width: 0,
+          x: 0,
+          y: 0,
+        } as DOMRect;
+      }
+    );
+
+    const { rerender } = render(
+      <Popover
+        {...baseProps}
+        isOpen
+        placement="top start"
+        control={(props) => <Button {...props} />}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getRoot().querySelector('[role="presentation"]')).toHaveStyle({
+        left: '20px',
+      });
+    });
+
+    rerender(
+      <Popover
+        {...baseProps}
+        isOpen
+        placement="top start"
+        arrowBoundaryOffset={24}
+        control={(props) => <Button {...props} />}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getRoot().querySelector('[role="presentation"]')).toHaveStyle({
+        left: '24px',
+      });
+    });
+  });
+
+  it('should keep arrow slot styles as the highest priority', async () => {
+    render(
+      <Popover
+        {...baseProps}
+        isOpen
+        placement="top start"
+        slotProps={{ arrow: { style: { left: 32 } } }}
+        control={(props) => <Button {...props} />}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getRoot().querySelector('[role="presentation"]')).toHaveStyle({
+        left: '32px',
+      });
+    });
+  });
+
   it('should apply the focus trap', async () => {
     render(
       <>

packages/components/src/components/Popover/PopoverInner.tsx

@@ -1,7 +1,13 @@
 import type { ComponentRef, CSSProperties, FC } from 'react';
 import { useRef } from 'react';
 
-import { clsx, mergeProps, useBoolean, useDOMRef } from '@koobiq/react-core';
+import {
+  clsx,
+  useLocale,
+  mergeProps,
+  useBoolean,
+  useDOMRef,
+} from '@koobiq/react-core';
 import {
   Overlay,
   useOverlayTrigger,
@@ -10,6 +16,7 @@ import {
 import { Transition } from 'react-transition-group';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
+import { useOverlayArrowStyle } from '../../hooks/useOverlayArrowStyle';
 import { Dialog } from '../Dialog';
 
 import s from './Popover.module.css';
@@ -48,6 +55,8 @@ export const PopoverInner: FC<PopoverInnerProps> = (props) => {
   const domRef = useDOMRef<ComponentRef<'div'>>(popoverRef);
 
   const controlRef = useRef<HTMLButtonElement | null>(null);
+  const targetRef = anchorRef || controlRef;
+  const { direction } = useLocale();
 
   const openState = state.isOpen;
 
@@ -75,15 +84,25 @@ export const PopoverInner: FC<PopoverInnerProps> = (props) => {
       maxHeight: maxBlockSize,
       placement: placementProp,
       shouldCloseOnInteractOutside,
-      triggerRef: anchorRef || controlRef,
+      triggerRef: targetRef,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown,
     },
     { ...state, isOpen: openState || opened }
   );
 
+  const arrowStyle = useOverlayArrowStyle({
+    direction,
+    placement: placementProp,
+    arrowBoundaryOffset,
+    arrowStyle: arrowPropsCommon.style,
+    isEnabled: showArrow,
+    overlayRef: domRef,
+    targetRef,
+  });
+
   const arrowProps = mergeProps(
     { className: s.arrow },
-    arrowPropsCommon,
+    { ...arrowPropsCommon, style: arrowStyle },
     slotProps?.arrow
   );
 

packages/components/src/components/Popover/types.ts

@@ -136,7 +136,7 @@ export type PopoverProps = {
   isNonModal?: boolean;
   /**
    * The minimum distance the arrow's edge should be from the edge of the overlay element.
-   * @default 0
+   * @default 20
    */
   arrowBoundaryOffset?: number;
   /**

packages/components/src/components/Tooltip/Tooltip.test.tsx

@@ -1,8 +1,8 @@
 import { createRef } from 'react';
 
-import { act, render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { IconButton } from '../IconButton';
 
@@ -14,6 +14,10 @@ describe('Tooltip', () => {
     vi.clearAllMocks();
   });
 
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   const onOpenChange = vi.fn();
 
   const baseProps = { 'data-testid': 'root', onOpenChange };
@@ -69,6 +73,82 @@ describe('Tooltip', () => {
     expect(getRoot()).toHaveAttribute('data-arrow', 'true');
   });
 
+  it('should align the arrow for a compound placement', async () => {
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function (this: HTMLElement) {
+        if (this.dataset.testid === 'root') {
+          return {
+            bottom: 64,
+            height: 64,
+            left: 0,
+            right: 200,
+            top: 0,
+            width: 200,
+            x: 0,
+            y: 0,
+          } as DOMRect;
+        }
+
+        if (this.tagName === 'BUTTON') {
+          return {
+            bottom: 32,
+            height: 32,
+            left: 0,
+            right: 100,
+            top: 0,
+            width: 100,
+            x: 0,
+            y: 0,
+          } as DOMRect;
+        }
+
+        return {
+          bottom: 0,
+          height: 0,
+          left: 0,
+          right: 0,
+          top: 0,
+          width: 0,
+          x: 0,
+          y: 0,
+        } as DOMRect;
+      }
+    );
+
+    const { rerender } = render(
+      <Tooltip
+        {...baseProps}
+        isOpen
+        hideArrow={false}
+        placement="top start"
+        control={(props) => <button {...props} />}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getRoot().querySelector('[role="presentation"]')).toHaveStyle({
+        left: '16px',
+      });
+    });
+
+    rerender(
+      <Tooltip
+        {...baseProps}
+        isOpen
+        hideArrow={false}
+        placement="top start"
+        arrowBoundaryOffset={24}
+        control={(props) => <button {...props} />}
+      />
+    );
+
+    await waitFor(() => {
+      expect(getRoot().querySelector('[role="presentation"]')).toHaveStyle({
+        left: '24px',
+      });
+    });
+  });
+
   it('should apply the focus trap', async () => {
     render(
       <>

packages/components/src/components/Tooltip/Tooltip.tsx

@@ -6,6 +6,7 @@ import { deprecate } from '@koobiq/logger';
 import {
   clsx,
   useDOMRef,
+  useLocale,
   mergeProps,
   useBoolean,
   useMultiRef,
@@ -20,6 +21,7 @@ import {
 } from '@koobiq/react-primitives';
 import { Transition } from 'react-transition-group';
 
+import { useOverlayArrowStyle } from '../../hooks/useOverlayArrowStyle';
 import { utilClasses } from '../../styles/utility';
 
 import s from './Tooltip.module.css';
@@ -83,6 +85,8 @@ export const Tooltip = forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   const domRef = useDOMRef<ComponentRef<'div'>>(ref);
   const controlRef = useRef<FocusableElement>(null);
   const controlRefCallback = useMultiRef([controlRef]);
+  const targetRef = anchorRef || controlRef;
+  const { direction } = useLocale();
 
   const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
     {
@@ -111,11 +115,21 @@ export const Tooltip = forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     arrowBoundaryOffset,
     placement: placementProp,
     onClose: () => state.close(true),
-    targetRef: anchorRef || controlRef,
+    targetRef,
   });
 
   const { tooltipProps: tooltipCommonProps } = useTooltip(overlayProps, state);
 
+  const arrowStyle = useOverlayArrowStyle({
+    direction,
+    placement: placementProp,
+    arrowBoundaryOffset,
+    arrowStyle: arrowProps.style,
+    isEnabled: showArrow,
+    overlayRef: domRef,
+    targetRef,
+  });
+
   const tooltipProps = mergeProps(
     {
       className: clsx(
@@ -157,6 +171,7 @@ export const Tooltip = forwardRef<TooltipRef, TooltipProps>((props, ref) => {
               {showArrow && (
                 <div
                   {...arrowProps}
+                  style={arrowStyle}
                   className={s.arrow}
                   data-placement={placement}
                 />

packages/components/src/hooks/useOverlayArrowStyle/index.ts

@@ -0,0 +1 @@
+export { useOverlayArrowStyle } from './useOverlayArrowStyle';