import { AlignedPlacement } from '@floating-ui/utils'; import { Alignment } from '@floating-ui/utils'; import { Axis } from '@floating-ui/utils'; import { ClientRectObject } from '@floating-ui/utils'; import { Coords } from '@floating-ui/utils'; import { Dimensions } from '@floating-ui/utils'; import { ElementRects } from '@floating-ui/utils'; import { Length } from '@floating-ui/utils'; import { Padding } from '@floating-ui/utils'; import { Placement } from '@floating-ui/utils'; import { Rect } from '@floating-ui/utils'; import { rectToClientRect } from '@floating-ui/utils'; import { Side } from '@floating-ui/utils'; import { SideObject } from '@floating-ui/utils'; import { Strategy } from '@floating-ui/utils'; import { VirtualElement } from '@floating-ui/utils'; export { AlignedPlacement } export { Alignment } /** * Provides data to position an inner element of the floating element so that it * appears centered to the reference element. * @see https://floating-ui.com/docs/arrow */ export declare const arrow: (options: ArrowOptions | Derivable) => Middleware; export declare interface ArrowOptions { /** * The arrow element to be positioned. * @default undefined */ element: any; /** * The padding between the arrow element and the floating element edges. * Useful when the floating element has rounded corners. * @default 0 */ padding?: Padding; } /** * Optimizes the visibility of the floating element by choosing the placement * that has the most space available automatically, without needing to specify a * preferred placement. Alternative to `flip`. * @see https://floating-ui.com/docs/autoPlacement */ export declare const autoPlacement: (options?: AutoPlacementOptions | Derivable) => Middleware; export declare type AutoPlacementOptions = Partial; }>; export { Axis } export declare type Boundary = any; export { ClientRectObject } export declare type ComputePosition = (reference: unknown, floating: unknown, config: ComputePositionConfig) => Promise; /** * Computes the `x` and `y` coordinates that will place the floating element * next to a given reference element. * * This export does not have any `platform` interface logic. You will need to * write one for the platform you are using Floating UI with. */ export declare const computePosition: ComputePosition; export declare interface ComputePositionConfig { /** * Object to interface with the current platform. */ platform: Platform; /** * Where to place the floating element relative to the reference element. */ placement?: Placement; /** * The strategy to use when positioning the floating element. */ strategy?: Strategy; /** * Array of middleware objects to modify the positioning or provide data for * rendering. */ middleware?: Array; } export declare interface ComputePositionReturn extends Coords { /** * The final chosen placement of the floating element. */ placement: Placement; /** * The strategy used to position the floating element. */ strategy: Strategy; /** * Object containing data returned from all middleware, keyed by their name. */ middlewareData: MiddlewareData; } export { Coords } /** * Function option to derive middleware options from state. */ export declare type Derivable = (state: MiddlewareState) => T; /** * Resolves with an object of overflow side offsets that determine how much the * element is overflowing a given clipping boundary on each side. * - positive = overflowing the boundary by that number of pixels * - negative = how many pixels left before it will overflow * - 0 = lies flush with the boundary * @see https://floating-ui.com/docs/detectOverflow */ export declare function detectOverflow(state: MiddlewareState, options?: DetectOverflowOptions | Derivable): Promise; export declare type DetectOverflowOptions = Partial<{ /** * The clipping element(s) or area in which overflow will be checked. * @default 'clippingAncestors' */ boundary: Boundary; /** * The root clipping area in which overflow will be checked. * @default 'viewport' */ rootBoundary: RootBoundary; /** * The element in which overflow is being checked relative to a boundary. * @default 'floating' */ elementContext: ElementContext; /** * Whether to check for overflow using the alternate element's boundary * (`clippingAncestors` boundary only). * @default false */ altBoundary: boolean; /** * Virtual padding for the resolved overflow detection offsets. * @default 0 */ padding: Padding; }>; export { Dimensions } export declare type ElementContext = 'reference' | 'floating'; export { ElementRects } export declare interface Elements { reference: ReferenceElement; floating: FloatingElement; } /** * Optimizes the visibility of the floating element by flipping the `placement` * in order to keep it in view when the preferred placement(s) will overflow the * clipping boundary. Alternative to `autoPlacement`. * @see https://floating-ui.com/docs/flip */ export declare const flip: (options?: FlipOptions | Derivable) => Middleware; export declare type FlipOptions = Partial; /** * What strategy to use when no placements fit. * @default 'bestFit' */ fallbackStrategy: 'bestFit' | 'initialPlacement'; /** * Whether to allow fallback to the perpendicular axis of the preferred * placement, and if so, which side direction along the axis to prefer. * @default 'none' (disallow fallback) */ fallbackAxisSideDirection: 'none' | 'start' | 'end'; /** * Whether to flip to placements with the opposite alignment if they fit * better. * @default true */ flipAlignment: boolean; }>; export declare type FloatingElement = any; /** * Provides data to hide the floating element in applicable situations, such as * when it is not in the same clipping context as the reference element. * @see https://floating-ui.com/docs/hide */ export declare const hide: (options?: HideOptions | Derivable) => Middleware; export declare type HideOptions = Partial; /** * Provides improved positioning for inline reference elements that can span * over multiple lines, such as hyperlinks or range selections. * @see https://floating-ui.com/docs/inline */ export declare const inline: (options?: InlineOptions | Derivable) => Middleware; export declare type InlineOptions = Partial<{ /** * Viewport-relative `x` coordinate to choose a `ClientRect`. * @default undefined */ x: number; /** * Viewport-relative `y` coordinate to choose a `ClientRect`. * @default undefined */ y: number; /** * Represents the padding around a disjoined rect when choosing it. * @default 2 */ padding: Padding; }>; export { Length } /** * Built-in `limiter` that will stop `shift()` at a certain point. */ export declare const limitShift: (options?: LimitShiftOptions | Derivable) => { options: any; fn: (state: MiddlewareState) => Coords; }; declare type LimitShiftOffset = number | Partial<{ /** * Offset the limiting of the axis that runs along the alignment of the * floating element. */ mainAxis: number; /** * Offset the limiting of the axis that runs along the side of the * floating element. */ crossAxis: number; }>; export declare type LimitShiftOptions = Partial<{ /** * Offset when limiting starts. `0` will limit when the opposite edges of the * reference and floating elements are aligned. * - positive = start limiting earlier * - negative = start limiting later */ offset: LimitShiftOffset | Derivable; /** * Whether to limit the axis that runs along the alignment of the floating * element. */ mainAxis: boolean; /** * Whether to limit the axis that runs along the side of the floating element. */ crossAxis: boolean; }>; export declare type Middleware = { name: string; options?: any; fn: (state: MiddlewareState) => Promisable; }; /** * @deprecated use `MiddlewareState` instead. */ export declare type MiddlewareArguments = MiddlewareState; export declare interface MiddlewareData { [key: string]: any; arrow?: Partial & { centerOffset: number; alignmentOffset?: number; }; autoPlacement?: { index?: number; overflows: Array<{ placement: Placement; overflows: Array; }>; }; flip?: { index?: number; overflows: Array<{ placement: Placement; overflows: Array; }>; }; hide?: { referenceHidden?: boolean; escaped?: boolean; referenceHiddenOffsets?: SideObject; escapedOffsets?: SideObject; }; offset?: Coords & { placement: Placement; }; shift?: Coords; } export declare interface MiddlewareReturn extends Partial { data?: { [key: string]: any; }; reset?: boolean | { placement?: Placement; rects?: boolean | ElementRects; }; } export declare interface MiddlewareState extends Coords { initialPlacement: Placement; placement: Placement; strategy: Strategy; middlewareData: MiddlewareData; elements: Elements; rects: ElementRects; platform: Platform; } /** * Modifies the placement by translating the floating element along the * specified axes. * A number (shorthand for `mainAxis` or distance), or an axes configuration * object may be passed. * @see https://floating-ui.com/docs/offset */ export declare const offset: (options?: OffsetOptions) => Middleware; export declare type OffsetOptions = OffsetValue | Derivable; declare type OffsetValue = number | Partial<{ /** * The axis that runs along the side of the floating element. Represents * the distance (gutter or margin) between the reference and floating * element. * @default 0 */ mainAxis: number; /** * The axis that runs along the alignment of the floating element. * Represents the skidding between the reference and floating element. * @default 0 */ crossAxis: number; /** * The same axis as `crossAxis` but applies only to aligned placements * and inverts the `end` alignment. When set to a number, it overrides the * `crossAxis` value. * * A positive number will move the floating element in the direction of * the opposite edge to the one that is aligned, while a negative number * the reverse. * @default null */ alignmentAxis: number | null; }>; export { Padding } export { Placement } /** * Platform interface methods to work with the current platform. * @see https://floating-ui.com/docs/platform */ export declare interface Platform { getElementRects: (args: { reference: ReferenceElement; floating: FloatingElement; strategy: Strategy; }) => Promisable; getClippingRect: (args: { element: any; boundary: Boundary; rootBoundary: RootBoundary; strategy: Strategy; }) => Promisable; getDimensions: (element: any) => Promisable; convertOffsetParentRelativeRectToViewportRelativeRect?: (args: { elements?: Elements; rect: Rect; offsetParent: any; strategy: Strategy; }) => Promisable; getOffsetParent?: (element: any) => Promisable; isElement?: (value: any) => Promisable; getDocumentElement?: (element: any) => Promisable; getClientRects?: (element: any) => Promisable>; isRTL?: (element: any) => Promisable; getScale?: (element: any) => Promisable<{ x: number; y: number; }>; } declare type Promisable = T | Promise; export { Rect } export { rectToClientRect } export declare type ReferenceElement = any; export declare type RootBoundary = 'viewport' | 'document' | Rect; /** * Optimizes the visibility of the floating element by shifting it in order to * keep it in view when it will overflow the clipping boundary. * @see https://floating-ui.com/docs/shift */ export declare const shift: (options?: ShiftOptions | Derivable) => Middleware; export declare type ShiftOptions = Partial Coords; options?: any; }; }>; export { Side } export { SideObject } /** * Provides data that allows you to change the size of the floating element — * for instance, prevent it from overflowing the clipping boundary or match the * width of the reference element. * @see https://floating-ui.com/docs/size */ export declare const size: (options?: SizeOptions | Derivable) => Middleware; export declare type SizeOptions = Partial; }>; export { Strategy } export { VirtualElement } export { }