@base-ui/react 1.2.0 → 1.4.0

package/utils/useOpenChangeComplete.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
  */
-export declare function useOpenChangeComplete(parameters: useOpenChangeComplete.Parameters): void;
+export declare function useOpenChangeComplete(parameters: UseOpenChangeCompleteParameters): void;
 export interface UseOpenChangeCompleteParameters {
   /**
    * Whether the hook is enabled.
@@ -22,6 +22,4 @@ export interface UseOpenChangeCompleteParameters {
    */
   onComplete: () => void;
 }
-export declare namespace useOpenChangeComplete {
-  type Parameters = UseOpenChangeCompleteParameters;
-}
+export interface UseOpenChangeCompleteState {}

package/utils/useOpenInteractionType.d.ts

@@ -7,7 +7,6 @@ import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
  */
 export declare function useOpenInteractionType(open: boolean): {
   openMethod: InteractionType | null;
-  reset: () => void;
   triggerProps: {
     onClick: (event: React.MouseEvent | React.PointerEvent) => void;
     onPointerDown: (event: React.PointerEvent) => void;

package/utils/useOpenInteractionType.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useValueChanged = require("./useValueChanged");
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *
@@ -26,19 +27,20 @@ function useOpenInteractionType(open) {
       _detectBrowser.isIOS ? 'touch' : ''));
     }
   });
-  const reset = React.useCallback(() => {
-    setOpenMethod(null);
-  }, []);
+  (0, _useValueChanged.useValueChanged)(open, previousOpen => {
+    if (previousOpen && !open) {
+      setOpenMethod(null);
+    }
+  });
   const {
     onClick,
     onPointerDown
   } = (0, _useEnhancedClickHandler.useEnhancedClickHandler)(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    reset,
     triggerProps: {
       onClick,
       onPointerDown
     }
-  }), [openMethod, reset, onClick, onPointerDown]);
+  }), [openMethod, onClick, onPointerDown]);
 }

package/utils/usePopupAutoResize.js

@@ -14,7 +14,6 @@ var _empty = require("@base-ui/utils/empty");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 var _getCssDimensions = require("./getCssDimensions");
 var _constants = require("./constants");
-const supportsResizeObserver = typeof ResizeObserver !== 'undefined';
 const DEFAULT_ENABLED = () => true;
 
 /**
@@ -59,7 +58,7 @@ function usePopupAutoResize(parameters) {
   }, [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.
-    if (!mounted || !enabled() || !supportsResizeObserver) {
+    if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
       restoreAnchoringStylesRef.current = _empty.NOOP;
       isInitialRenderRef.current = true;
       committedDimensionsRef.current = null;

package/utils/usePopupViewport.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePopupViewport = usePopupViewport;
 var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
 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 _owner = require("@base-ui/utils/owner");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 var _usePopupAutoResize = require("./usePopupAutoResize");
 var _directionProvider = require("../direction-provider");
@@ -80,13 +82,13 @@ function usePopupViewport(parameters) {
       const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
       setNewTriggerOffset(offset);
       cleanupFrame.request(() => {
-        cleanupFrame.request(() => {
+        ReactDOM.flushSync(() => {
           setShowStartingStyleAttribute(false);
-          onAnimationsFinished(() => {
-            setPreviousContentNode(null);
-            setPreviousContentDimensions(null);
-            capturedNodeRef.current = null;
-          });
+        });
+        onAnimationsFinished(() => {
+          setPreviousContentNode(null);
+          setPreviousContentDimensions(null);
+          capturedNodeRef.current = null;
         });
       });
       lastHandledTriggerRef.current = activeTrigger;
@@ -106,7 +108,7 @@ function usePopupViewport(parameters) {
     if (!source) {
       return;
     }
-    const wrapper = document.createElement('div');
+    const wrapper = (0, _owner.ownerDocument)(source).createElement('div');
     for (const child of Array.from(source.childNodes)) {
       wrapper.appendChild(child.cloneNode(true));
     }
@@ -127,8 +129,10 @@ function usePopupViewport(parameters) {
         inert: (0, _inertValue.inertValue)(true),
         ref: previousContainerRef,
         style: {
-          [cssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [cssVars.popupHeight]: `${previousContentDimensions?.height}px`,
+          ...(previousContentDimensions ? {
+            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
+            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+          } : null),
           position: 'absolute'
         },
         "data-ending-style": showStartingStyleAttribute ? undefined : ''

package/utils/usePositioner.d.ts

@@ -0,0 +1,23 @@
+import { type UseRenderElementComponentProps } from "./useRenderElement.js";
+import type { TransitionStatus } from "./useTransitionStatus.js";
+interface UsePositionerOptions {
+  styles: React.CSSProperties;
+  transitionStatus: TransitionStatus;
+  props?: React.ComponentProps<'div'> | undefined;
+  refs?: React.Ref<HTMLDivElement> | (React.Ref<HTMLDivElement> | undefined)[] | undefined;
+  hidden?: boolean | undefined;
+  inert?: boolean | undefined;
+}
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+export declare function usePositioner<State extends Record<string, any>>(componentProps: UseRenderElementComponentProps<State>, state: State, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert
+}: UsePositionerOptions): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/utils/usePositioner.js

@@ -0,0 +1,39 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePositioner = usePositioner;
+var _popupStateMapping = require("./popupStateMapping");
+var _useRenderElement = require("./useRenderElement");
+var _getDisabledMountTransitionStyles = require("./getDisabledMountTransitionStyles");
+/**
+ * Renders the shared outer Positioner element used by popup components.
+ * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.
+ */
+function usePositioner(componentProps, state, {
+  styles,
+  transitionStatus,
+  props,
+  refs,
+  hidden,
+  inert = false
+}) {
+  const style = {
+    ...styles
+  };
+  if (inert) {
+    style.pointerEvents = 'none';
+  }
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: refs,
+    props: [{
+      role: 'presentation',
+      hidden,
+      style
+    }, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), props],
+    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  });
+}

