@base-ui/react 1.1.0 → 1.2.0

package/utils/itemEquality.js

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

package/utils/popupStateMapping.d.ts

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

package/utils/popupStateMapping.js

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

package/utils/popups/popupStoreUtils.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

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

@@ -1,18 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopupTriggerMap = void 0;
-var _formatErrorMessage2 = _interopRequireDefault(require("@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.
  */
 class PopupTriggerMap {
   constructor() {
-    this.elements = new Set();
+    this.elementsSet = new Set();
     this.idMap = new Map();
   }
 
@@ -29,13 +27,13 @@ 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.' : (0, _formatErrorMessage2.default)(87));
+      if (this.elementsSet.size !== this.idMap.size) {
+        throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
     }
   }
@@ -46,7 +44,7 @@ class PopupTriggerMap {
   delete(id) {
     const element = this.idMap.get(id);
     if (element) {
-      this.elements.delete(element);
+      this.elementsSet.delete(element);
       this.idMap.delete(id);
     }
   }
@@ -55,26 +53,45 @@ 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/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/utils/popups/store.js

@@ -15,6 +15,7 @@ var _constants = require("../constants");
 function createInitialPopupStoreState() {
   return {
     open: false,
+    openProp: undefined,
     mounted: false,
     transitionStatus: 'idle',
     floatingRootContext: (0, _getEmptyRootContext.getEmptyRootContext)(),
@@ -22,6 +23,7 @@ function createInitialPopupStoreState() {
     payload: undefined,
     activeTriggerId: null,
     activeTriggerElement: null,
+    triggerIdProp: undefined,
     popupElement: null,
     positionerElement: null,
     activeTriggerProps: _constants.EMPTY_OBJECT,
@@ -29,27 +31,28 @@ function createInitialPopupStoreState() {
     popupProps: _constants.EMPTY_OBJECT
   };
 }
+const activeTriggerIdSelector = (0, _store.createSelector)(state => state.triggerIdProp ?? state.activeTriggerId);
 const popupStoreSelectors = exports.popupStoreSelectors = {
-  open: (0, _store.createSelector)(state => state.open),
+  open: (0, _store.createSelector)(state => state.openProp ?? state.open),
   mounted: (0, _store.createSelector)(state => state.mounted),
   transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
   floatingRootContext: (0, _store.createSelector)(state => state.floatingRootContext),
   preventUnmountingOnClose: (0, _store.createSelector)(state => state.preventUnmountingOnClose),
   payload: (0, _store.createSelector)(state => state.payload),
-  activeTriggerId: (0, _store.createSelector)(state => state.activeTriggerId),
+  activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: (0, _store.createSelector)(state => state.mounted ? state.activeTriggerElement : null),
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId),
+  isTriggerActive: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.open),
+  isOpenedByTrigger: (0, _store.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: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.mounted),
+  isMountedByTrigger: (0, _store.createSelector)((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: (0, _store.createSelector)((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
   popupProps: (0, _store.createSelector)(state => state.popupProps),
   popupElement: (0, _store.createSelector)(state => state.popupElement),

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.windowResize = exports.wheel = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
+exports.windowResize = exports.wheel = exports.triggerPress = exports.triggerHover = exports.triggerFocus = exports.trackPress = exports.swipe = exports.siblingOpen = exports.scrub = exports.pointer = exports.outsidePress = exports.none = exports.listNavigation = exports.linkPress = exports.keyboard = exports.itemPress = exports.inputPress = exports.inputPaste = exports.inputClear = exports.inputChange = exports.inputBlur = exports.incrementPress = exports.imperativeAction = exports.focusOut = exports.escapeKey = exports.drag = exports.disabled = exports.decrementPress = exports.closeWatcher = exports.closePress = exports.clearPress = exports.chipRemovePress = exports.cancelOpen = void 0;
 const none = exports.none = 'none';
 const triggerPress = exports.triggerPress = 'trigger-press';
 const triggerHover = exports.triggerHover = 'trigger-hover';
@@ -21,8 +21,10 @@ const inputChange = exports.inputChange = 'input-change';
 const inputClear = exports.inputClear = 'input-clear';
 const inputBlur = exports.inputBlur = 'input-blur';
 const inputPaste = exports.inputPaste = 'input-paste';
+const inputPress = exports.inputPress = 'input-press';
 const focusOut = exports.focusOut = 'focus-out';
 const escapeKey = exports.escapeKey = 'escape-key';
+const closeWatcher = exports.closeWatcher = 'close-watcher';
 const listNavigation = exports.listNavigation = 'list-navigation';
 const keyboard = exports.keyboard = 'keyboard';
 const pointer = exports.pointer = 'pointer';
@@ -33,4 +35,5 @@ const cancelOpen = exports.cancelOpen = 'cancel-open';
 const siblingOpen = exports.siblingOpen = 'sibling-open';
 const disabled = exports.disabled = 'disabled';
 const imperativeAction = exports.imperativeAction = 'imperative-action';
+const swipe = exports.swipe = 'swipe';
 const windowResize = exports.windowResize = 'window-resize';

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findScrollableTouchTarget = findScrollableTouchTarget;
+exports.hasScrollableAncestor = hasScrollableAncestor;
+exports.isScrollable = isScrollable;
+var _dom = require("@floating-ui/utils/dom");
+function isScrollable(element, axis) {
+  const style = (0, _dom.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;
+}
+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;
+}
+function findScrollableTouchTarget(target, root, axis = 'vertical') {
+  let node = (0, _dom.isHTMLElement)(target) ? target : null;
+  while (node && node !== root) {
+    if (isScrollable(node, axis)) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return isScrollable(root, axis) ? root : null;
+}

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