floating-ui.dom.d.mts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. import { AlignedPlacement } from '@floating-ui/core';
  2. import { Alignment } from '@floating-ui/core';
  3. import type { ArrowOptions as ArrowOptions_2 } from '@floating-ui/core';
  4. import type { AutoPlacementOptions as AutoPlacementOptions_2 } from '@floating-ui/core';
  5. import { Axis } from '@floating-ui/core';
  6. import { ClientRectObject } from '@floating-ui/core';
  7. import type { ComputePositionConfig as ComputePositionConfig_2 } from '@floating-ui/core';
  8. import { ComputePositionReturn } from '@floating-ui/core';
  9. import { Coords } from '@floating-ui/core';
  10. import type { detectOverflow as detectOverflow_2 } from '@floating-ui/core';
  11. import type { DetectOverflowOptions as DetectOverflowOptions_2 } from '@floating-ui/core';
  12. import { Dimensions } from '@floating-ui/core';
  13. import { ElementContext } from '@floating-ui/core';
  14. import { ElementRects } from '@floating-ui/core';
  15. import type { FlipOptions as FlipOptions_2 } from '@floating-ui/core';
  16. import { getOverflowAncestors } from '@floating-ui/utils/dom';
  17. import type { HideOptions as HideOptions_2 } from '@floating-ui/core';
  18. import { InlineOptions } from '@floating-ui/core';
  19. import { Length } from '@floating-ui/core';
  20. import { LimitShiftOptions } from '@floating-ui/core';
  21. import type { Middleware as Middleware_2 } from '@floating-ui/core';
  22. import { MiddlewareData } from '@floating-ui/core';
  23. import { MiddlewareReturn } from '@floating-ui/core';
  24. import type { MiddlewareState as MiddlewareState_2 } from '@floating-ui/core';
  25. import { Padding } from '@floating-ui/core';
  26. import { Placement } from '@floating-ui/core';
  27. import { Rect } from '@floating-ui/core';
  28. import { RootBoundary } from '@floating-ui/core';
  29. import type { ShiftOptions as ShiftOptions_2 } from '@floating-ui/core';
  30. import { Side } from '@floating-ui/core';
  31. import { SideObject } from '@floating-ui/core';
  32. import type { SizeOptions as SizeOptions_2 } from '@floating-ui/core';
  33. import { Strategy } from '@floating-ui/core';
  34. export { AlignedPlacement }
  35. export { Alignment }
  36. /**
  37. * Provides data to position an inner element of the floating element so that it
  38. * appears centered to the reference element.
  39. * @see https://floating-ui.com/docs/arrow
  40. */
  41. export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;
  42. export declare type ArrowOptions = Prettify<Omit<ArrowOptions_2, 'element'> & {
  43. element: Element;
  44. }>;
  45. /**
  46. * Optimizes the visibility of the floating element by choosing the placement
  47. * that has the most space available automatically, without needing to specify a
  48. * preferred placement. Alternative to `flip`.
  49. * @see https://floating-ui.com/docs/autoPlacement
  50. */
  51. export declare const autoPlacement: (options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>) => Middleware;
  52. export declare type AutoPlacementOptions = Prettify<Omit<AutoPlacementOptions_2, 'boundary'> & DetectOverflowOptions>;
  53. /**
  54. * Automatically updates the position of the floating element when necessary.
  55. * Should only be called when the floating element is mounted on the DOM or
  56. * visible on the screen.
  57. * @returns cleanup function that should be invoked when the floating element is
  58. * removed from the DOM or hidden from the screen.
  59. * @see https://floating-ui.com/docs/autoUpdate
  60. */
  61. export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement | null, update: () => void, options?: AutoUpdateOptions): () => void;
  62. export declare interface AutoUpdateOptions {
  63. /**
  64. * Whether to update the position when an overflow ancestor is scrolled.
  65. * @default true
  66. */
  67. ancestorScroll?: boolean | undefined;
  68. /**
  69. * Whether to update the position when an overflow ancestor is resized. This
  70. * uses the native `resize` event.
  71. * @default true
  72. */
  73. ancestorResize?: boolean | undefined;
  74. /**
  75. * Whether to update the position when either the reference or floating
  76. * elements resized. This uses a `ResizeObserver`.
  77. * @default true
  78. */
  79. elementResize?: boolean | undefined;
  80. /**
  81. * Whether to update the position when the reference relocated on the screen
  82. * due to layout shift.
  83. * @default true
  84. */
  85. layoutShift?: boolean | undefined;
  86. /**
  87. * Whether to update on every animation frame if necessary. Only use if you
  88. * need to update the position in response to an animation using transforms.
  89. * @default false
  90. */
  91. animationFrame?: boolean | undefined;
  92. }
  93. export { Axis }
  94. declare type BivariantCallback<T extends (...args: any[]) => any> = {
  95. bivariance(...args: Parameters<T>): ReturnType<T>;
  96. }['bivariance'];
  97. /**
  98. * The clipping boundary area of the floating element.
  99. */
  100. export declare type Boundary = 'clippingAncestors' | Element | Array<Element> | Rect;
  101. export { ClientRectObject }
  102. /**
  103. * Computes the `x` and `y` coordinates that will place the floating element
  104. * next to a given reference element.
  105. */
  106. export declare const computePosition: (reference: ReferenceElement, floating: FloatingElement, options?: Partial<ComputePositionConfig>) => Promise<ComputePositionReturn>;
  107. export declare type ComputePositionConfig = Prettify<Omit<ComputePositionConfig_2, 'middleware' | 'platform'> & {
  108. /**
  109. * Array of middleware objects to modify the positioning or provide data for
  110. * rendering.
  111. */
  112. middleware?: Array<Middleware | null | undefined | false> | undefined;
  113. /**
  114. * Custom or extended platform object.
  115. */
  116. platform?: Platform | undefined;
  117. }>;
  118. export { ComputePositionReturn }
  119. export { Coords }
  120. export declare type Derivable<T> = (state: MiddlewareState) => T;
  121. /**
  122. * Resolves with an object of overflow side offsets that determine how much the
  123. * element is overflowing a given clipping boundary on each side.
  124. * - positive = overflowing the boundary by that number of pixels
  125. * - negative = how many pixels left before it will overflow
  126. * - 0 = lies flush with the boundary
  127. * @see https://floating-ui.com/docs/detectOverflow
  128. */
  129. export declare const detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>) => Promise<SideObject>;
  130. export declare type DetectOverflowOptions = Prettify<Omit<DetectOverflowOptions_2, 'boundary'> & {
  131. boundary?: Boundary | undefined;
  132. }>;
  133. export { Dimensions }
  134. export { ElementContext }
  135. export { ElementRects }
  136. export declare interface Elements {
  137. reference: ReferenceElement;
  138. floating: FloatingElement;
  139. }
  140. /**
  141. * Optimizes the visibility of the floating element by flipping the `placement`
  142. * in order to keep it in view when the preferred placement(s) will overflow the
  143. * clipping boundary. Alternative to `autoPlacement`.
  144. * @see https://floating-ui.com/docs/flip
  145. */
  146. export declare const flip: (options?: FlipOptions | Derivable<FlipOptions>) => Middleware;
  147. export declare type FlipOptions = Prettify<Omit<FlipOptions_2, 'boundary'> & DetectOverflowOptions>;
  148. export declare type FloatingElement = HTMLElement;
  149. export { getOverflowAncestors }
  150. /**
  151. * Provides data to hide the floating element in applicable situations, such as
  152. * when it is not in the same clipping context as the reference element.
  153. * @see https://floating-ui.com/docs/hide
  154. */
  155. export declare const hide: (options?: HideOptions | Derivable<HideOptions>) => Middleware;
  156. export declare type HideOptions = Prettify<Omit<HideOptions_2, 'boundary'> & DetectOverflowOptions>;
  157. /**
  158. * Provides improved positioning for inline reference elements that can span
  159. * over multiple lines, such as hyperlinks or range selections.
  160. * @see https://floating-ui.com/docs/inline
  161. */
  162. export declare const inline: (options?: InlineOptions | Derivable<InlineOptions>) => Middleware;
  163. export { InlineOptions }
  164. export { Length }
  165. /**
  166. * Built-in `limiter` that will stop `shift()` at a certain point.
  167. */
  168. export declare const limitShift: (options?: LimitShiftOptions | Derivable<LimitShiftOptions>) => {
  169. options: any;
  170. fn: (state: MiddlewareState) => Coords;
  171. };
  172. export { LimitShiftOptions }
  173. export declare type Middleware = Prettify<Omit<Middleware_2, 'fn'> & {
  174. fn(state: MiddlewareState): Promisable<MiddlewareReturn>;
  175. }>;
  176. /**
  177. * @deprecated use `MiddlewareState` instead.
  178. */
  179. export declare type MiddlewareArguments = MiddlewareState;
  180. export { MiddlewareData }
  181. export { MiddlewareReturn }
  182. export declare type MiddlewareState = Prettify<Omit<MiddlewareState_2, 'elements'> & {
  183. elements: Elements;
  184. }>;
  185. export declare interface NodeScroll {
  186. scrollLeft: number;
  187. scrollTop: number;
  188. }
  189. /**
  190. * Modifies the placement by translating the floating element along the
  191. * specified axes.
  192. * A number (shorthand for `mainAxis` or distance), or an axes configuration
  193. * object may be passed.
  194. * @see https://floating-ui.com/docs/offset
  195. */
  196. export declare const offset: (options?: OffsetOptions) => Middleware;
  197. export declare type OffsetOptions = OffsetValue | Derivable<OffsetValue>;
  198. declare type OffsetValue = number | {
  199. /**
  200. * The axis that runs along the side of the floating element. Represents
  201. * the distance (gutter or margin) between the reference and floating
  202. * element.
  203. * @default 0
  204. */
  205. mainAxis?: number | undefined;
  206. /**
  207. * The axis that runs along the alignment of the floating element.
  208. * Represents the skidding between the reference and floating element.
  209. * @default 0
  210. */
  211. crossAxis?: number | undefined;
  212. /**
  213. * The same axis as `crossAxis` but applies only to aligned placements
  214. * and inverts the `end` alignment. When set to a number, it overrides the
  215. * `crossAxis` value.
  216. *
  217. * A positive number will move the floating element in the direction of
  218. * the opposite edge to the one that is aligned, while a negative number
  219. * the reverse.
  220. * @default null
  221. */
  222. alignmentAxis?: number | null | undefined;
  223. };
  224. export { Padding }
  225. export { Placement }
  226. export declare interface Platform {
  227. getElementRects: (args: {
  228. reference: ReferenceElement;
  229. floating: FloatingElement;
  230. strategy: Strategy;
  231. }) => Promisable<ElementRects>;
  232. getClippingRect: (args: {
  233. element: Element;
  234. boundary: Boundary;
  235. rootBoundary: RootBoundary;
  236. strategy: Strategy;
  237. }) => Promisable<Rect>;
  238. getDimensions: (element: Element) => Promisable<Dimensions>;
  239. convertOffsetParentRelativeRectToViewportRelativeRect: (args: {
  240. elements?: Elements | undefined;
  241. rect: Rect;
  242. offsetParent: Element;
  243. strategy: Strategy;
  244. }) => Promisable<Rect>;
  245. getOffsetParent: (element: Element, polyfill?: (element: HTMLElement) => Element | null) => Promisable<Element | Window>;
  246. isElement: (value: unknown) => Promisable<boolean>;
  247. getDocumentElement: (element: Element) => Promisable<HTMLElement>;
  248. getClientRects: (element: Element) => Promisable<Array<ClientRectObject>>;
  249. isRTL: (element: Element) => Promisable<boolean>;
  250. getScale: (element: HTMLElement) => Promisable<{
  251. x: number;
  252. y: number;
  253. }>;
  254. detectOverflow?: typeof detectOverflow_2 | undefined;
  255. }
  256. export declare const platform: Platform;
  257. declare type Prettify<T> = {
  258. [K in keyof T]: T[K];
  259. } & {};
  260. declare type Promisable<T> = T | Promise<T>;
  261. export { Rect }
  262. export declare type ReferenceElement = Element | VirtualElement;
  263. export { RootBoundary }
  264. /**
  265. * Optimizes the visibility of the floating element by shifting it in order to
  266. * keep it in view when it will overflow the clipping boundary.
  267. * @see https://floating-ui.com/docs/shift
  268. */
  269. export declare const shift: (options?: ShiftOptions | Derivable<ShiftOptions>) => Middleware;
  270. export declare type ShiftOptions = Prettify<Omit<ShiftOptions_2, 'boundary'> & DetectOverflowOptions>;
  271. export { Side }
  272. export { SideObject }
  273. /**
  274. * Provides data that allows you to change the size of the floating element —
  275. * for instance, prevent it from overflowing the clipping boundary or match the
  276. * width of the reference element.
  277. * @see https://floating-ui.com/docs/size
  278. */
  279. export declare const size: (options?: SizeOptions | Derivable<SizeOptions>) => Middleware;
  280. export declare type SizeOptions = Prettify<Omit<SizeOptions_2, 'apply' | 'boundary'> & DetectOverflowOptions & {
  281. /**
  282. * Function that is called to perform style mutations to the floating element
  283. * to change its size.
  284. * @default undefined
  285. */
  286. apply?: BivariantCallback<(args: MiddlewareState & {
  287. availableWidth: number;
  288. availableHeight: number;
  289. }) => Promisable<void>> | undefined;
  290. }>;
  291. export { Strategy }
  292. /**
  293. * Custom positioning reference element.
  294. * @see https://floating-ui.com/docs/virtual-elements
  295. */
  296. export declare interface VirtualElement {
  297. getBoundingClientRect(): ClientRectObject;
  298. getClientRects?: (() => Array<ClientRectObject> | DOMRectList) | undefined;
  299. contextElement?: Element | undefined;
  300. }
  301. export { }