@base-ui/react 1.1.0 → 1.3.0

package/tooltip/viewport/TooltipViewport.js

@@ -7,19 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipViewport = 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 _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
-var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
-var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipViewportCssVars = require("./TooltipViewportCssVars");
-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,142 +35,21 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
   } = componentProps;
   const store = (0, _TooltipRootContext.useTooltipRootContext)();
   const positioner = (0, _TooltipPositionerContext.useTooltipPositionerContext)();
-  const direction = (0, _directionProvider.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 = (0, _usePreviousValue.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 = (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
-    }, 'current');
-  } 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: {
-          [_TooltipViewportCssVars.TooltipViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [_TooltipViewportCssVars.TooltipViewportCssVars.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
-      }, 'current')]
-    });
-  }
-
-  // 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: _TooltipViewportCssVars.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 (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -188,56 +59,4 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
     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/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/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/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/use-button/useButton.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _mergeProps = require("../merge-props");
 var _CompositeRootContext = require("../composite/root/CompositeRootContext");
@@ -19,14 +20,12 @@ function useButton(parameters = {}) {
     disabled = false,
     focusableWhenDisabled,
     tabIndex = 0,
-    native: isNativeButton = true
+    native: isNativeButton = true,
+    composite: compositeProp
   } = parameters;
   const elementRef = React.useRef(null);
-  const isCompositeItem = (0, _CompositeRootContext.useCompositeRootContext)(true) !== undefined;
-  const isValidLink = (0, _useStableCallback.useStableCallback)(() => {
-    const element = elementRef.current;
-    return Boolean(element?.tagName === 'A' && element?.href);
-  });
+  const compositeRootContext = (0, _CompositeRootContext.useCompositeRootContext)(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
   const {
     props: focusableWhenDisabledProps
   } = (0, _useFocusableWhenDisabled.useFocusableWhenDisabled)({
@@ -42,13 +41,17 @@ function useButton(parameters = {}) {
       if (!elementRef.current) {
         return;
       }
-      const isButtonTag = elementRef.current.tagName === 'BUTTON';
+      const isButtonTag = isButtonElement(elementRef.current);
       if (isNativeButton) {
         if (!isButtonTag) {
-          (0, _error.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.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`.';
+          (0, _error.error)(`${message}${ownerStackMessage}`);
         }
       } else if (isButtonTag) {
-        (0, _error.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.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`.';
+        (0, _error.error)(`${message}${ownerStackMessage}`);
       }
     }, [isNativeButton]);
   }
@@ -92,39 +95,67 @@ function useButton(parameters = {}) {
         }
       },
       onKeyDown(event) {
-        if (!disabled) {
-          (0, _mergeProps.makeEventPreventable)(event);
-          externalOnKeyDown?.(event);
+        if (disabled) {
+          return;
         }
+        (0, _mergeProps.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) {
-          (0, _mergeProps.makeEventPreventable)(event);
-          externalOnKeyUp?.(event);
+        (0, _mergeProps.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);
         }
       },
@@ -138,7 +169,7 @@ function useButton(parameters = {}) {
     }, !isNativeButton ? {
       role: 'button'
     } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isNativeButton, isValidLink]);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = (0, _useStableCallback.useStableCallback)(element => {
     elementRef.current = element;
     updateDisabled();
@@ -150,4 +181,7 @@ function useButton(parameters = {}) {
 }
 function isButtonElement(elem) {
   return (0, _dom.isHTMLElement)(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
 }

package/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/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/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/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/utils/closePart.js

@@ -0,0 +1,48 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClosePartProvider = ClosePartProvider;
+exports.useClosePartCount = useClosePartCount;
+exports.useClosePartRegistration = useClosePartRegistration;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _jsxRuntime = require("react/jsx-runtime");
+const ClosePartContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ClosePartContext.displayName = "ClosePartContext";
+function useClosePartCount() {
+  const [closePartCount, setClosePartCount] = React.useState(0);
+  const register = (0, _useStableCallback.useStableCallback)(() => {
+    setClosePartCount(count => count + 1);
+    return () => {
+      setClosePartCount(count => Math.max(0, count - 1));
+    };
+  });
+  const context = React.useMemo(() => ({
+    register
+  }), [register]);
+  return {
+    context,
+    hasClosePart: closePartCount > 0
+  };
+}
+function ClosePartProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClosePartContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function useClosePartRegistration() {
+  const context = React.useContext(ClosePartContext);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return context?.register();
+  }, [context]);
+}

package/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.