@base-ui/react 1.1.0 → 1.3.0

package/esm/tooltip/viewport/TooltipViewport.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 { useTooltipRootContext } from "../root/TooltipRootContext.js";
 import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
-import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { TooltipViewportCssVars } from "./TooltipViewportCssVars.js";
-import { useDirection } from "../../direction-provider/index.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
@@ -37,142 +29,21 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
   } = componentProps;
   const store = useTooltipRootContext();
   const positioner = useTooltipPositionerContext();
-  const direction = useDirection();
-  const activeTrigger = store.useState('activeTriggerElement');
-  const open = store.useState('open');
   const instantType = store.useState('instantType');
-  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]);
-  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]);
-
-  // 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 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]);
-  usePopupAutoResize({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
     side: positioner.side,
-    direction
+    cssVars: TooltipViewportCssVars,
+    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 useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -182,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/types/index.d.ts

@@ -1 +1,16 @@
-export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+import type * as React from 'react';
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
+};

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,14 +18,16 @@ 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 interface UseMediaQueryState {}
 export declare namespace useMediaQuery {
+  type State = UseMediaQueryState;
   type Options = UseMediaQueryOptions;
 }

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

@@ -1,22 +1,28 @@
 import * as React from 'react';
-export declare function useButton(parameters?: useButton.Parameters): useButton.ReturnValue;
+export declare function useButton(parameters?: UseButtonParameters): UseButtonReturnValue;
 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;
+  /**
+   * Whether the button is part of a composite widget.
+   * When `true`, keyboard activation for Space occurs on keydown rather than keyup.
+   * @default inferred from CompositeRoot context
+   */
+  composite?: boolean | undefined;
 }
 export interface UseButtonReturnValue {
   /**
@@ -31,7 +37,4 @@ export interface UseButtonReturnValue {
    */
   buttonRef: React.Ref<HTMLElement>;
 }
-export declare namespace useButton {
-  type Parameters = UseButtonParameters;
-  type ReturnValue = UseButtonReturnValue;
-}
+export interface UseButtonState {}

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";
@@ -13,14 +14,12 @@ export function useButton(parameters = {}) {
     disabled = false,
     focusableWhenDisabled,
     tabIndex = 0,
-    native: isNativeButton = true
+    native: isNativeButton = true,
+    composite: compositeProp
   } = parameters;
   const elementRef = React.useRef(null);
