@base-ui/react 1.1.0 → 1.2.0

package/esm/popover/store/PopoverStore.d.ts

@@ -38,21 +38,261 @@ declare const selectors: {
   openOnHover: (state: State<unknown>) => boolean;
   closeDelay: (state: State<unknown>) => number;
   hasViewport: (state: State<unknown>) => boolean;
-  open: (state: PopupStoreState<unknown>) => boolean;
-  mounted: (state: PopupStoreState<unknown>) => boolean;
-  transitionStatus: (state: PopupStoreState<unknown>) => import("../../utils/useTransitionStatus.js").TransitionStatus;
-  floatingRootContext: (state: PopupStoreState<unknown>) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
-  preventUnmountingOnClose: (state: PopupStoreState<unknown>) => boolean;
-  payload: (state: PopupStoreState<unknown>) => unknown;
-  activeTriggerId: (state: PopupStoreState<unknown>) => string | null;
-  activeTriggerElement: (state: PopupStoreState<unknown>) => Element | null;
-  isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../index.js").HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => import("../../index.js").HTMLProps;
-  popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
-  positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
+  open: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  mounted: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  transitionStatus: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  floatingRootContext: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  preventUnmountingOnClose: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  payload: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => unknown;
+  activeTriggerId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | null;
+  activeTriggerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => Element | null;
+  isTriggerActive: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  isOpenedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  isMountedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  triggerProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, isActive: boolean) => import("../../index.js").HTMLProps;
+  popupProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../index.js").HTMLProps;
+  popupElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => HTMLElement | null;
+  positionerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => HTMLElement | null;
 };
 export declare class PopoverStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
   constructor(initialState?: Partial<State<Payload>>);

package/esm/popover/trigger/PopoverTrigger.d.ts

@@ -28,32 +28,32 @@ export type PopoverTriggerProps<Payload = unknown> = NativeButtonProps & BaseUIC
    * Set to `false` if the rendered element is not a button (e.g. `<div>`).
    * @default true
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
   /**
    * A handle to associate the trigger with a popover.
    */
-  handle?: PopoverHandle<Payload>;
+  handle?: PopoverHandle<Payload> | undefined;
   /**
    * A payload to pass to the popover when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * ID of the trigger. In addition to being forwarded to the rendered element,
    * it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the popover should also open when the trigger is hovered.
    * @default false
    */
-  openOnHover?: boolean;
+  openOnHover?: boolean | undefined;
   /**
    * How long to wait before the popover may be opened on hover. Specified in milliseconds.
    *
    * Requires the `openOnHover` prop.
    * @default 300
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the popover that was opened on hover.
    * Specified in milliseconds.
@@ -61,7 +61,7 @@ export type PopoverTriggerProps<Payload = unknown> = NativeButtonProps & BaseUIC
    * Requires the `openOnHover` prop.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
 };
 export declare namespace PopoverTrigger {
   type State = PopoverTriggerState;

package/esm/popover/trigger/PopoverTrigger.js

@@ -79,10 +79,10 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
   });
   const localProps = useInteractions([click]);
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open: isOpenedByThisTrigger
-  }), [disabled, isOpenedByThisTrigger]);
+  };
   const {
     getButtonProps,
     buttonRef

package/esm/popover/viewport/PopoverViewport.d.ts

@@ -17,6 +17,14 @@ export declare namespace PopoverViewport {
     children?: React.ReactNode;
   }
   interface State {
-    activationDirection?: string;
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'dismiss' | 'click' | undefined;
   }
 }

package/esm/popover/viewport/PopoverViewport.js

@@ -1,19 +1,11 @@
 '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.js";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
-import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { PopoverViewportCssVars } from "./PopoverViewportCssVars.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePopupViewport } from "../../utils/usePopupViewport.js";
 const stateAttributesMapping = {
   activationDirection: value => value ? {
     'data-activation-direction': value
@@ -38,141 +30,24 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
   const {
     store
   } = usePopoverRootContext();
-  const positioner = usePopoverPositionerContext();
-  const direction = useDirection();
-  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 previousActiveTrigger = usePreviousValue(open ? activeTrigger : null);
-  const capturedNodeRef = React.useRef(null);
-  const [previousContentNode, setPreviousContentNode] = React.useState(null);
-  const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
-  const currentContainerRef = React.useRef(null);
-  const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
-  const cleanupFrame = useAnimationFrame();
-  const [previousContentDimensions, setPreviousContentDimensions] = React.useState(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 => {
-    currentContainerRef.current?.style.removeProperty('animation');
-    currentContainerRef.current?.style.removeProperty('transition');
-    previousContainerRef.current?.style.removeProperty('display');
-    if (previousDimensions) {
-      setPreviousContentDimensions(previousDimensions);
-    }
-  });
-  const lastHandledTriggerRef = React.useRef(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;
-  if (!isTransitioning) {
-    childrenToRender = /*#__PURE__*/_jsx("div", {
-      "data-current": true,
-      ref: currentContainerRef,
-      children: children
-    }, 'current');
-  } else {
-    childrenToRender = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        "data-previous": true,
-        inert: inertValue(true),
-        ref: previousContainerRef,
-        style: {
-          [PopoverViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [PopoverViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
-          position: 'absolute'
-        },
-        "data-ending-style": showStartingStyleAttribute ? undefined : ''
-      }, 'previous'), /*#__PURE__*/_jsx("div", {
-        "data-current": true,
-        ref: currentContainerRef,
-        "data-starting-style": showStartingStyleAttribute ? '' : undefined,
-        children: children
-      }, 'current')]
-    });
-  }
-
-  // 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 {
+    side
+  } = usePopoverPositionerContext();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
+    side,
+    cssVars: PopoverViewportCssVars,
+    children
   });
