123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521 |
- 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<ArrowOptions>) => 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<AutoPlacementOptions>) => Middleware;
- export declare type AutoPlacementOptions = Partial<DetectOverflowOptions & {
- /**
- * The axis that runs along the alignment of the floating element. Determines
- * whether to check for most space along this axis.
- * @default false
- */
- crossAxis: boolean;
- /**
- * Choose placements with a particular alignment.
- * @default undefined
- */
- alignment: Alignment | null;
- /**
- * Whether to choose placements with the opposite alignment if the preferred
- * alignment does not fit.
- * @default true
- */
- autoAlignment: boolean;
- /**
- * Which placements are allowed to be chosen. Placements must be within the
- * `alignment` option if explicitly set.
- * @default allPlacements (variable)
- */
- allowedPlacements: Array<Placement>;
- }>;
- export { Axis }
- export declare type Boundary = any;
- export { ClientRectObject }
- export declare type ComputePosition = (reference: unknown, floating: unknown, config: ComputePositionConfig) => Promise<ComputePositionReturn>;
- /**
- * 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<Middleware | null | undefined | false>;
- }
- 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<T> = (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<DetectOverflowOptions>): Promise<SideObject>;
- 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<FlipOptions>) => Middleware;
- export declare type FlipOptions = Partial<DetectOverflowOptions & {
- /**
- * The axis that runs along the side of the floating element. Determines
- * whether overflow along this axis is checked to perform a flip.
- * @default true
- */
- mainAxis: boolean;
- /**
- * The axis that runs along the alignment of the floating element. Determines
- * whether overflow along this axis is checked to perform a flip.
- * @default true
- */
- crossAxis: boolean;
- /**
- * Placements to try sequentially if the preferred `placement` does not fit.
- * @default [oppositePlacement] (computed)
- */
- fallbackPlacements: Array<Placement>;
- /**
- * 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<HideOptions>) => Middleware;
- export declare type HideOptions = Partial<DetectOverflowOptions & {
- /**
- * The strategy used to determine when to hide the floating element.
- */
- strategy: 'referenceHidden' | 'escaped';
- }>;
- /**
- * 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<InlineOptions>) => 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<LimitShiftOptions>) => {
- 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<LimitShiftOffset>;
- /**
- * 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<MiddlewareReturn>;
- };
- /**
- * @deprecated use `MiddlewareState` instead.
- */
- export declare type MiddlewareArguments = MiddlewareState;
- export declare interface MiddlewareData {
- [key: string]: any;
- arrow?: Partial<Coords> & {
- centerOffset: number;
- alignmentOffset?: number;
- };
- autoPlacement?: {
- index?: number;
- overflows: Array<{
- placement: Placement;
- overflows: Array<number>;
- }>;
- };
- flip?: {
- index?: number;
- overflows: Array<{
- placement: Placement;
- overflows: Array<number>;
- }>;
- };
- hide?: {
- referenceHidden?: boolean;
- escaped?: boolean;
- referenceHiddenOffsets?: SideObject;
- escapedOffsets?: SideObject;
- };
- offset?: Coords & {
- placement: Placement;
- };
- shift?: Coords;
- }
- export declare interface MiddlewareReturn extends Partial<Coords> {
- 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<OffsetValue>;
- 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<ElementRects>;
- getClippingRect: (args: {
- element: any;
- boundary: Boundary;
- rootBoundary: RootBoundary;
- strategy: Strategy;
- }) => Promisable<Rect>;
- getDimensions: (element: any) => Promisable<Dimensions>;
- convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
- elements?: Elements;
- rect: Rect;
- offsetParent: any;
- strategy: Strategy;
- }) => Promisable<Rect>;
- getOffsetParent?: (element: any) => Promisable<any>;
- isElement?: (value: any) => Promisable<boolean>;
- getDocumentElement?: (element: any) => Promisable<any>;
- getClientRects?: (element: any) => Promisable<Array<ClientRectObject>>;
- isRTL?: (element: any) => Promisable<boolean>;
- getScale?: (element: any) => Promisable<{
- x: number;
- y: number;
- }>;
- }
- declare type Promisable<T> = T | Promise<T>;
- 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<ShiftOptions>) => Middleware;
- export declare type ShiftOptions = Partial<DetectOverflowOptions & {
- /**
- * The axis that runs along the alignment of the floating element. Determines
- * whether overflow along this axis is checked to perform shifting.
- * @default true
- */
- mainAxis: boolean;
- /**
- * The axis that runs along the side of the floating element. Determines
- * whether overflow along this axis is checked to perform shifting.
- * @default false
- */
- crossAxis: boolean;
- /**
- * Accepts a function that limits the shifting done in order to prevent
- * detachment.
- */
- limiter: {
- fn: (state: MiddlewareState) => 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<SizeOptions>) => Middleware;
- export declare type SizeOptions = Partial<DetectOverflowOptions & {
- /**
- * Function that is called to perform style mutations to the floating element
- * to change its size.
- * @default undefined
- */
- apply(args: MiddlewareState & {
- availableWidth: number;
- availableHeight: number;
- }): void | Promise<void>;
- }>;
- export { Strategy }
- export { VirtualElement }
- export { }
|