package/utils/usePressAndHold.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface UsePressAndHoldParameters {
+  disabled: boolean;
+  readOnly?: boolean | undefined;
+  /**
+   * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
+   */
+  tick: (triggerEvent?: Event) => boolean;
+  /**
+   * Called when the hold ends via the global `pointerup` event.
+   */
+  onStop?: ((nativeEvent: PointerEvent) => void) | undefined;
+  /**
+   * Interval between ticks once the hold is active.
+   * @default 60
+   */
+  tickDelay?: number | undefined;
+  /**
+   * Delay before the repeating ticks start after the initial hold.
+   * @default 400
+   */
+  startDelay?: number | undefined;
+  /**
+   * Pointer movement distance (px) that cancels the hold and is treated as scrolling.
+   * @default 8
+   */
+  scrollDistance?: number | undefined;
+  /**
+   * Ref to the anchor element used to resolve `ownerWindow`.
+   */
+  elementRef: React.RefObject<HTMLElement | null>;
+}
+export interface UsePressAndHoldReturnValue {
+  pointerHandlers: {
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd: React.TouchEventHandler<HTMLElement>;
+    onPointerDown: React.PointerEventHandler<HTMLElement>;
+    onPointerUp: React.PointerEventHandler<HTMLElement>;
+    onPointerMove: React.PointerEventHandler<HTMLElement>;
+    onMouseEnter: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React.MouseEventHandler<HTMLElement>;
+    onMouseUp: React.MouseEventHandler<HTMLElement>;
+  };
+  /**
+   * Returns `true` if the `onClick` handler should be skipped.
+   * Use this in the element's `onClick` to prevent double-firing on mouse clicks
+   * (already handled by `onPointerDown`) and to suppress the synthesized click
+   * that browsers fire after a touch hold.
+   */
+  shouldSkipClick: (event: React.MouseEvent) => boolean;
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export declare function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndHoldReturnValue;

package/utils/usePressAndHold.js

@@ -0,0 +1,198 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePressAndHold = usePressAndHold;
+var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useInterval = require("@base-ui/utils/useInterval");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
+const DEFAULT_TICK_DELAY = 60;
+const DEFAULT_START_DELAY = 400;
+const DEFAULT_SCROLL_DISTANCE = 8;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+function usePressAndHold(params) {
+  const {
+    disabled,
+    readOnly = false,
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef
+  } = params;
+  const startTickTimeout = (0, _useTimeout.useTimeout)();
+  const tickInterval = (0, _useInterval.useInterval)();
+  const intentionalTouchCheckTimeout = (0, _useTimeout.useTimeout)();
+  const isPressedRef = React.useRef(false);
+  const movesAfterTouchRef = React.useRef(0);
+  const downCoordsRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React.useRef(false);
+  const ignoreClickRef = React.useRef(false);
+  const pointerTypeRef = React.useRef('');
+  const unsubscribeFromGlobalContextMenuRef = React.useRef(() => {});
+  const stopAutoChange = (0, _useStableCallback.useStableCallback)(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = (0, _useStableCallback.useStableCallback)(triggerNativeEvent => {
+    stopAutoChange();
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    const win = (0, _owner.ownerWindow)(element);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
+
+    // A global context menu listener is necessary to prevent the context menu from
+    // appearing when the touch is slightly outside of the element's hit area.
+    unsubscribeFromGlobalContextMenuRef.current = (0, _addEventListener.addEventListener)(win, 'contextmenu', handleContextMenu);
+    (0, _addEventListener.addEventListener)(win, 'pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      onStop?.(event);
+    }, {
+      once: true
+    });
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange();
+      return;
+    }
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange();
+        }
+      });
+    });
+  });
+  React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
+  const pointerHandlers = {
+    onTouchStart() {
+      isTouchingButtonRef.current = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef.current = false;
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+        return;
+      }
+      pointerTypeRef.current = event.pointerType;
+      ignoreClickRef.current = false;
+      isPressedRef.current = true;
+      downCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
+        event.preventDefault();
+        startAutoChange(event.nativeEvent);
+      } else {
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouchRef.current;
+          movesAfterTouchRef.current = 0;
+          // Only start auto-change if the touch is still pressed (prevents races
+          // with pointerup occurring before the timeout fires on quick taps).
+          const stillPressed = isPressedRef.current;
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event.nativeEvent);
+            ignoreClickRef.current = true; // synthesized click after hold should be ignored
+          } else {
+            // No auto-change (simple tap or scroll gesture), allow the click handler
+            // to perform a single action.
+            ignoreClickRef.current = false;
+            stopAutoChange();
+          }
+        });
+      }
+    },
+    onPointerUp(event) {
+      // Ensure we mark the press as released for touch flows even if auto-change never
+      // started, so the delayed auto-change check won't start after a quick tap.
+      if (isTouchLikePointerType(event.pointerType)) {
+        isPressedRef.current = false;
+      }
+    },
+    onPointerMove(event) {
+      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+        return;
+      }
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
+      const {
+        x,
+        y
+      } = downCoordsRef.current;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
+        stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+        return;
+      }
+      startAutoChange(event.nativeEvent);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    }
+  };
+  const shouldSkipClick = (0, _useStableCallback.useStableCallback)(event => {
+    if (event.defaultPrevented) {
+      return true;
+    }
+    if (isTouchLikePointerType(pointerTypeRef.current)) {
+      return ignoreClickRef.current;
+    }
+    return event.detail !== 0;
+  });
+  return {
+    pointerHandlers,
+    shouldSkipClick
+  };
+}

