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,35 @@ export const NavigationMenuTriggerPrimitive = forwardRef<
 >((props, ref) => {
     const { disabled: disabledProp, className, ...componentProps } = resolveStyles(props);
     const { size, disabled: contextDisabled } = useNavigationMenuContext();
+    const { setActiveTriggerElement } = useNavigationMenuArrowContext() ?? {};
+
+    const internalRef = useRef<HTMLButtonElement>(null);
+    const composedRef = composeRefs(internalRef, ref);
+
+    useEffect(() => {
+        const node = internalRef.current;
+        if (!node || !setActiveTriggerElement) return;
+
+        if (node.hasAttribute('data-popup-open')) {
+            setActiveTriggerElement(node);
+        }
+
+        const observer = new MutationObserver(() => {
+            if (node.hasAttribute('data-popup-open')) {
+                setActiveTriggerElement(node);
+            }
+        });
+        observer.observe(node, { attributes: true, attributeFilter: ['data-popup-open'] });
+
+        return () => observer.disconnect();
+    }, [setActiveTriggerElement]);
 
     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 +308,12 @@ export const NavigationMenuPositionerPrimitive = forwardRef<
         className,
         ...componentProps
     } = resolveStyles(props);
+    const { positionerRef } = useNavigationMenuArrowContext() ?? {};
+    const composedRef = composeRefs(positionerRef, ref);
 
     return (
         <BaseNavigationMenu.Positioner
-            ref={ref}
+            ref={composedRef}
             side={side}
             align={align}
             sideOffset={sideOffset}
@@ -290,7 +340,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 { activeTriggerElement, positionerRef } = useNavigationMenuArrowContext() ?? {};
+    const position = useArrowPosition({
+        triggerElement: activeTriggerElement ?? null,
+        positionerElement: positionerRef?.current ?? null,
+        side: side ?? 'bottom',
+        align: align ?? 'center',
+    });
 
     const popupRef = useRef<HTMLDivElement>(null);
     const composedRef = composeRefs(popupRef, ref);
@@ -344,32 +400,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.css.ts

@@ -22,26 +22,5 @@ export const arrow = componentStyle({
 
     width: vars.size.dimension[100],
     height: vars.size.dimension[200],
-
-    transform: 'rotate(180deg)',
     zIndex: 1,
-
-    selectors: {
-        '&[data-side="top"]': {
-            bottom: '-11px',
-            transform: 'rotate(-90deg)',
-        },
-        '&[data-side="right"]': {
-            left: '-7px',
-            transform: 'rotate(0deg)',
-        },
-        '&[data-side="bottom"]': {
-            top: '-11px',
-            transform: 'rotate(90deg)',
-        },
-        '&[data-side="left"]': {
-            right: '-7px',
-            transform: 'rotate(180deg)',
-        },
-    },
 });

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

@@ -37,7 +37,10 @@ export const Default: StoryObj<Popover.Root.Props & Popover.PositionerPrimitive.
 
 export const Customable: StoryObj<Popover.Root.Props & Popover.PositionerPrimitive.Props> = {
     argTypes: {
-        side: { control: 'inline-radio', options: ['top', 'right', 'bottom', 'left'] },
+        side: {
+            control: 'inline-radio',
+            options: ['top', 'right', 'bottom', 'left', 'inline-start', 'inline-end'],
+        },
         sideOffset: { control: 'number' },
         align: { control: 'inline-radio', options: ['start', 'center', 'end'] },
         alignOffset: { control: 'number' },
@@ -160,6 +163,41 @@ export const TestBed: StoryObj<Popover.Root.Props & Popover.PositionerPrimitive.
                 </Popover.Root>
             </HStack>
 
+            <HStack
+                $css={{
+                    padding: '$800',
+                    gap: '$400',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    border: '1px solid',
+                }}
+            >
+                <Popover.Root {...args} open>
+                    <Popover.Trigger render={<Button>Inline Start Popover</Button>} />
+
+                    <Popover.Popup
+                        positionerElement={<Popover.PositionerPrimitive side="inline-start" />}
+                    >
+                        <Popover.Title>Inline Start Popover</Popover.Title>
+                        <Popover.Description>
+                            This popover uses a logical inline-start side.
+                        </Popover.Description>
+                    </Popover.Popup>
+                </Popover.Root>
+                <Popover.Root {...args} open>
+                    <Popover.Trigger render={<Button>Inline End Popover</Button>} />
+
+                    <Popover.Popup
+                        positionerElement={<Popover.PositionerPrimitive side="inline-end" />}
+                    >
+                        <Popover.Title>Inline End Popover</Popover.Title>
+                        <Popover.Description>
+                            This popover uses a logical inline-end side.
+                        </Popover.Description>
+                    </Popover.Popup>
+                </Popover.Root>
+            </HStack>
+
             <HStack
                 $css={{ padding: '$800', border: '1px solid', justifyContent: 'space-between' }}
             >
@@ -203,7 +241,6 @@ export const TestBed: StoryObj<Popover.Root.Props & Popover.PositionerPrimitive.
                             <Popover.PositionerPrimitive
                                 side="bottom"
                                 align="end"
-                                alignOffset={100}
                                 collisionAvoidance={{ align: 'flip' }}
                             />
                         }