@base-ui/react 1.0.0 → 1.2.0

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/resolveValueLabel.d.ts

@@ -10,8 +10,12 @@ export interface Group<Item = any> {
   items: Item[];
 }
 export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is Group<any>[];
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+export declare function hasNullItemLabel(items: ItemsInput): boolean;
 export declare function stringifyAsLabel(item: any, itemToStringLabel?: (item: any) => string): string;
 export declare function stringifyAsValue(item: any, itemToStringValue?: (item: any) => string): string;
 export declare function resolveSelectedLabel(value: any, items: ItemsInput, itemToStringLabel?: (item: any) => string): React.ReactNode;
-export declare function resolveMultipleLabels(values: any[] | undefined, itemToStringLabel?: (item: any) => string): string;
+export declare function resolveMultipleLabels(values: any[], items: ItemsInput, itemToStringLabel?: (item: any) => string): React.ReactNode;
 export {};

package/esm/utils/resolveValueLabel.js

@@ -1,9 +1,36 @@
 'use client';
 
+import * as React from 'react';
 import { serializeValue } from "./serializeValue.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function isGroupedItems(items) {
   return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
 }
+
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+export function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && !('null' in items);
+  }
+  if (isGroupedItems(items)) {
+    for (const group of items) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of items) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
 export function stringifyAsLabel(item, itemToStringLabel) {
   if (itemToStringLabel && item != null) {
     return itemToStringLabel(item) ?? '';
@@ -28,6 +55,9 @@ export function stringifyAsValue(item, itemToStringValue) {
   return serializeValue(item);
 }
 export function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
   if (itemToStringLabel && value != null) {
     return itemToStringLabel(value);
   }
@@ -39,44 +69,38 @@ export function resolveSelectedLabel(value, items, itemToStringLabel) {
 
   // Items provided as plain record map
   if (items && !Array.isArray(items)) {
-    return items[value] ?? stringifyAsLabel(value, itemToStringLabel);
+    return items[value] ?? fallback();
   }
 
   // Items provided as array (flat or grouped)
   if (Array.isArray(items)) {
     const flatItems = isGroupedItems(items) ? items.flatMap(g => g.items) : items;
-
-    // If no value selected, prefer the null option label when available
-    if (value == null) {
-      const nullItem = flatItems.find(it => it.value == null);
-      if (nullItem && nullItem.label != null) {
-        return nullItem.label;
-      }
-      return stringifyAsLabel(value, itemToStringLabel);
-    }
-
-    // Primitive selected value: map to first matching item's label
-    if (typeof value !== 'object') {
-      const match = flatItems.find(it => it && it.value === value);
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
       if (match && match.label != null) {
         return match.label;
       }
-      return stringifyAsLabel(value, itemToStringLabel);
+      return fallback();
     }
 
     // Object without explicit label: try matching by its `value` property
     if ('value' in value) {
-      const match = flatItems.find(it => it && it.value === value.value);
+      const match = flatItems.find(item => item && item.value === value.value);
       if (match && match.label != null) {
         return match.label;
       }
     }
   }
-  return stringifyAsLabel(value, itemToStringLabel);
+  return fallback();
 }
-export function resolveMultipleLabels(values, itemToStringLabel) {
-  if (!Array.isArray(values) || values.length === 0) {
-    return '';
-  }
-  return values.map(v => stringifyAsLabel(v, itemToStringLabel)).join(', ');
+export function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/_jsx(React.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
 }

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/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const styleDisableScrollbar: {
   className: string;
-  element: import("react/jsx-runtime").JSX.Element;
+  getElement(nonce?: string): import("react/jsx-runtime").JSX.Element;
 };

package/esm/utils/styles.js

@@ -2,9 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar';
 export const styleDisableScrollbar = {
   className: DISABLE_SCROLLBAR_CLASS_NAME,
-  element: /*#__PURE__*/_jsx("style", {
-    href: DISABLE_SCROLLBAR_CLASS_NAME,
-    precedence: "base-ui:low",
-    children: `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
-  })
-};
+  getElement(nonce) {
+    return /*#__PURE__*/_jsx("style", {
+      nonce: nonce,
+      href: DISABLE_SCROLLBAR_CLASS_NAME,
+      precedence: "base-ui:low",
+      children: `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
+    });
+  }
+};
+if (process.env.NODE_ENV !== "production") styleDisableScrollbar.getElement.displayName = "styleDisableScrollbar.getElement";

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;
 /**
@@ -29,24 +29,24 @@ export type ComponentRenderFn<Props, State> = (props: Props, state: State) => Re
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
  */
-export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithoutRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
   /**
    * 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;