@base-ui/react 1.1.0 → 1.2.0

package/preview-card/store/PreviewCardStore.d.ts

@@ -12,21 +12,261 @@ export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
 declare const selectors: {
   instantType: (state: State<unknown>) => "focus" | "dismiss" | undefined;
   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 PreviewCardStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
   constructor(initialState?: Partial<State<Payload>>);

package/preview-card/trigger/PreviewCardTrigger.d.ts

@@ -21,21 +21,21 @@ export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUICompon
   /**
    * A handle to associate the trigger with a preview card.
    */
-  handle?: PreviewCardHandle<Payload>;
+  handle?: PreviewCardHandle<Payload> | undefined;
   /**
    * A payload to pass to the preview card when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * How long to wait before the preview card opens. Specified in milliseconds.
    * @default 600
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the preview card. Specified in milliseconds.
    * @default 300
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
 }
 export declare namespace PreviewCardTrigger {
   type State = PreviewCardTriggerState;

package/preview-card/trigger/PreviewCardTrigger.js

@@ -37,7 +37,7 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
   const rootContext = (0, _PreviewCardContext.usePreviewCardRootContext)(true);
   const store = handle?.store ?? rootContext;
   if (!store) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(89));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(89));
   }
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
@@ -71,9 +71,9 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
   const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
     delay: delayWithDefault
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open: isOpenedByThisTrigger
-  }), [isOpenedByThisTrigger]);
+  };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const element = (0, _useRenderElement.useRenderElement)('a', componentProps, {
     state,

package/preview-card/viewport/PreviewCardViewport.d.ts

@@ -17,6 +17,11 @@ export declare namespace PreviewCardViewport {
     children?: React.ReactNode;
   }
   interface State {
-    activationDirection?: string;
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    instant: 'dismiss' | 'focus' | undefined;
   }
 }

package/preview-card/viewport/PreviewCardViewport.js

@@ -7,19 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PreviewCardViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _inertValue = require("@base-ui/utils/inertValue");
-var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
-var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
-var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _PreviewCardViewportCssVars = require("./PreviewCardViewportCssVars");
-var _directionProvider = require("../../direction-provider");
-var _jsxRuntime = require("react/jsx-runtime");
+var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
   activationDirection: value => value ? {
     'data-activation-direction': value
@@ -43,146 +35,21 @@ const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.for
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
   const positioner = (0, _PreviewCardPositionerContext.usePreviewCardPositionerContext)();
-  const direction = (0, _directionProvider.useDirection)();
-  const activeTrigger = store.useState('activeTriggerElement');
-  const activeTriggerId = store.useState('activeTriggerId');
-  const payload = store.useState('payload');
-  const open = store.useState('open');
   const instantType = store.useState('instantType');
-  const mounted = store.useState('mounted');
-  const popupElement = store.useState('popupElement');
-  const positionerElement = store.useState('positionerElement');
-  const previousActiveTrigger = (0, _usePreviousValue.usePreviousValue)(open ? activeTrigger : null);
-  // Remount current content on trigger changes (and once more when payload lags) to avoid DOM reuse flashes.
-  // The key bumps immediately on trigger switches, then again if the payload arrives on a later render.
-  const currentContentKey = usePopupContentKey(activeTriggerId, payload);
-  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 = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
-  const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
-  const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
-  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    store.set('hasViewport', true);
-    return () => {
-      store.set('hasViewport', false);
-    };
-  }, [store]);
-  const handleMeasureLayout = (0, _useStableCallback.useStableCallback)(() => {
-    currentContainerRef.current?.style.setProperty('animation', 'none');
-    currentContainerRef.current?.style.setProperty('transition', 'none');
-    previousContainerRef.current?.style.setProperty('display', 'none');
-  });
-  const handleMeasureLayoutComplete = (0, _useStableCallback.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);
-  (0, _useIsoLayoutEffect.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]);
-
-  // 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.
-  (0, _useIsoLayoutEffect.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 isTransitioning = previousContentNode != null;
-  let childrenToRender;
-  if (!isTransitioning) {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-current": true,
-      ref: currentContainerRef,
-      children: children
-    }, currentContentKey);
-  } else {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-previous": true,
-        inert: (0, _inertValue.inertValue)(true),
-        ref: previousContainerRef,
-        style: {
-          [_PreviewCardViewportCssVars.PreviewCardViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [_PreviewCardViewportCssVars.PreviewCardViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
-          position: 'absolute'
-        },
-        "data-ending-style": showStartingStyleAttribute ? undefined : ''
-      }, 'previous'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-current": true,
-        ref: currentContainerRef,
-        "data-starting-style": showStartingStyleAttribute ? '' : undefined,
-        children: children
-      }, currentContentKey)]
-    });
-  }
-
-  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const container = previousContainerRef.current;
-    if (!container || !previousContentNode) {
-      return;
-    }
-    container.replaceChildren(...Array.from(previousContentNode.childNodes));
-  }, [previousContentNode]);
-  (0, _usePopupAutoResize.usePopupAutoResize)({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
     side: positioner.side,
-    direction
+    cssVars: _PreviewCardViewportCssVars.PreviewCardViewportCssVars,
+    children
   });
-  const state = React.useMemo(() => {
-    return {
-      activationDirection: getActivationDirection(newTriggerOffset),
-      transitioning: isTransitioning,
-      instant: instantType
-    };
-  }, [newTriggerOffset, isTransitioning, instantType]);
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -192,87 +59,4 @@ const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.for
     stateAttributesMapping
   });
 });
-if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";
-/**
- * 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) treating values
- * within tolerance 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
-  };
-}
-
-/**
- * Returns a key that forces remounting content when triggers change or a payload is updated.
- */
-function usePopupContentKey(activeTriggerId, payload) {
-  const [contentKey, setContentKey] = React.useState(0);
-  const previousActiveTriggerIdRef = React.useRef(activeTriggerId);
-  const previousPayloadRef = React.useRef(payload);
-  const pendingPayloadUpdateRef = React.useRef(false);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // Compare against the last committed values to decide whether we need a new DOM subtree.
-    const previousActiveTriggerId = previousActiveTriggerIdRef.current;
-    const previousPayload = previousPayloadRef.current;
-    const triggerIdChanged = activeTriggerId !== previousActiveTriggerId;
-    const payloadChanged = payload !== previousPayload;
-    if (triggerIdChanged) {
-      // Remount immediately on trigger change; remember if payload hasn't caught up yet.
-      setContentKey(value => value + 1);
-      pendingPayloadUpdateRef.current = !payloadChanged;
-    } else if (pendingPayloadUpdateRef.current && payloadChanged) {
-      // Payload arrived a render later, so remount once more to avoid reusing the old <img>.
-      setContentKey(value => value + 1);
-      pendingPayloadUpdateRef.current = false;
-    }
-
-    // Persist current values for the next render's comparison.
-    previousActiveTriggerIdRef.current = activeTriggerId;
-    previousPayloadRef.current = payload;
-  }, [activeTriggerId, payload]);
-  return `${activeTriggerId ?? 'current'}-${contentKey}`;
-}
+if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";

package/progress/root/ProgressRoot.d.ts

@@ -15,30 +15,30 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */
-  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
+  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**
    * Options to format the value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
    */
-  getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+  getAriaValueText?: ((formattedValue: string | null, value: number | null) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum value.
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum value.
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The current value. The component is indeterminate when value is `null`.
    * @default null