fix(popover): arrow tracks trigger on collision shift

packages/core/src/components/navigation-menu/navigation-menu.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import type { CSSProperties, ComponentPropsWithoutRef, ReactElement } from 'react';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement, RefObject } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 
 import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
 import { ChevronDownOutlineIcon } from '@vapor-ui/icons';
 
+import { useArrowPosition } from '~/hooks/use-arrow-position';
 import { useMutationObserverRef } from '~/hooks/use-mutation-observer-ref';
 import { useRenderElement } from '~/hooks/use-render-element';
 import { createContext } from '~/libs/create-context';
@@ -21,6 +22,24 @@ import type { VaporUIComponentProps } from '~/utils/types';
 import type { LinkVariants, ListVariants } from './navigation-menu.css';
 import * as styles from './navigation-menu.css';
 
+/* -------------------------------------------------------------------------------------------------
+ * NavigationMenuArrowContext (internal)
+ * -----------------------------------------------------------------------------------------------*/
+
+interface NavigationMenuArrowContextValue {
+    activeTriggerElement: Element | null;
+    setActiveTriggerElement: (element: Element | null) => void;
+    positionerRef: RefObject<HTMLElement | null>;
+}
+
+const [NavigationMenuArrowProvider, useNavigationMenuArrowContext] =
+    createContext<NavigationMenuArrowContextValue>({
+        name: 'NavigationMenuArrowContext',
+        strict: false,
+        hookName: 'useNavigationMenuArrowContext',
+        providerName: 'NavigationMenuRoot',
+    });
+
 type NavigationMenuVariants = ListVariants & LinkVariants;
 type NavigationMenuSharedProps = NavigationMenuVariants & { disabled?: boolean };
 type NavigationMenuContextType = NavigationMenuSharedProps;
@@ -47,15 +66,22 @@ export const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRoot.Pro
 
         const { direction } = variantProps;
 
+        const [activeTriggerElement, setActiveTriggerElement] = useState<Element | null>(null);
+        const positionerRef = useRef<HTMLElement>(null);
+
         return (
-            <NavigationMenuProvider value={variantProps}>
-                <BaseNavigationMenu.Root
-                    ref={ref}
-                    orientation={direction}
-                    className={className}
-                    {...otherProps}
-                />
-            </NavigationMenuProvider>
+            <NavigationMenuArrowProvider
+                value={{ activeTriggerElement, setActiveTriggerElement, positionerRef }}
+            >
+                <NavigationMenuProvider value={variantProps}>
+                    <BaseNavigationMenu.Root
+                        ref={ref}
+                        orientation={direction}
+                        className={className}
+                        {...otherProps}
+                    />
+                </NavigationMenuProvider>
+            </NavigationMenuArrowProvider>
         );
     },
 );
