@base-ui/react 1.0.0 → 1.2.0

package/esm/utils/useAnchorPositioning.js

@@ -208,14 +208,11 @@ export function useAnchorPositioning(params) {
       availableWidth,
       availableHeight
     }) {
-      Object.entries({
-        '--available-width': `${availableWidth}px`,
-        '--available-height': `${availableHeight}px`,
-        '--anchor-width': `${reference.width}px`,
-        '--anchor-height': `${reference.height}px`
-      }).forEach(([key, value]) => {
-        floating.style.setProperty(key, value);
-      });
+      const floatingStyle = floating.style;
+      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
+      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+      floatingStyle.setProperty('--anchor-width', `${reference.width}px`);
+      floatingStyle.setProperty('--anchor-height', `${reference.height}px`);
     }
   }), arrow(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
@@ -300,14 +297,20 @@ export function useAnchorPositioning(params) {
   // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
   // This ensures the popup is inside the viewport initially before it gets positioned.
   const resolvedPosition = isPositioned ? positionMethod : 'fixed';
-  const floatingStyles = React.useMemo(() => adaptiveOrigin ? {
-    position: resolvedPosition,
-    [sideX]: x,
-    [sideY]: y
-  } : {
-    position: resolvedPosition,
-    ...originalFloatingStyles
-  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles]);
+  const floatingStyles = React.useMemo(() => {
+    const base = adaptiveOrigin ? {
+      position: resolvedPosition,
+      [sideX]: x,
+      [sideY]: y
+    } : {
+      position: resolvedPosition,
+      ...originalFloatingStyles
+    };
+    if (!isPositioned) {
+      base.opacity = 0;
+    }
+    return base;
+  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     if (!mounted) {

package/esm/utils/useAnimationsFinished.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForNextTick?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/esm/utils/useAnimationsFinished.js

@@ -4,16 +4,17 @@ import * as ReactDOM from 'react-dom';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { resolveRef } from "./resolveRef.js";
+import { TransitionStatusDataAttributes } from "./stateAttributesMapping.js";
 
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbortedAsFinished = true) {
+export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
   const frame = useAnimationFrame();
   return useStableCallback((fnToExecute,
   /**
@@ -23,47 +24,69 @@ export function useAnimationsFinished(elementOrRef, waitForNextTick = false, tre
    */
   signal = null) => {
     frame.cancel();
+    function done() {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    }
     const element = resolveRef(elementOrRef);
     if (element == null) {
       return;
     }
-    if (typeof element.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+    const resolvedElement = element;
+    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
     } else {
-      frame.request(() => {
-        function exec() {
-          if (!element) {
+      function execWaitForStartingStyleRemoved() {
+        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+
+        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+        // to give "open" animations a chance to be registered.
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          frame.request(exec);
+          return;
+        }
+
+        // Wait for `[data-starting-style]` to have been removed.
+        const attributeObserver = new MutationObserver(() => {
+          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+            attributeObserver.disconnect();
+            exec();
+          }
+        });
+        attributeObserver.observe(resolvedElement, {
+          attributes: true,
+          attributeFilter: [startingStyleAttribute]
+        });
+        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+          once: true
+        });
+      }
+      function exec() {
+        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
+          if (signal?.aborted) {
             return;
           }
-          Promise.all(element.getAnimations().map(anim => anim.finished)).then(() => {
-            if (signal != null && signal.aborted) {
+          done();
+        }).catch(() => {
+          const currentAnimations = resolvedElement.getAnimations();
+          if (treatAbortedAsFinished) {
+            if (signal?.aborted) {
               return;
             }
-
-            // Synchronously flush the unmounting of the component so that the browser doesn't
-            // paint: https://github.com/mui/base-ui/issues/979
-            ReactDOM.flushSync(fnToExecute);
-          }).catch(() => {
-            if (treatAbortedAsFinished) {
-              if (signal != null && signal.aborted) {
-                return;
-              }
-              ReactDOM.flushSync(fnToExecute);
-            } else if (element.getAnimations().length > 0 && element.getAnimations().some(anim => anim.pending || anim.playState !== 'finished')) {
-              // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-              // In such cases, we need to re-check if any new animations have started.
-              exec();
-            }
-          });
-        }
-
-        // `open: true` animations need to wait for the next tick to be detected
-        if (waitForNextTick) {
-          frame.request(exec);
-        } else {
-          exec();
-        }
-      });
+            done();
+          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
+            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+            // In such cases, we need to re-check if any new animations have started.
+            exec();
+          }
+        });
+      }
+      if (waitForStartingStyleRemoved) {
+        execWaitForStartingStyleRemoved();
+        return;
+      }
+      frame.request(exec);
     }
   });
 }

