[popups] Reuse Viewport logic across components (#3886)

Author: michaldudak

docs/reference/generated/popover-viewport.json

@@ -30,6 +30,10 @@
     "data-current": {
       "description": "Applied to the direct child of the viewport when no transitions are present or the new content when it's entering."
     },
+    "data-instant": {
+      "description": "Present if animations should be instant.",
+      "type": "'dismiss' | 'click'"
+    },
     "data-previous": {
       "description": "Applied to the direct child of the viewport that contains the exiting content when transitions are present."
     },

docs/src/app/(docs)/react/components/page.mdx

@@ -839,7 +839,7 @@ An accessible popup anchored to a button.
     - Props: className, nativeButton, render, style
   - Popover - Viewport
     - Props: children, className, render, style
-    - Data Attributes: data-activation-direction, data-current, data-previous, data-transitioning
+    - Data Attributes: data-activation-direction, data-current, data-instant, data-previous, data-transitioning
     - CSS Variables: --popup-height, --popup-width
 
 </details>

packages/react/src/popover/viewport/PopoverViewport.test.tsx

@@ -44,6 +44,55 @@ describe('<Popover.Viewport />', () => {
     expect(currentContainer!.textContent).to.equal('Content');
   });
 
+  it('should remount the `current` container when the active trigger changes', async () => {
+    const { user } = await render(
+      <Popover.Root>
+        {({ payload }) => (
+          <React.Fragment>
+            <Popover.Trigger payload="first" data-testid="trigger1">
+              Trigger 1
+            </Popover.Trigger>
+            <Popover.Trigger payload="second" data-testid="trigger2">
+              Trigger 2
+            </Popover.Trigger>
+            <Popover.Portal>
+              <Popover.Positioner>
+                <Popover.Popup>
+                  <Popover.Viewport>
+                    {payload === 'first' ? (
+                      <img data-testid="payload-image-1" src="about:blank" alt="Preview 1" />
+                    ) : null}
+                    {payload === 'second' ? (
+                      <img data-testid="payload-image-2" src="about:blank" alt="Preview 2" />
+                    ) : null}
+                  </Popover.Viewport>
+                </Popover.Popup>
+              </Popover.Positioner>
+            </Popover.Portal>
+          </React.Fragment>
+        )}
+      </Popover.Root>,
+    );
+
+    const trigger1 = screen.getByTestId('trigger1');
+    const trigger2 = screen.getByTestId('trigger2');
+
+    await user.click(trigger1);
+
+    const firstImage = await screen.findByTestId('payload-image-1');
+    const firstContainer = firstImage.closest('[data-current]');
+    expect(firstContainer).not.to.equal(null);
+
+    await user.click(trigger2);
+
+    await waitFor(() => {
+      const secondImage = screen.getByTestId('payload-image-2');
+      const secondContainer = secondImage.closest('[data-current]');
+      expect(secondContainer).not.to.equal(null);
+      expect(secondContainer).not.to.equal(firstContainer);
+    });
+  });
+
   describe.skipIf(isJSDOM)('morphing containers with multiple triggers and payloads', () => {
     beforeEach(() => {
       globalThis.BASE_UI_ANIMATIONS_DISABLED = false;

packages/react/src/popover/viewport/PopoverViewport.tsx

@@ -1,20 +1,12 @@
 'use client';
 import * as React from 'react';
-import { inertValue } from '@base-ui/utils/inertValue';
-import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
-import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { usePopoverRootContext } from '../root/PopoverRootContext';
 import { usePopoverPositionerContext } from '../positioner/PopoverPositionerContext';
 import { BaseUIComponentProps } from '../../utils/types';
-import { useAnimationsFinished } from '../../utils/useAnimationsFinished';
-import { usePopupAutoResize } from '../../utils/usePopupAutoResize';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { StateAttributesMapping } from '../../utils/getStateAttributesProps';
-import { Dimensions } from '../../floating-ui-react/types';
 import { PopoverViewportCssVars } from './PopoverViewportCssVars';
-import { useDirection } from '../../direction-provider/DirectionContext';
+import { usePopupViewport } from '../../utils/usePopupViewport';
 
 const stateAttributesMapping: StateAttributesMapping<PopoverViewport.State> = {
   activationDirection: (value) =>
@@ -39,185 +31,21 @@ export const PopoverViewport = React.forwardRef(function PopoverViewport(
 ) {
   const { render, className, children, ...elementProps } = componentProps;
   const { store } = usePopoverRootContext();
-  const positioner = usePopoverPositionerContext();
-  const direction = useDirection();
+  const { side } = usePopoverPositionerContext();
 
-  const activeTrigger = store.useState('activeTriggerElement');
-  const open = store.useState('open');
-  const mounted = store.useState('mounted');
-  const payload = store.useState('payload');
-  const popupElement = store.useState('popupElement');
-  const positionerElement = store.useState('positionerElement');
+  const instantType = store.useState('instantType');
 
-  const previousActiveTrigger = usePreviousValue(open ? activeTrigger : null);
-
-  const capturedNodeRef = React.useRef<HTMLElement | null>(null);
-  const [previousContentNode, setPreviousContentNode] = React.useState<HTMLElement | null>(null);
-
-  const [newTriggerOffset, setNewTriggerOffset] = React.useState<Offset | null>(null);
-
-  const currentContainerRef = React.useRef<HTMLDivElement>(null);
-  const previousContainerRef = React.useRef<HTMLDivElement>(null);
-
-  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
-  const cleanupFrame = useAnimationFrame();
-
-  const [previousContentDimensions, setPreviousContentDimensions] = React.useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
-
-  useIsoLayoutEffect(() => {
-    store.set('hasViewport', true);
-    return () => {
-      store.set('hasViewport', false);
-    };
-  }, [store]);
-
-  // Capture a clone of the current content DOM subtree when not transitioning.
-  // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
-  useIsoLayoutEffect(() => {
-    // When a transition is in progress, we store the next content in capturedNodeRef.
-    // This handles the case where the trigger changes multiple times before the transition finishes.
-    // We want to always capture the latest content for the previous snapshot.
-    // So clicking quickly on T1, T2, T3 will result in the following sequence:
-    // 1. T1 -> T2: previousContent = T1, currentContent = T2
-    // 2. T2 -> T3: previousContent = T2, currentContent = T3
-    const source = currentContainerRef.current;
-    if (!source) {
-      return;
-    }
-
-    const wrapper = document.createElement('div');
-    for (const child of Array.from(source.childNodes)) {
-      wrapper.appendChild(child.cloneNode(true));
-    }
-
-    capturedNodeRef.current = wrapper;
-  });
-
-  const handleMeasureLayout = useStableCallback(() => {
-    currentContainerRef.current?.style.setProperty('animation', 'none');
-    currentContainerRef.current?.style.setProperty('transition', 'none');
-
-    previousContainerRef.current?.style.setProperty('display', 'none');
-  });
-
-  const handleMeasureLayoutComplete = useStableCallback((previousDimensions: Dimensions | null) => {
-    currentContainerRef.current?.style.removeProperty('animation');
-    currentContainerRef.current?.style.removeProperty('transition');
-
-    previousContainerRef.current?.style.removeProperty('display');
-
-    if (previousDimensions) {
-      setPreviousContentDimensions(previousDimensions);
-    }
-  });
-
-  const lastHandledTriggerRef = React.useRef<Element | null>(null);
-
-  useIsoLayoutEffect(() => {
-    // When a trigger changes, set the captured children HTML to state,
-    // so we can render both new and old content.
-    if (
-      activeTrigger &&
-      previousActiveTrigger &&
-      activeTrigger !== previousActiveTrigger &&
-      lastHandledTriggerRef.current !== activeTrigger &&
-      capturedNodeRef.current
-    ) {
-      setPreviousContentNode(capturedNodeRef.current);
-      setShowStartingStyleAttribute(true);
-
-      // Calculate the relative position between the previous and new trigger,
-      // so we can pass it to the style hook for animation purposes.
-      const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset);
-
-      cleanupFrame.request(() => {
-        cleanupFrame.request(() => {
-          setShowStartingStyleAttribute(false);
-          onAnimationsFinished(() => {
-            setPreviousContentNode(null);
-            setPreviousContentDimensions(null);
-            capturedNodeRef.current = null;
-          });
-        });
-      });
-
-      lastHandledTriggerRef.current = activeTrigger;
-    }
-  }, [
-    activeTrigger,
-    previousActiveTrigger,
-    previousContentNode,
-    onAnimationsFinished,
-    cleanupFrame,
-  ]);
-
-  const isTransitioning = previousContentNode != null;
-  let childrenToRender: React.ReactNode;
-  if (!isTransitioning) {
-    childrenToRender = (
-      <div data-current ref={currentContainerRef} key={'current'}>
-        {children}
-      </div>
-    );
-  } else {
-    childrenToRender = (
-      <React.Fragment>
-        <div
-          data-previous
-          inert={inertValue(true)}
-          ref={previousContainerRef}
-          style={
-            {
-              [PopoverViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-              [PopoverViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
-              position: 'absolute',
-            } as React.CSSProperties
-          }
-          key={'previous'}
-          data-ending-style={showStartingStyleAttribute ? undefined : ''}
-        />
-        <div
-          data-current
-          ref={currentContainerRef}
-          key={'current'}
-          data-starting-style={showStartingStyleAttribute ? '' : undefined}
-        >
-          {children}
-        </div>
-      </React.Fragment>
-    );
-  }
-
-  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  useIsoLayoutEffect(() => {
-    const container = previousContainerRef.current;
-    if (!container || !previousContentNode) {
-      return;
-    }
-
-    container.replaceChildren(...Array.from(previousContentNode.childNodes));
-  }, [previousContentNode]);
-
-  usePopupAutoResize({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
-    side: positioner.side,
-    direction,
+  const { children: childrenToRender, state: viewportState } = usePopupViewport({
+    store,
+    side,
+    cssVars: PopoverViewportCssVars,
+    children,
   });
 
   const state: PopoverViewport.State = {
-    activationDirection: getActivationDirection(newTriggerOffset),
-    transitioning: isTransitioning,
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType,
   };
 
   return useRenderElement('div', componentProps, {
@@ -242,73 +70,9 @@ export namespace PopoverViewport {
      * Whether the viewport is currently transitioning between contents.
      */
     transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'dismiss' | 'click' | undefined;
   }
 }
-
-type Offset = {
-  horizontal: number;
-  vertical: number;
-};
-
-/**
- * Returns a string describing the provided offset.
- * It describes both the horizontal and vertical offset, separated by a space.
- *
- * @param offset
- */
-function getActivationDirection(offset: Offset | null): string | undefined {
-  if (!offset) {
-    return undefined;
-  }
-
-  return `${getValueWithTolerance(offset.horizontal, 5, 'right', 'left')} ${getValueWithTolerance(offset.vertical, 5, 'down', 'up')}`;
-}
-
-/**
- * Returns a label describing the value (positive/negative) trating values
- * within tolarance as zero.
- *
- * @param value Value to check
- * @param tolerance Tolerance to treat the value as zero.
- * @param positiveLabel
- * @param negativeLabel
- * @returns If 0 < abs(value) < tolerance, returns an empty string. Otherwise returns positiveLabel or negativeLabel.
- */
-function getValueWithTolerance(
-  value: number,
-  tolerance: number,
-  positiveLabel: string,
-  negativeLabel: string,
-) {
-  if (value > tolerance) {
-    return positiveLabel;
-  }
-
-  if (value < -tolerance) {
-    return negativeLabel;
-  }
-
-  return '';
-}
-
-/**
- * Calculates the relative position between centers of two elements.
- */
-function calculateRelativePosition(from: Element, to: Element): Offset {
-  const fromRect = from.getBoundingClientRect();
-  const toRect = to.getBoundingClientRect();
-
-  const fromCenter = {
-    x: fromRect.left + fromRect.width / 2,
-    y: fromRect.top + fromRect.height / 2,
-  };
-  const toCenter = {
-    x: toRect.left + toRect.width / 2,
-    y: toRect.top + toRect.height / 2,
-  };
-
-  return {
-    horizontal: toCenter.x - fromCenter.x,
-    vertical: toCenter.y - fromCenter.y,
-  };
-}

packages/react/src/popover/viewport/PopoverViewportDataAttributes.ts

@@ -18,4 +18,9 @@ export enum PopoverViewportDataAttributes {
    * Indicates that the viewport is currently transitioning between old and new content.
    */
   transitioning = 'data-transitioning',
+  /**
+   * Present if animations should be instant.
+   * @type {'dismiss' | 'click'}
+   */
+  instant = 'data-instant',
 }