@base-ui/react 1.0.0 → 1.2.0

package/esm/tooltip/viewport/TooltipViewport.js

@@ -1,16 +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 { useTooltipRootContext } from "../root/TooltipRootContext.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { TooltipViewportCssVars } from "./TooltipViewportCssVars.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
@@ -33,130 +28,22 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
-  const activeTrigger = store.useState('activeTriggerElement');
-  const open = store.useState('open');
-  const floatingContext = store.useState('floatingRootContext');
+  const positioner = useTooltipPositionerContext();
   const instantType = store.useState('instantType');
-  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);
-  const handleMeasureLayout = useStableCallback(() => {
-    currentContainerRef.current?.style.setProperty('animation', 'none');
-    currentContainerRef.current?.style.setProperty('transition', 'none');
-    previousContainerRef.current?.style.setProperty('display', 'none');
-  });
-  const handleMeasureLayoutComplete = useStableCallback(data => {
-    currentContainerRef.current?.style.removeProperty('animation');
-    currentContainerRef.current?.style.removeProperty('transition');
-    previousContainerRef.current?.style.removeProperty('display');
-    if (!previousContentDimensions) {
-      setPreviousContentDimensions(data.previousDimensions);
-    }
-  });
-  React.useEffect(() => {
-    floatingContext.context.events.on('measure-layout', handleMeasureLayout);
-    floatingContext.context.events.on('measure-layout-complete', handleMeasureLayoutComplete);
-    return () => {
-      floatingContext.context.events.off('measure-layout', handleMeasureLayout);
-      floatingContext.context.events.off('measure-layout-complete', handleMeasureLayoutComplete);
-    };
-  }, [floatingContext, handleMeasureLayout, handleMeasureLayoutComplete]);
-  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]);
-
-  // 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 {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
+    side: positioner.side,
+    cssVars: TooltipViewportCssVars,
+    children
   });
-  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: {
-          [TooltipViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [TooltipViewportCssVars.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]);
-  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 useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -166,56 +53,4 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
     stateAttributesMapping
   });
 });
-if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";
-/**
- * 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") TooltipViewport.displayName = "TooltipViewport";

package/esm/unstable-use-media-query/index.d.ts

@@ -5,12 +5,12 @@ export interface UseMediaQueryOptions {
    * it returns a default matches during the first mount.
    * @default false
    */
-  defaultMatches?: boolean;
+  defaultMatches?: boolean | undefined;
   /**
    * You can provide your own implementation of matchMedia.
    * This can be used for handling an iframe content window.
    */
-  matchMedia?: typeof window.matchMedia;
+  matchMedia?: typeof window.matchMedia | undefined;
   /**
    * To perform the server-side hydration, the hook needs to render twice.
    * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
@@ -18,13 +18,13 @@ export interface UseMediaQueryOptions {
    * You can set this option to `true` if you use the returned value **only** client-side.
    * @default false
    */
-  noSsr?: boolean;
+  noSsr?: boolean | undefined;
   /**
    * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
    */
