@base-ui/react 1.1.0 → 1.2.0

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;
 }

package/esm/utils/popups/popupTriggerMap.js

@@ -1,11 +1,10 @@
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
  * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
  */
 export class PopupTriggerMap {
   constructor() {
-    this.elements = new Set();
+    this.elementsSet = new Set();
     this.idMap = new Map();
   }
 
@@ -22,13 +21,13 @@ export class PopupTriggerMap {
     if (existingElement !== undefined) {
       // We assume that the same element won't be registered under multiple ids.
       // This is safe considering how useTriggerRegistration is implemented.
-      this.elements.delete(existingElement);
+      this.elementsSet.delete(existingElement);
     }
-    this.elements.add(element);
+    this.elementsSet.add(element);
     this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
-      if (this.elements.size !== this.idMap.size) {
-        throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.' : _formatErrorMessage(87));
+      if (this.elementsSet.size !== this.idMap.size) {
+        throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
     }
   }
@@ -39,7 +38,7 @@ export class PopupTriggerMap {
   delete(id) {
     const element = this.idMap.get(id);
     if (element) {
-      this.elements.delete(element);
+      this.elementsSet.delete(element);
       this.idMap.delete(id);
     }
   }
@@ -48,26 +47,45 @@ export class PopupTriggerMap {
    * Whether the given element is registered as a trigger.
    */
   hasElement(element) {
-    return this.elements.has(element);
+    return this.elementsSet.has(element);
   }
 
   /**
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate) {
-    for (const element of this.elements) {
+    for (const element of this.elementsSet) {
       if (predicate(element)) {
         return true;
       }
     }
     return false;
   }
+
+  /**
+   * Returns the trigger element associated with the given ID, or undefined if no such element exists.
+   */
   getById(id) {
     return this.idMap.get(id);
   }
+
+  /**
+   * Returns an iterable of all registered trigger entries, where each entry is a tuple of [id, element].
+   */
   entries() {
     return this.idMap.entries();
   }
+
+  /**
+   * Returns an iterable of all registered trigger elements.
+   */
+  elements() {
+    return this.elementsSet.values();
+  }
+
+  /**
+   * Returns the number of registered trigger elements.
+   */
   get size() {
     return this.idMap.size;
   }

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

@@ -7,9 +7,13 @@ import { HTMLProps } from "../types.js";
  */
 export type PopupStoreState<Payload> = {
   /**
-   * Whether the popup is open.
+   * Whether the popup is open (internal state).
    */
   open: boolean;
+  /**
+   * Whether the popup is open (external prop).
+   */
+  readonly openProp: boolean | undefined;
   /**
    * Whether the popup should be mounted in the DOM.
    * This usually follows `open` but can be different during exit transitions.
@@ -37,6 +41,10 @@ export type PopupStoreState<Payload> = {
    * The currently active trigger DOM element.
    */
   activeTriggerElement: Element | null;
+  /**
+   * ID of the trigger (external prop).
+   */
+  readonly triggerIdProp: string | null | undefined;
   /**
    * The popup DOM element.
    */
@@ -71,36 +79,38 @@ export type PopupStoreContext<ChangeEventDetails> = {
   /**
    * Callback fired when the open state changes.
    */
-  onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: ChangeEventDetails) => void) | undefined;
   /**
    * Callback fired when the open state change animation completes.
    */
   onOpenChangeComplete: ((open: boolean) => void) | undefined;
 };
+type S = PopupStoreState<unknown>;
 export declare const popupStoreSelectors: {
-  open: (state: PopupStoreState<unknown>) => boolean;
-  mounted: (state: PopupStoreState<unknown>) => boolean;
-  transitionStatus: (state: PopupStoreState<unknown>) => TransitionStatus;
-  floatingRootContext: (state: PopupStoreState<unknown>) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
-  preventUnmountingOnClose: (state: PopupStoreState<unknown>) => boolean;
-  payload: (state: PopupStoreState<unknown>) => unknown;
-  activeTriggerId: (state: PopupStoreState<unknown>) => string | null;
-  activeTriggerElement: (state: PopupStoreState<unknown>) => Element | null;
+  open: (state: S) => boolean;
+  mounted: (state: S) => boolean;
+  transitionStatus: (state: S) => TransitionStatus;
+  floatingRootContext: (state: S) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  preventUnmountingOnClose: (state: S) => boolean;
+  payload: (state: S) => unknown;
+  activeTriggerId: (state: S) => string | null;
+  activeTriggerElement: (state: S) => Element | null;
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
+  isTriggerActive: (state: S, triggerId: string | undefined) => boolean;
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
+  isOpenedByTrigger: (state: S, triggerId: string | undefined) => boolean;
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => HTMLProps;
-  popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
-  positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
+  isMountedByTrigger: (state: S, triggerId: string | undefined) => boolean;
+  triggerProps: (state: S, isActive: boolean) => HTMLProps;
+  popupProps: (state: S) => HTMLProps;
+  popupElement: (state: S) => HTMLElement | null;
+  positionerElement: (state: S) => HTMLElement | null;
 };
-export type PopupStoreSelectors = typeof popupStoreSelectors;
+export type PopupStoreSelectors = typeof popupStoreSelectors;
+export {};

package/esm/utils/popups/store.js

@@ -9,6 +9,7 @@ import { EMPTY_OBJECT } from "../constants.js";
 export function createInitialPopupStoreState() {
   return {
     open: false,
+    openProp: undefined,
     mounted: false,
     transitionStatus: 'idle',
     floatingRootContext: getEmptyRootContext(),
@@ -16,6 +17,7 @@ export function createInitialPopupStoreState() {
     payload: undefined,
     activeTriggerId: null,
     activeTriggerElement: null,
+    triggerIdProp: undefined,
     popupElement: null,
     positionerElement: null,
     activeTriggerProps: EMPTY_OBJECT,
@@ -23,27 +25,28 @@ export function createInitialPopupStoreState() {
     popupProps: EMPTY_OBJECT
   };
 }
+const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
 export const popupStoreSelectors = {
-  open: createSelector(state => state.open),
+  open: createSelector(state => state.openProp ?? state.open),
   mounted: createSelector(state => state.mounted),
   transitionStatus: createSelector(state => state.transitionStatus),
   floatingRootContext: createSelector(state => state.floatingRootContext),
   preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
   payload: createSelector(state => state.payload),
-  activeTriggerId: createSelector(state => state.activeTriggerId),
+  activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId),
+  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.open),
+  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.mounted),
+  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
   popupProps: createSelector(state => state.popupProps),
   popupElement: createSelector(state => state.popupElement),

package/esm/utils/reason-parts.d.ts

@@ -15,8 +15,10 @@ export declare const inputChange: "input-change";
 export declare const inputClear: "input-clear";
 export declare const inputBlur: "input-blur";
 export declare const inputPaste: "input-paste";
+export declare const inputPress: "input-press";
 export declare const focusOut: "focus-out";
 export declare const escapeKey: "escape-key";
+export declare const closeWatcher: "close-watcher";
 export declare const listNavigation: "list-navigation";
 export declare const keyboard: "keyboard";
 export declare const pointer: "pointer";
@@ -27,4 +29,5 @@ export declare const cancelOpen: "cancel-open";
 export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
 export declare const imperativeAction: "imperative-action";
+export declare const swipe: "swipe";
 export declare const windowResize: "window-resize";

package/esm/utils/reason-parts.js

@@ -15,8 +15,10 @@ export const inputChange = 'input-change';
 export const inputClear = 'input-clear';
 export const inputBlur = 'input-blur';
 export const inputPaste = 'input-paste';
+export const inputPress = 'input-press';
 export const focusOut = 'focus-out';
 export const escapeKey = 'escape-key';
+export const closeWatcher = 'close-watcher';
 export const listNavigation = 'list-navigation';
 export const keyboard = 'keyboard';
 export const pointer = 'pointer';
@@ -27,4 +29,5 @@ export const cancelOpen = 'cancel-open';
 export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
 export const imperativeAction = 'imperative-action';
+export const swipe = 'swipe';
 export const windowResize = 'window-resize';

package/esm/utils/scrollable.d.ts

@@ -0,0 +1,4 @@
+export type ScrollAxis = 'horizontal' | 'vertical';
+export declare function isScrollable(element: HTMLElement, axis: ScrollAxis): boolean;
+export declare function hasScrollableAncestor(target: HTMLElement, root: HTMLElement, axes: ScrollAxis[]): boolean;
+export declare function findScrollableTouchTarget(target: EventTarget | null, root: HTMLElement, axis?: ScrollAxis): HTMLElement | null;

package/esm/utils/scrollable.js

@@ -0,0 +1,32 @@
+import { getComputedStyle, isHTMLElement } from '@floating-ui/utils/dom';
+export function isScrollable(element, axis) {
+  const style = getComputedStyle(element);
+  if (axis === 'vertical') {
+    const overflowY = style.overflowY;
+    return (overflowY === 'auto' || overflowY === 'scroll') && element.scrollHeight > element.clientHeight;
+  }
+  const overflowX = style.overflowX;
+  return (overflowX === 'auto' || overflowX === 'scroll') && element.scrollWidth > element.clientWidth;
+}
+export function hasScrollableAncestor(target, root, axes) {
+  let node = target;
+  while (node && node !== root) {
+    for (const axis of axes) {
+      if (isScrollable(node, axis)) {
+        return true;
+      }
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+export function findScrollableTouchTarget(target, root, axis = 'vertical') {
+  let node = isHTMLElement(target) ? target : null;
+  while (node && node !== root) {
+    if (isScrollable(node, axis)) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return isScrollable(root, axis) ? root : null;
+}

package/esm/utils/types.d.ts

@@ -11,7 +11,7 @@ export interface FloatingUIOpenChangeDetails {
 }
 export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
   preventBaseUIHandler: () => void;
-  readonly baseUIHandlerPrevented?: boolean;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
 };
 type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 /**
@@ -34,19 +34,19 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
    * CSS class applied to the element, or a function that
    * returns a class based on the component’s state.
    */
-  className?: string | ((state: State) => string | undefined);
+  className?: (string | ((state: State) => string | undefined)) | undefined;
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
    *
    * 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;
   /**
    * Style applied to the element, or a function that
    * returns a style object based on the component’s state.
    */
-  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined);
+  style?: (React.CSSProperties | ((state: State) => React.CSSProperties | undefined)) | undefined;
 };
 export interface NativeButtonProps {
   /**
@@ -55,7 +55,7 @@ export interface NativeButtonProps {
    * Set to `false` if the rendered element is not a button (e.g. `<div>`).
    * @default true
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
 }
 export interface NonNativeButtonProps {
   /**
@@ -64,7 +64,7 @@ export interface NonNativeButtonProps {
    * Set to `true` if the rendered element is a native button.
    * @default false
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
 }
 /**
  * Simplifies the display of a type (without modifying it).

package/esm/utils/useAnchorPositioning.d.ts

@@ -20,31 +20,31 @@ interface SideFlipMode {
   /**
    * How to avoid collisions on the side axis.
    */
-  side?: 'flip' | 'none';
+  side?: ('flip' | 'none') | undefined;
   /**
    * How to avoid collisions on the align axis.
    */
-  align?: 'flip' | 'shift' | 'none';
+  align?: ('flip' | 'shift' | 'none') | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
 }
 interface SideShiftMode {
   /**
    * How to avoid collisions on the side axis.
    */
-  side?: 'shift' | 'none';
+  side?: ('shift' | 'none') | undefined;
   /**
    * How to avoid collisions on the align axis.
    */
-  align?: 'shift' | 'none';
+  align?: ('shift' | 'none') | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
 /**
@@ -57,18 +57,18 @@ export interface UseAnchorPositioningSharedParameters {
    * An element to position the popup against.
    * By default, the popup will be positioned against the trigger.
    */
-  anchor?: Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null);
+  anchor?: (Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null)) | undefined;
   /**
    * Determines which CSS `position` property to use.
    * @default 'absolute'
    */
-  positionMethod?: 'absolute' | 'fixed';
+  positionMethod?: ('absolute' | 'fixed') | undefined;
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
    * @default 'bottom'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * Distance between the anchor and the popup in pixels.
    * Also accepts a function that returns the distance to read the dimensions of the anchor
@@ -93,12 +93,12 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  sideOffset?: number | OffsetFunction;
+  sideOffset?: (number | OffsetFunction) | undefined;
   /**
    * How to align the popup relative to the specified side.
    * @default 'center'
    */
-  align?: Align;
+  align?: Align | undefined;
   /**
    * Additional offset along the alignment axis in pixels.
    * Also accepts a function that returns the offset to read the dimensions of the anchor
@@ -123,35 +123,35 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  alignOffset?: number | OffsetFunction;
+  alignOffset?: (number | OffsetFunction) | undefined;
   /**
    * An element or a rectangle that delimits the area that the popup is confined to.
    * @default 'clipping-ancestors'
    */
-  collisionBoundary?: Boundary;
+  collisionBoundary?: Boundary | undefined;
   /**
    * Additional space to maintain from the edge of the collision boundary.
    * @default 5
    */
-  collisionPadding?: Padding;
+  collisionPadding?: Padding | undefined;
   /**
    * Whether to maintain the popup in the viewport after
    * the anchor element was scrolled out of view.
    * @default false
    */
-  sticky?: boolean;
+  sticky?: boolean | undefined;
   /**
    * Minimum distance to maintain between the arrow and the edges of the popup.
    *
    * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
    * @default 5
    */
-  arrowPadding?: number;
+  arrowPadding?: number | undefined;
   /**
    * Whether to disable the popup from tracking any layout shift of its positioning anchor.
    * @default false
    */
-  disableAnchorTracking?: boolean;
+  disableAnchorTracking?: boolean | undefined;
   /**
    * Determines how to handle collisions when positioning the popup.
    *
@@ -167,20 +167,20 @@ export interface UseAnchorPositioningSharedParameters {
    * ```
    *
    */
-  collisionAvoidance?: CollisionAvoidance;
+  collisionAvoidance?: CollisionAvoidance | undefined;
 }
 export interface UseAnchorPositioningParameters extends useAnchorPositioning.SharedParameters {
-  keepMounted?: boolean;
-  trackCursorAxis?: 'none' | 'x' | 'y' | 'both';
-  floatingRootContext?: FloatingRootContext;
+  keepMounted?: boolean | undefined;
+  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
+  floatingRootContext?: FloatingRootContext | undefined;
   mounted: boolean;
   disableAnchorTracking: boolean;
-  nodeId?: string;
-  adaptiveOrigin?: Middleware;
+  nodeId?: string | undefined;
+  adaptiveOrigin?: Middleware | undefined;
   collisionAvoidance: CollisionAvoidance;
-  shiftCrossAxis?: boolean;
-  lazyFlip?: boolean;
-  externalTree?: FloatingTreeStore;
+  shiftCrossAxis?: boolean | undefined;
+  lazyFlip?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;

package/esm/utils/useAnchorPositioning.js

@@ -208,14 +208,11 @@ export function useAnchorPositioning(params) {
       availableWidth,
       availableHeight
     }) {
-      Object.entries({
-        '--available-width': `${availableWidth}px`,
-        '--available-height': `${availableHeight}px`,
-        '--anchor-width': `${reference.width}px`,
-        '--anchor-height': `${reference.height}px`
-      }).forEach(([key, value]) => {
-        floating.style.setProperty(key, value);
-      });
+      const floatingStyle = floating.style;
+      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
+      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+      floatingStyle.setProperty('--anchor-width', `${reference.width}px`);
+      floatingStyle.setProperty('--anchor-height', `${reference.height}px`);
     }
   }), arrow(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
@@ -300,14 +297,20 @@ export function useAnchorPositioning(params) {
   // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
   // This ensures the popup is inside the viewport initially before it gets positioned.
   const resolvedPosition = isPositioned ? positionMethod : 'fixed';
-  const floatingStyles = React.useMemo(() => adaptiveOrigin ? {
-    position: resolvedPosition,
-    [sideX]: x,
-    [sideY]: y
-  } : {
-    position: resolvedPosition,
-    ...originalFloatingStyles
-  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles]);
+  const floatingStyles = React.useMemo(() => {
+    const base = adaptiveOrigin ? {
+      position: resolvedPosition,
+      [sideX]: x,
+      [sideY]: y
+    } : {
+      position: resolvedPosition,
+      ...originalFloatingStyles
+    };
+    if (!isPositioned) {
+      base.opacity = 0;
+    }
+    return base;
+  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     if (!mounted) {

package/esm/utils/useFocusableWhenDisabled.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export declare function useFocusableWhenDisabled(parameters: useFocusableWhenDisabled.Parameters): useFocusableWhenDisabled.ReturnValue;
 interface FocusableWhenDisabledProps {
-  'aria-disabled'?: boolean;
-  disabled?: boolean;
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   onKeyDown: (event: React.KeyboardEvent) => void;
   tabIndex: number;
 }
@@ -20,11 +20,11 @@ export interface UseFocusableWhenDisabledParameters {
    * Whether this is a composite item or not.
    * @default false
    */
-  composite?: boolean;
+  composite?: boolean | undefined;
   /**
    * @default 0
    */
-  tabIndex?: number;
+  tabIndex?: number | undefined;
   /**
    * @default true
    */

package/esm/utils/useMixedToggleClickHandler.d.ts

@@ -9,7 +9,7 @@ export interface UseMixedToggleClickHandlerParameters {
    * Whether the mixed toggle click handler is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Determines what action is performed on mousedown.
    */

package/esm/utils/useMixedToggleClickHandler.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { EMPTY_OBJECT } from "./constants.js";

package/esm/utils/useOpenChangeComplete.d.ts

@@ -8,11 +8,11 @@ export interface UseOpenChangeCompleteParameters {
    * Whether the hook is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether the element is open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Ref to the element being closed.
    */

package/esm/utils/usePopupAutoResize.d.ts

@@ -18,18 +18,18 @@ interface UsePopupAutoResizeParameters {
   /**
    * Whether the auto-resize is enabled. This function runs in an effect and can safely access refs.
    */
-  enabled?: () => boolean;
+  enabled?: (() => boolean) | undefined;
   /**
    * Callback fired immediately before measuring the dimensions of the new content.
    */
-  onMeasureLayout?: () => void;
+  onMeasureLayout?: (() => void) | undefined;
   /**
    * Callback fired after the new dimensions have been measured.
    *
    * @param previousDimensions Dimensions before the change, or `null` if this is the first measurement.
    * @param newDimensions Newly measured dimensions.
    */
-  onMeasureLayoutComplete?: (previousDimensions: Dimensions | null, newDimensions: Dimensions) => void;
+  onMeasureLayoutComplete?: ((previousDimensions: Dimensions | null, newDimensions: Dimensions) => void) | undefined;
   side: Side;
   direction: 'ltr' | 'rtl';
 }