package/esm/utils/useFocusableWhenDisabled.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export declare function useFocusableWhenDisabled(parameters: useFocusableWhenDisabled.Parameters): useFocusableWhenDisabled.ReturnValue;
 interface FocusableWhenDisabledProps {
-  'aria-disabled'?: boolean;
-  disabled?: boolean;
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   onKeyDown: (event: React.KeyboardEvent) => void;
   tabIndex: number;
 }
@@ -20,11 +20,11 @@ export interface UseFocusableWhenDisabledParameters {
    * Whether this is a composite item or not.
    * @default false
    */
-  composite?: boolean;
+  composite?: boolean | undefined;
   /**
    * @default 0
    */
-  tabIndex?: number;
+  tabIndex?: number | undefined;
   /**
    * @default true
    */

package/esm/utils/{useMixedToggleClickHander.d.ts → useMixedToggleClickHandler.d.ts}

@@ -9,7 +9,7 @@ export interface UseMixedToggleClickHandlerParameters {
    * Whether the mixed toggle click handler is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Determines what action is performed on mousedown.
    */

package/esm/utils/{useMixedToggleClickHander.js → useMixedToggleClickHandler.js}

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { EMPTY_OBJECT } from "./constants.js";

package/esm/utils/useOpenChangeComplete.d.ts

@@ -8,11 +8,11 @@ export interface UseOpenChangeCompleteParameters {
    * Whether the hook is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether the element is open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Ref to the element being closed.
    */

package/esm/utils/useOpenChangeComplete.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 
 /**
@@ -15,17 +14,16 @@ export function useOpenChangeComplete(parameters) {
     ref,
     onComplete: onCompleteParam
   } = parameters;
-  const openRef = useValueAsRef(open);
   const onComplete = useStableCallback(onCompleteParam);
-  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
   React.useEffect(() => {
     if (!enabled) {
-      return;
+      return undefined;
     }
-    runOnceAnimationsFinish(() => {
-      if (open === openRef.current) {
-        onComplete();
-      }
-    });
-  }, [enabled, open, onComplete, runOnceAnimationsFinish, openRef]);
+    const abortController = new AbortController();
+    runOnceAnimationsFinish(onComplete, abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [enabled, open, onComplete, runOnceAnimationsFinish]);
 }

package/esm/utils/useOpenInteractionType.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useEnhancedClickHandler } from '@base-ui/utils/useEnhancedClickHandler';
+import { isIOS } from '@base-ui/utils/detectBrowser';
 
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
@@ -13,7 +14,11 @@ export function useOpenInteractionType(open) {
   const [openMethod, setOpenMethod] = React.useState(null);
   const handleTriggerClick = useStableCallback((_, interactionType) => {
     if (!open) {
-      setOpenMethod(interactionType);
+      setOpenMethod(interactionType || (
+      // On iOS Safari, the hitslop around touch targets means tapping outside an element's
+      // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
+      // will be "" in that case.
+      isIOS ? 'touch' : ''));
     }
   });
   const reset = React.useCallback(() => {

package/esm/utils/usePopupAutoResize.d.ts

@@ -18,18 +18,18 @@ interface UsePopupAutoResizeParameters {
   /**
    * Whether the auto-resize is enabled. This function runs in an effect and can safely access refs.
    */
-  enabled?: () => boolean;
+  enabled?: (() => boolean) | undefined;
   /**
    * Callback fired immediately before measuring the dimensions of the new content.
    */
-  onMeasureLayout?: () => void;
+  onMeasureLayout?: (() => void) | undefined;
   /**
    * Callback fired after the new dimensions have been measured.
    *
    * @param previousDimensions Dimensions before the change, or `null` if this is the first measurement.
    * @param newDimensions Newly measured dimensions.
    */
-  onMeasureLayoutComplete?: (previousDimensions: Dimensions | null, newDimensions: Dimensions) => void;
+  onMeasureLayoutComplete?: ((previousDimensions: Dimensions | null, newDimensions: Dimensions) => void) | undefined;
   side: Side;
   direction: 'ltr' | 'rtl';
 }

package/esm/utils/usePopupAutoResize.js

@@ -1,7 +1,10 @@
+'use client';
+
 import * as React from 'react';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { NOOP } from '@base-ui/utils/empty';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 import { getCssDimensions } from "./getCssDimensions.js";
 import { EMPTY_OBJECT } from "./constants.js";
@@ -23,10 +26,12 @@ export function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const isInitialRender = React.useRef(true);
   const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
   const animationFrame = useAnimationFrame();
-  const previousDimensionsRef = React.useRef(null);
+  const committedDimensionsRef = React.useRef(null);
+  const liveDimensionsRef = React.useRef(null);
+  const isInitialRenderRef = React.useRef(true);
+  const restoreAnchoringStylesRef = React.useRef(NOOP);
   const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
   const onMeasureLayoutComplete = useStableCallback(onMeasureLayoutCompleteParam);
   const anchoringStyles = React.useMemo(() => {
@@ -49,80 +54,90 @@ export function usePopupAutoResize(parameters) {
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted || !enabled() || !supportsResizeObserver) {
-      isInitialRender.current = true;
-      previousDimensionsRef.current = null;
+      restoreAnchoringStylesRef.current = NOOP;
+      isInitialRenderRef.current = true;
+      committedDimensionsRef.current = null;
+      liveDimensionsRef.current = null;
       return undefined;
     }
     if (!popupElement || !positionerElement) {
       return undefined;
     }
-    Object.entries(anchoringStyles).forEach(([key, value]) => {
-      popupElement.style.setProperty(key, value);
-    });
+    restoreAnchoringStylesRef.current = applyElementStyles(popupElement, anchoringStyles);
     const observer = new ResizeObserver(entries => {
       const entry = entries[0];
       if (entry) {
-        if (previousDimensionsRef.current === null) {
-          previousDimensionsRef.current = {
-            width: Math.ceil(entry.borderBoxSize[0].inlineSize),
-            height: Math.ceil(entry.borderBoxSize[0].blockSize)
-          };
-        } else {
-          previousDimensionsRef.current.width = Math.ceil(entry.borderBoxSize[0].inlineSize);
-          previousDimensionsRef.current.height = Math.ceil(entry.borderBoxSize[0].blockSize);
-        }
+        liveDimensionsRef.current = {
+          width: Math.ceil(entry.borderBoxSize[0].inlineSize),
+          height: Math.ceil(entry.borderBoxSize[0].blockSize)
+        };
       }
     });
     observer.observe(popupElement);
 
     // Measure the rendered size to enable transitions:
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
+    setPopupCssSize(popupElement, 'auto');
     const restorePopupPosition = overrideElementStyle(popupElement, 'position', 'static');
     const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
     const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
-    const restoreAvailableWidth = overrideElementStyle(positionerElement, '--available-width', 'max-content');
-    const restoreAvailableHeight = overrideElementStyle(positionerElement, '--available-height', 'max-content');
+    const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
+      '--available-width': 'max-content',
+      '--available-height': 'max-content'
+    });
+    function restoreMeasurementOverrides() {
+      restorePopupPosition();
+      restorePopupTransform();
+      restorePositionerAvailableSize();
+    }
+    function restoreMeasurementOverridesIncludingScale() {
+      restoreMeasurementOverrides();
+      restorePopupScale();
+    }
     onMeasureLayout?.();
 
     // Initial render (for each time the popup opens).
-    if (isInitialRender.current || previousDimensionsRef.current === null) {
-      positionerElement.style.setProperty('--positioner-width', 'max-content');
-      positionerElement.style.setProperty('--positioner-height', 'max-content');
+    if (isInitialRenderRef.current || committedDimensionsRef.current === null) {
+      setPositionerCssSize(positionerElement, 'max-content');
       const dimensions = getCssDimensions(popupElement);
-      positionerElement.style.setProperty('--positioner-width', `${dimensions.width}px`);
-      positionerElement.style.setProperty('--positioner-height', `${dimensions.height}px`);
-      restorePopupPosition();
-      restorePopupTransform();
-      restorePopupScale();
-      restoreAvailableWidth();
-      restoreAvailableHeight();
+      committedDimensionsRef.current = dimensions;
+      setPositionerCssSize(positionerElement, dimensions);
+      restoreMeasurementOverridesIncludingScale();
       onMeasureLayoutComplete?.(null, dimensions);
-      isInitialRender.current = false;
+      isInitialRenderRef.current = false;
       return () => {
         observer.disconnect();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = NOOP;
       };
     }
 
     // Subsequent renders while open (when `content` changes).
-    popupElement.style.setProperty('--popup-width', 'auto');
-    popupElement.style.setProperty('--popup-height', 'auto');
-    positionerElement.style.setProperty('--positioner-width', 'max-content');
-    positionerElement.style.setProperty('--positioner-height', 'max-content');
+    setPopupCssSize(popupElement, 'auto');
+    setPositionerCssSize(positionerElement, 'max-content');
+    const previousDimensions = committedDimensionsRef.current ?? liveDimensionsRef.current;
     const newDimensions = getCssDimensions(popupElement);
-    popupElement.style.setProperty('--popup-width', `${previousDimensionsRef.current.width}px`);
-    popupElement.style.setProperty('--popup-height', `${previousDimensionsRef.current.height}px`);
-    restorePopupPosition();
-    restorePopupTransform();
-    restoreAvailableWidth();
-    restoreAvailableHeight();
-    onMeasureLayoutComplete?.(previousDimensionsRef.current, newDimensions);
-    positionerElement.style.setProperty('--positioner-width', `${newDimensions.width}px`);
-    positionerElement.style.setProperty('--positioner-height', `${newDimensions.height}px`);
+
+    // Commit immediately so future content changes have a stable previous size, even if
+    // ResizeObserver runs after this point.
+    committedDimensionsRef.current = newDimensions;
+    if (!previousDimensions) {
+      setPositionerCssSize(positionerElement, newDimensions);
+      restoreMeasurementOverridesIncludingScale();
+      onMeasureLayoutComplete?.(null, newDimensions);
+      return () => {
+        observer.disconnect();
+        animationFrame.cancel();
+        restoreAnchoringStylesRef.current();
+        restoreAnchoringStylesRef.current = NOOP;
+      };
+    }
+    setPopupCssSize(popupElement, previousDimensions);
+    restoreMeasurementOverridesIncludingScale();
+    onMeasureLayoutComplete?.(previousDimensions, newDimensions);
+    setPositionerCssSize(positionerElement, newDimensions);
     const abortController = new AbortController();
     animationFrame.request(() => {
-      popupElement.style.setProperty('--popup-width', `${newDimensions.width}px`);
-      popupElement.style.setProperty('--popup-height', `${newDimensions.height}px`);
+      setPopupCssSize(popupElement, newDimensions);
       runOnceAnimationsFinish(() => {
         popupElement.style.setProperty('--popup-width', 'auto');
         popupElement.style.setProperty('--popup-height', 'auto');
@@ -132,6 +147,8 @@ export function usePopupAutoResize(parameters) {
       observer.disconnect();
       abortController.abort();
       animationFrame.cancel();
+      restoreAnchoringStylesRef.current();
+      restoreAnchoringStylesRef.current = NOOP;
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, enabled, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
@@ -141,4 +158,25 @@ function overrideElementStyle(element, property, value) {
   return () => {
     element.style.setProperty(property, originalValue);
   };
+}
+function applyElementStyles(element, styles) {
+  const restorers = [];
+  for (const [key, value] of Object.entries(styles)) {
+    restorers.push(overrideElementStyle(element, key, value));
+  }
+  return restorers.length ? () => {
+    restorers.forEach(restore => restore());
+  } : NOOP;
+}
+function setPopupCssSize(popupElement, size) {
+  const width = size === 'auto' ? 'auto' : `${size.width}px`;
+  const height = size === 'auto' ? 'auto' : `${size.height}px`;
+  popupElement.style.setProperty('--popup-width', width);
+  popupElement.style.setProperty('--popup-height', height);
+}
+function setPositionerCssSize(positionerElement, size) {
+  const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
+  const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
+  positionerElement.style.setProperty('--positioner-width', width);
+  positionerElement.style.setProperty('--positioner-height', height);
 }

package/esm/utils/usePopupViewport.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { ReactStore } from '@base-ui/utils/store';
+import { Side } from "./useAnchorPositioning.js";
+export type PopupViewportCssVars = {
+  /**
+   * CSS variable name storing the popup width for the previous content snapshot.
+   */
+  popupWidth: string;
+  /**
+   * CSS variable name storing the popup height for the previous content snapshot.
+   */
+  popupHeight: string;
+};
+export interface PopupViewportState {
+  /**
+   * Direction from which the popup was activated, used for directional animations.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+}
+type PopupViewportStore = Pick<ReactStore<any, any, any>, 'useState' | 'set'>;
+export interface UsePopupViewportParameters {
+  /**
+   * Popup store instance for accessing shared popup state.
+   */
+  store: PopupViewportStore;
+  /**
+   * Side of the positioner relative to the trigger.
+   */
+  side: Side;
+  /**
+   * CSS variable names used for sizing the previous content snapshot.
+   */
+  cssVars: PopupViewportCssVars;
+  /**
+   * Viewport children to render in the current container.
+   */
+  children?: React.ReactNode;
+}
+export interface UsePopupViewportResult {
+  /**
+   * The viewport children wrapped in current/previous containers as needed.
+   */
+  children: React.ReactNode;
+  /**
+   * Viewport state used for data attributes and render prop styling.
+   */
+  state: PopupViewportState;
+}
+/**
+ * Builds morphing viewport containers for popups that animate between trigger-based content.
+ * Handles previous-content snapshots, auto-resize, and state attributes for transitions.
+ */
+export declare function usePopupViewport(parameters: UsePopupViewportParameters): UsePopupViewportResult;
+export {};