-  ssrMatchMedia?: (query: string) => {
+  ssrMatchMedia?: ((query: string) => {
     matches: boolean;
-  };
+  }) | undefined;
 }
 export declare namespace useMediaQuery {
   type Options = UseMediaQueryOptions;

package/esm/use-button/useButton.d.ts

@@ -5,18 +5,18 @@ export interface UseButtonParameters {
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the button may receive focus even if it is disabled.
    * @default false
    */
-  focusableWhenDisabled?: boolean;
-  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
+  focusableWhenDisabled?: boolean | undefined;
+  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']> | undefined;
   /**
    * Whether the component is being rendered as a native button.
    * @default true
    */
-  native?: boolean;
+  native?: boolean | undefined;
 }
 export interface UseButtonReturnValue {
   /**

package/esm/use-button/useButton.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { isHTMLElement } from '@floating-ui/utils/dom';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { error } from '@base-ui/utils/error';
+import { SafeReact } from '@base-ui/utils/safeReact';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { makeEventPreventable, mergeProps } from "../merge-props/index.js";
 import { useCompositeRootContext } from "../composite/root/CompositeRootContext.js";
@@ -39,10 +40,14 @@ export function useButton(parameters = {}) {
       const isButtonTag = elementRef.current.tagName === 'BUTTON';
       if (isNativeButton) {
         if (!isButtonTag) {
-          error('A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.');
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
+          error(`${message}${ownerStackMessage}`);
         }
       } else if (isButtonTag) {
-        error('A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.');
+        const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
+        error(`${message}${ownerStackMessage}`);
       }
     }, [isNativeButton]);
   }

package/esm/use-render/index.d.ts

@@ -1 +1,2 @@
-export * from "./useRender.js";
+export * from "./useRender.js";
+export type { HTMLProps, ComponentRenderFn } from "../utils/types.js";

package/esm/use-render/index.js

@@ -1 +1,2 @@
-export * from "./useRender.js";
+export * from "./useRender.js";
+export {};

package/esm/use-render/useRender.d.ts

@@ -8,7 +8,7 @@ import { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
  * @public
  */
 export declare function useRender<State extends Record<string, unknown>, RenderedElementType extends Element, Enabled extends boolean | undefined = undefined>(params: useRender.Parameters<State, RenderedElementType, Enabled>): useRender.ReturnValue<Enabled>;
-export type UseRenderRenderProp<State = Record<string, unknown>> = ComponentRenderFn<React.HTMLAttributes<any>, State> | React.ReactElement;
+export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactElement | ComponentRenderFn<React.HTMLAttributes<any>, State>;
 export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
 export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
   /**
@@ -17,46 +17,46 @@ export type UseRenderComponentProps<ElementType extends React.ElementType, State
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement;
+  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
 };
 export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
   /**
    * The React element or a function that returns one to override the default element.
    */
-  render?: UseRenderRenderProp<State>;
+  render?: UseRenderRenderProp<State> | undefined;
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[];
+  ref?: (React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[]) | undefined;
   /**
    * The state of the component, passed as the second argument to the `render` callback.
    * State properties are automatically converted to data-* attributes.
    */
-  state?: State;
+  state?: State | undefined;
   /**
    * Custom mapping for converting state properties to data-* attributes.
    * @example
    * { isActive: (value) => (value ? { 'data-is-active': '' } : null) }
    */
-  stateAttributesMapping?: StateAttributesMapping<State>;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
   /**
    * Props to be spread on the rendered element.
    * They are merged with the internal props of the component, so that event handlers
    * are merged, `className` strings and `style` properties are joined, while other external props overwrite the
    * internal ones.
    */
-  props?: Record<string, unknown>;
+  props?: Record<string, unknown> | undefined;
   /**
    * If `false`, the hook will skip most of its internal logic and return `null`.
    * This is useful for rendering a component conditionally.
    * @default true
    */
-  enabled?: Enabled;
+  enabled?: Enabled | undefined;
   /**
    * The default tag name to use for the rendered element when `render` is not provided.
    * @default 'div'
    */
-  defaultTagName?: keyof React.JSX.IntrinsicElements;
+  defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
 export declare namespace useRender {

package/esm/utils/FloatingPortalLite.d.ts

@@ -5,7 +5,7 @@ import { type FloatingPortal } from "../floating-ui-react/index.js";
  * For components that don't need tabbable logic, use `FloatingPortalLite`.
  * @internal
  */
-export declare const FloatingPortalLite: React.ForwardRefExoticComponent<FloatingPortalLite.Props<any> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
 export declare namespace FloatingPortalLite {
   type Props<State> = FloatingPortalLiteProps<State>;

package/esm/utils/InternalBackdrop.d.ts

@@ -8,7 +8,7 @@ export interface InternalBackdropProps extends React.HTMLAttributes<HTMLDivEleme
    * The element to cut out of the backdrop.
    * This is useful for allowing certain elements to be interactive while the backdrop is present.
    */
-  cutout?: Element | null;
+  cutout?: (Element | null) | undefined;
 }
 export declare namespace InternalBackdrop {
   type Props = InternalBackdropProps;

package/esm/utils/createBaseUIEventDetails.d.ts

@@ -17,12 +17,15 @@ interface ReasonToEventMap {
   [REASONS.inputClear]: InputEvent | FocusEvent | Event;
   [REASONS.inputBlur]: FocusEvent;
   [REASONS.inputPaste]: ClipboardEvent;
+  [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
   [REASONS.focusOut]: FocusEvent | KeyboardEvent;
   [REASONS.escapeKey]: KeyboardEvent;
+  [REASONS.closeWatcher]: Event;
   [REASONS.listNavigation]: KeyboardEvent;
   [REASONS.keyboard]: KeyboardEvent;
   [REASONS.pointer]: PointerEvent;
   [REASONS.drag]: PointerEvent | TouchEvent;
+  [REASONS.swipe]: PointerEvent | TouchEvent;
   [REASONS.wheel]: WheelEvent;
   [REASONS.scrub]: PointerEvent;
   [REASONS.cancelOpen]: MouseEvent;

package/esm/utils/formatNumber.d.ts

@@ -1,4 +1,5 @@
 export declare const cache: Map<string, Intl.NumberFormat>;
 export declare function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function formatNumber(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
-export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberValue(value: number | null, locale?: Intl.LocalesArgument, format?: Intl.NumberFormatOptions): string;

package/esm/utils/formatNumber.js

@@ -23,4 +23,15 @@ export function formatNumberMaxPrecision(value, locale, options) {
     ...options,
     maximumFractionDigits: 20
   });
+}
+export function formatNumberValue(value, locale, format) {
+  if (value == null) {
+    return '';
+  }
+  if (!format) {
+    return formatNumber(value / 100, locale, {
+      style: 'percent'
+    });
+  }
+  return formatNumber(value, locale, format);
 }

package/esm/utils/getDisabledMountTransitionStyles.d.ts

@@ -1,4 +1,4 @@
 import type { TransitionStatus } from "./useTransitionStatus.js";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
-  style?: React.CSSProperties;
+  style?: React.CSSProperties | undefined;
 };

package/esm/utils/getPseudoElementBounds.js

@@ -2,7 +2,7 @@ export function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
   // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
   const beforeStyles = window.getComputedStyle(element, '::before');

package/esm/utils/itemEquality.d.ts

@@ -1,6 +1,6 @@
-export type ItemEqualityComparer<Item = any, Value = Item> = (item: Item, value: Value) => boolean;
+export type ItemEqualityComparer<Item = any, Value = Item> = (itemValue: Item, selectedValue: Value) => boolean;
 export declare const defaultItemEquality: ItemEqualityComparer;
-export declare function compareItemEquality<Item, Value>(item: Item, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function itemIncludes<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function findItemIndex<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): number;
-export declare function removeItem<Item, Value>(collection: readonly Item[], value: Value, comparer: ItemEqualityComparer<Item, Value>): Item[];
+export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
+export declare function selectedValueIncludes<Item, Value>(selectedValues: readonly Item[] | undefined | null, itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): boolean;
+export declare function findItemIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): number;
+export declare function removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/esm/utils/itemEquality.js

@@ -1,32 +1,32 @@
-export const defaultItemEquality = (item, value) => Object.is(item, value);
-export function compareItemEquality(item, value, comparer) {
-  if (item == null || value == null) {
-    return Object.is(item, value);
+export const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+export function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
   }
-  return comparer(item, value);
+  return comparer(itemValue, selectedValue);
 }
-export function itemIncludes(collection, value, comparer) {
-  if (!collection || collection.length === 0) {
+export function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
     return false;
   }
-  return collection.some(item => {
-    if (item === undefined) {
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
       return false;
     }
-    return compareItemEquality(item, value, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
-export function findItemIndex(collection, value, comparer) {
-  if (!collection || collection.length === 0) {
+export function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
     return -1;
   }
-  return collection.findIndex(item => {
-    if (item === undefined) {
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
       return false;
     }
-    return compareItemEquality(item, value, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
-export function removeItem(collection, value, comparer) {
-  return collection.filter(item => !compareItemEquality(item, value, comparer));
+export function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

package/esm/utils/popupStateMapping.d.ts

@@ -19,6 +19,16 @@ export declare enum CommonPopupDataAttributes {
    * Present when the anchor is hidden.
    */
   anchorHidden = "data-anchor-hidden",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
 }
 export declare enum CommonTriggerDataAttributes {
   /**

package/esm/utils/popupStateMapping.js

@@ -20,6 +20,16 @@ export let CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
    * Present when the anchor is hidden.
    */
   CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  CommonPopupDataAttributes["side"] = "data-side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  CommonPopupDataAttributes["align"] = "data-align";
   return CommonPopupDataAttributes;
 }({});
 export let CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {

package/esm/utils/popups/popupStoreUtils.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
@@ -11,16 +13,24 @@ import { useOpenChangeComplete } from "../useOpenChangeComplete.js";
 export function useTriggerRegistration(id, store) {
   // Keep track of the currently registered element to unregister it on unmount or id change.
   const registeredElementIdRef = React.useRef(null);
+  const registeredElementRef = React.useRef(null);
   return React.useCallback(element => {
     if (id === undefined) {
       return;
     }
     if (registeredElementIdRef.current !== null) {
-      store.context.triggerElements.delete(registeredElementIdRef.current);
+      const registeredId = registeredElementIdRef.current;
+      const registeredElement = registeredElementRef.current;
+      const currentElement = store.context.triggerElements.getById(registeredId);
+      if (registeredElement && currentElement === registeredElement) {
+        store.context.triggerElements.delete(registeredId);
+      }
       registeredElementIdRef.current = null;
+      registeredElementRef.current = null;
     }
     if (element !== null) {
       registeredElementIdRef.current = id;
+      registeredElementRef.current = element;
       store.context.triggerElements.add(id, element);
     }
   }, [store, id]);
@@ -39,7 +49,18 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
   const registerTrigger = useStableCallback(element => {
     baseRegisterTrigger(element);
-    if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
+    if (!element || !store.select('open')) {
+      return;
+    }
+    const activeTriggerId = store.select('activeTriggerId');
+    if (activeTriggerId === triggerId) {
+      store.update({
+        activeTriggerElement: element,
+        ...stateUpdates
+      });
+      return;
+    }
+    if (activeTriggerId == null) {
       // This runs when popup is open, but no active trigger is set.
       // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
       // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).

package/esm/utils/popups/popupTriggerMap.d.ts

@@ -3,7 +3,7 @@
  * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
  */
 export declare class PopupTriggerMap {
-  private elements;
+  private elementsSet;
   private idMap;
   constructor();
   /**
@@ -24,7 +24,20 @@ export declare class PopupTriggerMap {
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate: (el: Element) => boolean): boolean;
+  /**
+   * Returns the trigger element associated with the given ID, or undefined if no such element exists.
+   */
   getById(id: string): Element | undefined;
+  /**
+   * Returns an iterable of all registered trigger entries, where each entry is a tuple of [id, element].
+   */
   entries(): IterableIterator<[string, Element]>;
+  /**
+   * Returns an iterable of all registered trigger elements.
+   */
+  elements(): IterableIterator<Element>;
+  /**
+   * Returns the number of registered trigger elements.
+   */
   get size(): number;
 }