-  const state = React.useMemo(() => {
-    return {
-      activationDirection: getActivationDirection(newTriggerOffset),
-      transitioning: isTransitioning
-    };
-  }, [newTriggerOffset, isTransitioning]);
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
   return useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -182,56 +57,4 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
     stateAttributesMapping
   });
 });
-if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";
-/**
- * Returns a string describing the provided offset.
- * It describes both the horizontal and vertical offset, separated by a space.
- *
- * @param offset
- */
-function getActivationDirection(offset) {
-  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, tolerance, positiveLabel, negativeLabel) {
-  if (value > tolerance) {
-    return positiveLabel;
-  }
-  if (value < -tolerance) {
-    return negativeLabel;
-  }
-  return '';
-}
-
-/**
- * Calculates the relative position between centers of two elements.
- */
-function calculateRelativePosition(from, to) {
-  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
-  };
-}
+if (process.env.NODE_ENV !== "production") PopoverViewport.displayName = "PopoverViewport";

package/esm/popover/viewport/PopoverViewportDataAttributes.d.ts

@@ -18,4 +18,9 @@ export declare 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",
 }

package/esm/popover/viewport/PopoverViewportDataAttributes.js

@@ -18,5 +18,10 @@ export let PopoverViewportDataAttributes = /*#__PURE__*/function (PopoverViewpor
    * Indicates that the viewport is currently transitioning between old and new content.
    */
   PopoverViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'dismiss' | 'click'}
+   */
+  PopoverViewportDataAttributes["instant"] = "data-instant";
   return PopoverViewportDataAttributes;
 }({});

package/esm/preview-card/arrow/PreviewCardArrow.js

@@ -27,12 +27,12 @@ export const PreviewCardArrow = /*#__PURE__*/React.forwardRef(function PreviewCa
     arrowStyles
   } = usePreviewCardPositionerContext();
   const open = store.useState('open');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [arrowRef, forwardedRef],

package/esm/preview-card/arrow/PreviewCardArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let PreviewCardArrowDataAttributes = function (PreviewCardArrowDataAttrib
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PreviewCardArrowDataAttributes["side"] = "data-side";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PreviewCardArrowDataAttributes["align"] = "data-align";
+  PreviewCardArrowDataAttributes[PreviewCardArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the preview card arrow is uncentered.
    */

package/esm/preview-card/backdrop/PreviewCardBackdrop.js

@@ -26,10 +26,10 @@ export const PreviewCardBackdrop = /*#__PURE__*/React.forwardRef(function Previe
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef],