@base-ui-components/react/floating-ui-react/types.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import type { UseFloatingOptions as UsePositionOptions, UseFloatingReturn as UsePositionFloatingReturn, VirtualElement } from '@floating-ui/react-dom';
import type * as React from 'react';
import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
import type { ExtendedUserProps } from "./hooks/useInteractions.js";
import type { FloatingTreeStore } from "./components/FloatingTreeStore.js";
import type { FloatingRootStore } from "./components/FloatingRootStore.js";
export * from "./index.js";
export type { FloatingDelayGroupProps } from "./components/FloatingDelayGroup.js";
export type { FloatingFocusManagerProps } from "./components/FloatingFocusManager.js";
export type { UseFloatingPortalNodeProps } from "./components/FloatingPortal.js";
export type { UseClientPointProps } from "./hooks/useClientPoint.js";
export type { UseDismissProps } from "./hooks/useDismiss.js";
export type { UseFocusProps } from "./hooks/useFocus.js";
export type { UseHoverProps, HandleCloseContext, HandleClose } from "./hooks/useHover.js";
export type { UseHoverFloatingInteractionProps } from "./hooks/useHoverFloatingInteraction.js";
export type { UseHoverReferenceInteractionProps } from "./hooks/useHoverReferenceInteraction.js";
export type { UseListNavigationProps } from "./hooks/useListNavigation.js";
export type { UseRoleProps } from "./hooks/useRole.js";
export type { UseTypeaheadProps } from "./hooks/useTypeahead.js";
export type { UseFloatingRootContextOptions } from "./hooks/useFloatingRootContext.js";
export type { UseInteractionsReturn } from "./hooks/useInteractions.js";
export type { SafePolygonOptions } from "./safePolygon.js";
export type { FloatingTreeProps, FloatingNodeProps } from "./components/FloatingTree.js";
export type { AlignedPlacement, Alignment, ArrowOptions, AutoPlacementOptions, AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig, ComputePositionReturn, Coords, DetectOverflowOptions, Dimensions, ElementContext, ElementRects, Elements, FlipOptions, FloatingElement, HideOptions, InlineOptions, Length, Middleware, MiddlewareArguments, MiddlewareData, MiddlewareReturn, MiddlewareState, NodeScroll, OffsetOptions, Padding, Placement, Platform, Rect, ReferenceElement, RootBoundary, ShiftOptions, Side, SideObject, SizeOptions, Strategy, VirtualElement } from '@floating-ui/react-dom';
export { arrow, autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/react-dom';
type Prettify<T> = { [K in keyof T]: T[K] } & {};
export type Delay = number | Partial<{
  open: number;
  close: number;
}>;
export type NarrowedElement<T> = T extends Element ? T : Element;
export interface ExtendedRefs {
  reference: React.RefObject<ReferenceType | null>;
  floating: React.RefObject<HTMLElement | null>;
  domReference: React.RefObject<NarrowedElement<ReferenceType> | null>;
  setReference(node: ReferenceType | null): void;
  setFloating(node: HTMLElement | null): void;
  setPositionReference(node: ReferenceType | null): void;
}
export interface ExtendedElements {
  reference: ReferenceType | null;
  floating: HTMLElement | null;
  domReference: NarrowedElement<ReferenceType> | null;
}
export interface FloatingEvents {
  emit<T extends string>(event: T, data?: any): void;
  on(event: string, handler: (data: any) => void): void;
  off(event: string, handler: (data: any) => void): void;
}
export interface ContextData {
  openEvent?: Event;
  floatingContext?: FloatingContext;
  /** @deprecated use `onTypingChange` prop in `useTypeahead` */
  typing?: boolean;
  [key: string]: any;
}
export type FloatingRootContext = FloatingRootStore;
export type FloatingContext = Omit<UsePositionFloatingReturn<ReferenceType>, 'refs' | 'elements'> & {
  open: boolean;
  onOpenChange(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
  events: FloatingEvents;
  dataRef: React.RefObject<ContextData>;
  nodeId: string | undefined;
  floatingId: string | undefined;
  refs: ExtendedRefs;
  elements: ExtendedElements;
  rootStore: FloatingRootContext;
};
export interface FloatingNodeType {
  id: string | undefined;
  parentId: string | null;
  context?: FloatingContext;
}
export type FloatingTreeType = FloatingTreeStore;
export interface ElementProps {
  reference?: React.HTMLProps<Element>;
  floating?: React.HTMLProps<HTMLElement>;
  item?: React.HTMLProps<HTMLElement> | ((props: ExtendedUserProps) => React.HTMLProps<HTMLElement>);
  trigger?: React.HTMLProps<Element>;
}
export type ReferenceType = Element | VirtualElement;
export type UseFloatingData = Prettify<UseFloatingReturn>;
export type UseFloatingReturn = Prettify<UsePositionFloatingReturn & {
  /**
   * `FloatingContext`
   */
  context: Prettify<FloatingContext>;
  /**
   * Object containing the reference and floating refs and reactive setters.
   */
  refs: ExtendedRefs;
  elements: ExtendedElements;
}>;
export interface UseFloatingOptions extends Omit<UsePositionOptions, 'elements'> {
  rootContext?: FloatingRootContext;
  /**
   * Object of external elements as an alternative to the `refs` object setters.
   */
  elements?: {
    /**
     * Externally passed reference element. Store in state.
     */
    reference?: ReferenceType | null;
    /**
     * Externally passed floating element. Store in state.
     */
    floating?: HTMLElement | null;
  };
  /**
   * An event callback that is invoked when the floating element is opened or
   * closed.
   */
  onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
  /**
   * Unique node id when using `FloatingTree`.
   */
  nodeId?: string;
  /**
   * External FlatingTree to use when the one provided by context can't be used.
   */
  externalTree?: FloatingTreeStore;
}