@@ -149,13 +175,36 @@ export const NavigationMenuTriggerPrimitive = forwardRef<
 >((props, ref) => {
     const { disabled: disabledProp, className, ...componentProps } = resolveStyles(props);
     const { size, disabled: contextDisabled } = useNavigationMenuContext();
+    const arrowCtx = useNavigationMenuArrowContext();
+    const setActiveTrigger = arrowCtx?.setActiveTriggerElement;
+
+    const internalRef = useRef<HTMLButtonElement>(null);
+    const composedRef = arrowCtx ? composeRefs(internalRef, ref) : ref;
+
+    useEffect(() => {
+        const node = internalRef.current;
+        if (!node || !setActiveTrigger) return;
+
+        if (node.hasAttribute('data-popup-open')) {
+            setActiveTrigger(node);
+        }
+
+        const observer = new MutationObserver(() => {
+            if (node.hasAttribute('data-popup-open')) {
+                setActiveTrigger(node);
+            }
+        });
+        observer.observe(node, { attributes: true, attributeFilter: ['data-popup-open'] });
+
+        return () => observer.disconnect();
+    }, [setActiveTrigger]);
 
     const disabled = disabledProp ?? contextDisabled;
     const dataAttrs = createDataAttributes({ disabled });
 
     return (
         <BaseNavigationMenu.Trigger
-            ref={ref}
+            ref={composedRef}
             disabled={disabled}
             className={cn(styles.link({ size }), styles.trigger, className)}
             {...dataAttrs}
@@ -260,10 +309,12 @@ export const NavigationMenuPositionerPrimitive = forwardRef<
         className,
         ...componentProps
     } = resolveStyles(props);
+    const arrowCtx = useNavigationMenuArrowContext();
+    const composedRef = arrowCtx ? composeRefs(arrowCtx.positionerRef, ref) : ref;
 
     return (
         <BaseNavigationMenu.Positioner
-            ref={ref}
+            ref={composedRef}
             side={side}
             align={align}
             sideOffset={sideOffset}
@@ -290,7 +341,13 @@ export const NavigationMenuPopupPrimitive = forwardRef<
     const [side, setSide] = useState<NavigationMenuPositionerPrimitive.Props['side']>();
     const [align, setAlign] = useState<NavigationMenuPositionerPrimitive.Props['align']>();
 
-    const position = useMemo(() => getArrowPosition({ side, align }), [side, align]);
+    const arrowCtx = useNavigationMenuArrowContext();
+    const position = useArrowPosition({
+        triggerElement: arrowCtx?.activeTriggerElement ?? null,
+        positionerElement: arrowCtx?.positionerRef.current ?? null,
+        side: side ?? 'bottom',
+        align: align ?? 'center',
+    });
 
     const popupRef = useRef<HTMLDivElement>(null);
     const composedRef = composeRefs(popupRef, ref);
@@ -344,32 +401,6 @@ const extractPositions = (dataset: DOMStringMap) => {
 
 /* -----------------------------------------------------------------------------------------------*/
 
-type ArrowPositionProps = Pick<NavigationMenuPositionerPrimitive.Props, 'side' | 'align'> & {
-    offset?: number;
-};
-
-const getArrowPosition = ({
-    side = 'top',
-    align = 'center',
-    offset = 12,
-}: ArrowPositionProps): CSSProperties => {
-    const positionMap = {
-        'top-start': { left: offset, right: 'unset' },
-        'top-end': { left: 'unset', right: offset },
-        'bottom-start': { left: offset, right: 'unset' },
-        'bottom-end': { left: 'unset', right: offset },
-        'left-start': { top: offset, bottom: 'unset' },
-        'left-end': { top: 'unset', bottom: offset },
-        'right-start': { top: offset, bottom: 'unset' },
-        'right-end': { top: 'unset', bottom: offset },
-    };
-
-    const key = `${side}-${align}` as keyof typeof positionMap;
-    return positionMap[key] || {};
-};
-
-/* -----------------------------------------------------------------------------------------------*/
-
 const ArrowIcon = (props: ComponentPropsWithoutRef<'svg'>) => {
     return (
         <svg

packages/core/src/components/popover/popover.stories.tsx

@@ -203,7 +203,6 @@ export const TestBed: StoryObj<Popover.Root.Props & Popover.PositionerPrimitive.
                             <Popover.PositionerPrimitive
                                 side="bottom"
                                 align="end"
-                                alignOffset={100}
                                 collisionAvoidance={{ align: 'flip' }}
                             />
                         }

packages/core/src/components/popover/popover.tsx

@@ -1,10 +1,12 @@
 'use client';
 
-import type { CSSProperties, ComponentProps, ReactElement } from 'react';
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import type { ComponentProps, ReactElement, RefObject } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 
 import { Popover as BasePopover } from '@base-ui/react/popover';
 
+import { useArrowPosition } from '~/hooks/use-arrow-position';
+import { createContext } from '~/libs/create-context';
 import { useMutationObserverRef } from '~/hooks/use-mutation-observer-ref';
 import { useRenderElement } from '~/hooks/use-render-element';
 import { vars } from '~/styles/themes.css';
@@ -16,12 +18,35 @@ import type { VaporUIComponentProps } from '~/utils/types';
 
 import * as styles from './popover.css';
 
+/* -------------------------------------------------------------------------------------------------
+ * PopoverArrowContext (internal)
+ * -----------------------------------------------------------------------------------------------*/
+
+interface PopoverArrowContextValue {
+    triggerRef: RefObject<Element | null>;
+    positionerRef: RefObject<HTMLElement | null>;
+}
+
+const [PopoverArrowProvider, usePopoverArrowContext] = createContext<PopoverArrowContextValue>({
+    name: 'PopoverArrowContext',
+    strict: false,
+    hookName: 'usePopoverArrowContext',
+    providerName: 'PopoverRoot',
+});
+
 /* -------------------------------------------------------------------------------------------------
  * Popover.Root
  * -----------------------------------------------------------------------------------------------*/
 
 export const PopoverRoot = (props: PopoverRoot.Props) => {
-    return <BasePopover.Root {...props} />;
+    const triggerRef = useRef<Element>(null);
+    const positionerRef = useRef<HTMLElement>(null);
+
+    return (
+        <PopoverArrowProvider value={{ triggerRef, positionerRef }}>
+            <BasePopover.Root {...props} />
+        </PopoverArrowProvider>
+    );
 };
 PopoverRoot.displayName = 'Popover.Root';
 
@@ -31,8 +56,10 @@ PopoverRoot.displayName = 'Popover.Root';
 
 export const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTrigger.Props>((props, ref) => {
     const componentProps = resolveStyles(props);
+    const ctx = usePopoverArrowContext();
+    const composedRef = ctx ? composeRefs(ctx.triggerRef, ref) : ref;
 
-    return <BasePopover.Trigger ref={ref} {...componentProps} />;
+    return <BasePopover.Trigger ref={composedRef} {...componentProps} />;
 });
 PopoverTrigger.displayName = 'Popover.Trigger';
 
@@ -75,10 +102,12 @@ export const PopoverPositionerPrimitive = forwardRef<
         collisionAvoidance,
         ...componentProps
     } = resolveStyles(props);
+    const ctx = usePopoverArrowContext();
+    const composedRef = ctx ? composeRefs(ctx.positionerRef, ref) : ref;
 
     return (
         <BasePopover.Positioner
-            ref={ref}
+            ref={composedRef}
             side={side}
             align={align}
             sideOffset={sideOffset}
@@ -103,7 +132,13 @@ export const PopoverPopupPrimitive = forwardRef<HTMLDivElement, PopoverPopupPrim
         const [side, setSide] = useState<PopoverPositionerPrimitive.Props['side']>('bottom');
         const [align, setAlign] = useState<PopoverPositionerPrimitive.Props['align']>('start');
 
-        const position = useMemo(() => getArrowPosition({ side, align }), [side, align]);
+        const ctx = usePopoverArrowContext();
+        const position = useArrowPosition({
+            triggerElement: ctx?.triggerRef.current ?? null,
+            positionerElement: ctx?.positionerRef.current ?? null,
+            side: side ?? 'bottom',
+            align: align ?? 'center',
+        });
 
         const popupRef = useRef<HTMLDivElement>(null);
         const composedRef = composeRefs(popupRef, ref);
@@ -209,32 +244,6 @@ PopoverDescription.displayName = 'Popover.Description';
 
 /* -----------------------------------------------------------------------------------------------*/
 
-type ArrowPositionProps = Pick<PopoverPositionerPrimitive.Props, 'side' | 'align'> & {
-    offset?: number;
-};
-
-const getArrowPosition = ({
-    side = 'top',
-    align = 'center',
-    offset = 12,
-}: ArrowPositionProps): CSSProperties => {
-    const positionMap = {
-        'top-start': { left: offset, right: 'unset' },
-        'top-end': { left: 'unset', right: offset },
-        'bottom-start': { left: offset, right: 'unset' },
-        'bottom-end': { left: 'unset', right: offset },
-        'left-start': { top: offset, bottom: 'unset' },
-        'left-end': { top: 'unset', bottom: offset },
-        'right-start': { top: offset, bottom: 'unset' },
-        'right-end': { top: 'unset', bottom: offset },
-    };
-
-    const key = `${side}-${align}` as keyof typeof positionMap;
-    return positionMap[key] || {};
-};
-
-/* -----------------------------------------------------------------------------------------------*/
-
 const ArrowIcon = (props: ComponentProps<'svg'>) => {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 16" fill="none" {...props}>