-  const isCompositeItem = useCompositeRootContext(true) !== undefined;
-  const isValidLink = useStableCallback(() => {
-    const element = elementRef.current;
-    return Boolean(element?.tagName === 'A' && element?.href);
-  });
+  const compositeRootContext = useCompositeRootContext(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
   const {
     props: focusableWhenDisabledProps
   } = useFocusableWhenDisabled({
@@ -36,13 +35,17 @@ export function useButton(parameters = {}) {
       if (!elementRef.current) {
         return;
       }
-      const isButtonTag = elementRef.current.tagName === 'BUTTON';
+      const isButtonTag = isButtonElement(elementRef.current);
       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]);
   }
@@ -86,39 +89,67 @@ export function useButton(parameters = {}) {
         }
       },
       onKeyDown(event) {
-        if (!disabled) {
-          makeEventPreventable(event);
-          externalOnKeyDown?.(event);
+        if (disabled) {
+          return;
         }
+        makeEventPreventable(event);
+        externalOnKeyDown?.(event);
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        const shouldClick = event.target === event.currentTarget && !isNativeButton && !isValidLink() && !disabled;
+        const isCurrentTarget = event.target === event.currentTarget;
+        const currentTarget = event.currentTarget;
+        const isButton = isButtonElement(currentTarget);
+        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
+        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
         const isEnterKey = event.key === 'Enter';
         const isSpaceKey = event.key === ' ';
+        const role = currentTarget.getAttribute('role');
+        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
+        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
+          if (event.defaultPrevented && isTextNavigationRole) {
+            return;
+          }
+          event.preventDefault();
+          if (isLink || isNativeButton && isButton) {
+            currentTarget.click();
+            event.preventBaseUIHandler();
+          } else if (shouldClick) {
+            externalOnClick?.(event);
+            event.preventBaseUIHandler();
+          }
+          return;
+        }
 
-        // Keyboard accessibility for non interactive elements
+        // Keyboard accessibility for native and non-native elements.
         if (shouldClick) {
-          if (isSpaceKey || isEnterKey) {
+          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
             event.preventDefault();
           }
-          if (isEnterKey) {
+          if (!isNativeButton && isEnterKey) {
             externalOnClick?.(event);
           }
         }
       },
       onKeyUp(event) {
+        if (disabled) {
+          return;
+        }
+
         // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
         // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-        // Keyboard accessibility for non interactive elements
-        if (!disabled) {
-          makeEventPreventable(event);
-          externalOnKeyUp?.(event);
+        makeEventPreventable(event);
+        externalOnKeyUp?.(event);
+        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
+          event.preventDefault();
+          return;
         }
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        if (event.target === event.currentTarget && !isNativeButton && !disabled && event.key === ' ') {
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
           externalOnClick?.(event);
         }
       },
@@ -132,7 +163,7 @@ export function useButton(parameters = {}) {
     }, !isNativeButton ? {
       role: 'button'
     } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isNativeButton, isValidLink]);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = useStableCallback(element => {
     elementRef.current = element;
     updateDisabled();
@@ -144,4 +175,7 @@ export function useButton(parameters = {}) {
 }
 function isButtonElement(elem) {
   return isHTMLElement(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
 }

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,52 +17,54 @@ 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 interface UseRenderState {}
 export declare namespace useRender {
-  type RenderProp<State = Record<string, unknown>> = UseRenderRenderProp<State>;
+  type State = UseRenderState;
+  type RenderProp<TState = Record<string, unknown>> = UseRenderRenderProp<TState>;
   type ElementProps<ElementType extends React.ElementType> = UseRenderElementProps<ElementType>;
-  type ComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, State, RenderFunctionProps>;
-  type Parameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<State, RenderedElementType, Enabled>;
+  type ComponentProps<ElementType extends React.ElementType, TState = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, TState, RenderFunctionProps>;
+  type Parameters<TState, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<TState, RenderedElementType, Enabled>;
   type ReturnValue<Enabled extends boolean | undefined> = UseRenderReturnValue<Enabled>;
 }

package/esm/utils/FloatingPortalLite.d.ts

@@ -6,7 +6,9 @@ import { type FloatingPortal } from "../floating-ui-react/index.js";
  * @internal
  */
 export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
+export interface FloatingPortalLiteState {}
+export interface FloatingPortalLiteProps<TState> extends FloatingPortal.Props<TState> {}
 export declare namespace FloatingPortalLite {
-  type Props<State> = FloatingPortalLiteProps<State>;
+  type State = FloatingPortalLiteState;
+  type Props<TState> = FloatingPortalLiteProps<TState>;
 }

package/esm/utils/InternalBackdrop.d.ts

@@ -3,13 +3,15 @@ import * as React from 'react';
  * @internal
  */
 export declare const InternalBackdrop: React.ForwardRefExoticComponent<InternalBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export interface InternalBackdropState {}
 export interface InternalBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * 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 State = InternalBackdropState;
   type Props = InternalBackdropProps;
 }

package/esm/utils/closePart.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ClosePartContextValue {
+  register: () => () => void;
+}
+export declare function useClosePartCount(): {
+  context: {
+    register: () => () => void;
+  };
+  hasClosePart: boolean;
+};
+export declare function ClosePartProvider(props: {
+  value: ClosePartContextValue;
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useClosePartRegistration(): void;
+export {};

package/esm/utils/closePart.js

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ClosePartContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ClosePartContext.displayName = "ClosePartContext";
+export function useClosePartCount() {
+  const [closePartCount, setClosePartCount] = React.useState(0);
+  const register = useStableCallback(() => {
+    setClosePartCount(count => count + 1);
+    return () => {
+      setClosePartCount(count => Math.max(0, count - 1));
+    };
+  });
+  const context = React.useMemo(() => ({
+    register
+  }), [register]);
+  return {
+    context,
+    hasClosePart: closePartCount > 0
+  };
+}
+export function ClosePartProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(ClosePartContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useClosePartRegistration() {
+  const context = React.useContext(ClosePartContext);
+  useIsoLayoutEffect(() => {
+    return context?.register();
+  }, [context]);
+}

package/esm/utils/constants.d.ts

@@ -7,6 +7,10 @@ export declare const DISABLED_TRANSITIONS_STYLE: {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export declare const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+export declare const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
+export declare const LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";
+export declare const BASE_UI_SWIPE_IGNORE_SELECTOR = "[data-base-ui-swipe-ignore]";
+export declare const LEGACY_SWIPE_IGNORE_SELECTOR = "[data-swipe-ignore]";
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and
  * use `var(--available-height)` to limit their height.

package/esm/utils/constants.js

@@ -7,6 +7,10 @@ export const DISABLED_TRANSITIONS_STYLE = {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
+export const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = 'data-base-ui-swipe-ignore';
+export const LEGACY_SWIPE_IGNORE_ATTRIBUTE = 'data-swipe-ignore';
+export const BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
+export const LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and