package/utils/useRegisteredLabelId.d.ts

@@ -0,0 +1 @@
+export declare function useRegisteredLabelId(idProp: string | undefined, setLabelId: (id: string | undefined) => void): string | undefined;

package/utils/useRegisteredLabelId.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisteredLabelId = useRegisteredLabelId;
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useBaseUiId = require("./useBaseUiId");
+function useRegisteredLabelId(idProp, setLabelId) {
+  const id = (0, _useBaseUiId.useBaseUiId)(idProp);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [id, setLabelId]);
+  return id;
+}

package/utils/useRenderElement.d.ts

@@ -9,7 +9,7 @@ type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
  * @param componentProps An object containing the `render` and `className` props to be used for element customization. Other props are ignored.
  * @param params Additional parameters for rendering the element.
  */
-export declare function useRenderElement<State extends Record<string, any>, RenderedElementType extends Element, TagName extends IntrinsicTagName | undefined, Enabled extends boolean | undefined = undefined>(element: TagName, componentProps: useRenderElement.ComponentProps<State>, params?: useRenderElement.Parameters<State, RenderedElementType, TagName, Enabled>): Enabled extends false ? null : React.ReactElement;
+export declare function useRenderElement<State extends Record<string, any>, RenderedElementType extends Element, TagName extends IntrinsicTagName | undefined, Enabled extends boolean | undefined = undefined>(element: TagName, componentProps: UseRenderElementComponentProps<State>, params?: UseRenderElementParameters<State, RenderedElementType, TagName, Enabled>): Enabled extends false ? null : React.ReactElement;
 type RenderFunctionProps<TagName> = TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<any>;
 export type UseRenderElementParameters<State, RenderedElementType extends Element, TagName, Enabled extends boolean | undefined> = {
   /**
@@ -25,7 +25,7 @@ export type UseRenderElementParameters<State, RenderedElementType extends Elemen
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: (React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[]) | undefined;
+  ref?: React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[] | undefined;
   /**
    * The state of the component.
    */
@@ -33,7 +33,7 @@ export type UseRenderElementParameters<State, RenderedElementType extends Elemen
   /**
    * Intrinsic props to be spread on the rendered element.
    */
-  props?: (RenderFunctionProps<TagName> | Array<RenderFunctionProps<TagName> | undefined | ((props: RenderFunctionProps<TagName>) => RenderFunctionProps<TagName>)>) | undefined;
+  props?: RenderFunctionProps<TagName> | Array<RenderFunctionProps<TagName> | undefined | ((props: RenderFunctionProps<TagName>) => RenderFunctionProps<TagName>)> | undefined;
   /**
    * A mapping of state to `data-*` attributes.
    */
@@ -44,7 +44,7 @@ export interface UseRenderElementComponentProps<State> {
    * The class name to apply to the rendered element.
    * Can be a string or a function that accepts the state and returns a string.
    */
-  className?: (string | ((state: State) => string | undefined)) | undefined;
+  className?: string | ((state: State) => string | undefined) | undefined;
   /**
    * The render prop or React element to override the default element.
    */
@@ -53,10 +53,7 @@ export interface UseRenderElementComponentProps<State> {
    * The style to apply to the rendered element.
    * Can be a style object or a function that accepts the state and returns a style object.
    */
-  style?: (React.CSSProperties | ((state: State) => React.CSSProperties | undefined)) | undefined;
-}
-export declare namespace useRenderElement {
-  type Parameters<State, RenderedElementType extends Element, TagName, Enabled extends boolean | undefined> = UseRenderElementParameters<State, RenderedElementType, TagName, Enabled>;
-  type ComponentProps<State> = UseRenderElementComponentProps<State>;
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 }
+export interface UseRenderElementState {}
 export {};

package/utils/useRenderElement.js

@@ -12,6 +12,7 @@ var React = _react;
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _getReactElementRef = require("@base-ui/utils/getReactElementRef");
 var _mergeObjects = require("@base-ui/utils/mergeObjects");
+var _warn = require("@base-ui/utils/warn");
 var _getStateAttributesProps = require("./getStateAttributesProps");
 var _resolveClassName = require("./resolveClassName");
 var _resolveStyle = require("./resolveStyle");
@@ -53,7 +54,12 @@ function useRenderElementProps(componentProps, params = {}) {
   const className = enabled ? (0, _resolveClassName.resolveClassName)(classNameProp, state) : undefined;
   const style = enabled ? (0, _resolveStyle.resolveStyle)(styleProp, state) : undefined;
   const stateProps = enabled ? (0, _getStateAttributesProps.getStateAttributesProps)(state, stateAttributesMapping) : _constants.EMPTY_OBJECT;
-  const outProps = enabled ? (0, _mergeObjects.mergeObjects)(stateProps, Array.isArray(props) ? (0, _mergeProps.mergePropsN)(props) : props) ?? _constants.EMPTY_OBJECT : _constants.EMPTY_OBJECT;
+  const resolvedProps = enabled && props ? resolveRenderFunctionProps(props) : undefined;
+
+  // Ensure outProps is always a new mutable object when enabled, never EMPTY_OBJECT.
+  // This prevents potential TypeError when setting ref, className, or style properties,
+  // since EMPTY_OBJECT is frozen and mutations would fail in strict mode.
+  const outProps = enabled ? (0, _mergeObjects.mergeObjects)(stateProps, resolvedProps) ?? {} : _constants.EMPTY_OBJECT;
 
   // SAFETY: The `useMergedRefs` functions use a single hook to store the same value,
   // switching between them at runtime is safe. If this assertion fails, React will
@@ -81,15 +87,26 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+function resolveRenderFunctionProps(props) {
+  if (Array.isArray(props)) {
+    return (0, _mergeProps.mergePropsN)(props);
+  }
+  return (0, _mergeProps.mergeProps)(undefined, props);
+}
 
 // The symbol React uses internally for lazy components
 // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
 // TODO delete once https://github.com/facebook/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
+const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfRenderPropLooksLikeComponent(render);
+      }
       return render(props, state);
     }
     const mergedProps = (0, _mergeProps.mergeProps)(props, render.props);
@@ -126,6 +143,19 @@ function evaluateRenderProp(element, render, props, state) {
   // to annotate it correctly.
   throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: Render element or function are not defined.' : (0, _formatErrorMessage2.default)(8));
 }
+function warnIfRenderPropLooksLikeComponent(renderFn) {
+  const functionName = renderFn.name;
+  if (functionName.length === 0) {
+    return;
+  }
+  if (!COMPONENT_IDENTIFIER_PATTERN.test(functionName)) {
+    return;
+  }
+  if (!LOWERCASE_CHARACTER_PATTERN.test(functionName)) {
+    return;
+  }
+  (0, _warn.warn)(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');
+}
 function renderTag(Tag, props) {
   if (Tag === 'button') {
     return /*#__PURE__*/(0, _react.createElement)("button", {