floating-ui.core.d.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. import { AlignedPlacement } from '@floating-ui/utils';
  2. import { Alignment } from '@floating-ui/utils';
  3. import { Axis } from '@floating-ui/utils';
  4. import { ClientRectObject } from '@floating-ui/utils';
  5. import { Coords } from '@floating-ui/utils';
  6. import { Dimensions } from '@floating-ui/utils';
  7. import { ElementRects } from '@floating-ui/utils';
  8. import { Length } from '@floating-ui/utils';
  9. import { Padding } from '@floating-ui/utils';
  10. import { Placement } from '@floating-ui/utils';
  11. import { Rect } from '@floating-ui/utils';
  12. import { rectToClientRect } from '@floating-ui/utils';
  13. import { Side } from '@floating-ui/utils';
  14. import { SideObject } from '@floating-ui/utils';
  15. import { Strategy } from '@floating-ui/utils';
  16. import { VirtualElement } from '@floating-ui/utils';
  17. export { AlignedPlacement }
  18. export { Alignment }
  19. /**
  20. * Provides data to position an inner element of the floating element so that it
  21. * appears centered to the reference element.
  22. * @see https://floating-ui.com/docs/arrow
  23. */
  24. export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;
  25. export declare interface ArrowOptions {
  26. /**
  27. * The arrow element to be positioned.
  28. * @default undefined
  29. */
  30. element: any;
  31. /**
  32. * The padding between the arrow element and the floating element edges.
  33. * Useful when the floating element has rounded corners.
  34. * @default 0
  35. */
  36. padding?: Padding;
  37. }
  38. /**
  39. * Optimizes the visibility of the floating element by choosing the placement
  40. * that has the most space available automatically, without needing to specify a
  41. * preferred placement. Alternative to `flip`.
  42. * @see https://floating-ui.com/docs/autoPlacement
  43. */
  44. export declare const autoPlacement: (options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>) => Middleware;
  45. export declare type AutoPlacementOptions = Partial<DetectOverflowOptions & {
  46. /**
  47. * The axis that runs along the alignment of the floating element. Determines
  48. * whether to check for most space along this axis.
  49. * @default false
  50. */
  51. crossAxis: boolean;
  52. /**
  53. * Choose placements with a particular alignment.
  54. * @default undefined
  55. */
  56. alignment: Alignment | null;
  57. /**
  58. * Whether to choose placements with the opposite alignment if the preferred
  59. * alignment does not fit.
  60. * @default true
  61. */
  62. autoAlignment: boolean;
  63. /**
  64. * Which placements are allowed to be chosen. Placements must be within the
  65. * `alignment` option if explicitly set.
  66. * @default allPlacements (variable)
  67. */
  68. allowedPlacements: Array<Placement>;
  69. }>;
  70. export { Axis }
  71. export declare type Boundary = any;
  72. export { ClientRectObject }
  73. export declare type ComputePosition = (reference: unknown, floating: unknown, config: ComputePositionConfig) => Promise<ComputePositionReturn>;
  74. /**
  75. * Computes the `x` and `y` coordinates that will place the floating element
  76. * next to a given reference element.
  77. *
  78. * This export does not have any `platform` interface logic. You will need to
  79. * write one for the platform you are using Floating UI with.
  80. */
  81. export declare const computePosition: ComputePosition;
  82. export declare interface ComputePositionConfig {
  83. /**
  84. * Object to interface with the current platform.
  85. */
  86. platform: Platform;
  87. /**
  88. * Where to place the floating element relative to the reference element.
  89. */
  90. placement?: Placement;
  91. /**
  92. * The strategy to use when positioning the floating element.
  93. */
  94. strategy?: Strategy;
  95. /**
  96. * Array of middleware objects to modify the positioning or provide data for
  97. * rendering.
  98. */
  99. middleware?: Array<Middleware | null | undefined | false>;
  100. }
  101. export declare interface ComputePositionReturn extends Coords {
  102. /**
  103. * The final chosen placement of the floating element.
  104. */
  105. placement: Placement;
  106. /**
  107. * The strategy used to position the floating element.
  108. */
  109. strategy: Strategy;
  110. /**
  111. * Object containing data returned from all middleware, keyed by their name.
  112. */
  113. middlewareData: MiddlewareData;
  114. }
  115. export { Coords }
  116. /**
  117. * Function option to derive middleware options from state.
  118. */
  119. export declare type Derivable<T> = (state: MiddlewareState) => T;
  120. /**
  121. * Resolves with an object of overflow side offsets that determine how much the
  122. * element is overflowing a given clipping boundary on each side.
  123. * - positive = overflowing the boundary by that number of pixels
  124. * - negative = how many pixels left before it will overflow
  125. * - 0 = lies flush with the boundary
  126. * @see https://floating-ui.com/docs/detectOverflow
  127. */
  128. export declare function detectOverflow(state: MiddlewareState, options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>): Promise<SideObject>;
  129. export declare type DetectOverflowOptions = Partial<{
  130. /**
  131. * The clipping element(s) or area in which overflow will be checked.
  132. * @default 'clippingAncestors'
  133. */
  134. boundary: Boundary;
  135. /**
  136. * The root clipping area in which overflow will be checked.
  137. * @default 'viewport'
  138. */
  139. rootBoundary: RootBoundary;
  140. /**
  141. * The element in which overflow is being checked relative to a boundary.
  142. * @default 'floating'
  143. */
  144. elementContext: ElementContext;
  145. /**
  146. * Whether to check for overflow using the alternate element's boundary
  147. * (`clippingAncestors` boundary only).
  148. * @default false
  149. */
  150. altBoundary: boolean;
  151. /**
  152. * Virtual padding for the resolved overflow detection offsets.
  153. * @default 0
  154. */
  155. padding: Padding;
  156. }>;
  157. export { Dimensions }
  158. export declare type ElementContext = 'reference' | 'floating';
  159. export { ElementRects }
  160. export declare interface Elements {
  161. reference: ReferenceElement;
  162. floating: FloatingElement;
  163. }
  164. /**
  165. * Optimizes the visibility of the floating element by flipping the `placement`
  166. * in order to keep it in view when the preferred placement(s) will overflow the
  167. * clipping boundary. Alternative to `autoPlacement`.
  168. * @see https://floating-ui.com/docs/flip
  169. */
  170. export declare const flip: (options?: FlipOptions | Derivable<FlipOptions>) => Middleware;
  171. export declare type FlipOptions = Partial<DetectOverflowOptions & {
  172. /**
  173. * The axis that runs along the side of the floating element. Determines
  174. * whether overflow along this axis is checked to perform a flip.
  175. * @default true
  176. */
  177. mainAxis: boolean;
  178. /**
  179. * The axis that runs along the alignment of the floating element. Determines
  180. * whether overflow along this axis is checked to perform a flip.
  181. * @default true
  182. */
  183. crossAxis: boolean;
  184. /**
  185. * Placements to try sequentially if the preferred `placement` does not fit.
  186. * @default [oppositePlacement] (computed)
  187. */
  188. fallbackPlacements: Array<Placement>;
  189. /**
  190. * What strategy to use when no placements fit.
  191. * @default 'bestFit'
  192. */
  193. fallbackStrategy: 'bestFit' | 'initialPlacement';
  194. /**
  195. * Whether to allow fallback to the perpendicular axis of the preferred
  196. * placement, and if so, which side direction along the axis to prefer.
  197. * @default 'none' (disallow fallback)
  198. */
  199. fallbackAxisSideDirection: 'none' | 'start' | 'end';
  200. /**
  201. * Whether to flip to placements with the opposite alignment if they fit
  202. * better.
  203. * @default true
  204. */
  205. flipAlignment: boolean;
  206. }>;
  207. export declare type FloatingElement = any;
  208. /**
  209. * Provides data to hide the floating element in applicable situations, such as
  210. * when it is not in the same clipping context as the reference element.
  211. * @see https://floating-ui.com/docs/hide
  212. */
  213. export declare const hide: (options?: HideOptions | Derivable<HideOptions>) => Middleware;
  214. export declare type HideOptions = Partial<DetectOverflowOptions & {
  215. /**
  216. * The strategy used to determine when to hide the floating element.
  217. */
  218. strategy: 'referenceHidden' | 'escaped';
  219. }>;
  220. /**
  221. * Provides improved positioning for inline reference elements that can span
  222. * over multiple lines, such as hyperlinks or range selections.
  223. * @see https://floating-ui.com/docs/inline
  224. */
  225. export declare const inline: (options?: InlineOptions | Derivable<InlineOptions>) => Middleware;
  226. export declare type InlineOptions = Partial<{
  227. /**
  228. * Viewport-relative `x` coordinate to choose a `ClientRect`.
  229. * @default undefined
  230. */
  231. x: number;
  232. /**
  233. * Viewport-relative `y` coordinate to choose a `ClientRect`.
  234. * @default undefined
  235. */
  236. y: number;
  237. /**
  238. * Represents the padding around a disjoined rect when choosing it.
  239. * @default 2
  240. */
  241. padding: Padding;
  242. }>;
  243. export { Length }
  244. /**
  245. * Built-in `limiter` that will stop `shift()` at a certain point.
  246. */
  247. export declare const limitShift: (options?: LimitShiftOptions | Derivable<LimitShiftOptions>) => {
  248. options: any;
  249. fn: (state: MiddlewareState) => Coords;
  250. };
  251. declare type LimitShiftOffset = number | Partial<{
  252. /**
  253. * Offset the limiting of the axis that runs along the alignment of the
  254. * floating element.
  255. */
  256. mainAxis: number;
  257. /**
  258. * Offset the limiting of the axis that runs along the side of the
  259. * floating element.
  260. */
  261. crossAxis: number;
  262. }>;
  263. export declare type LimitShiftOptions = Partial<{
  264. /**
  265. * Offset when limiting starts. `0` will limit when the opposite edges of the
  266. * reference and floating elements are aligned.
  267. * - positive = start limiting earlier
  268. * - negative = start limiting later
  269. */
  270. offset: LimitShiftOffset | Derivable<LimitShiftOffset>;
  271. /**
  272. * Whether to limit the axis that runs along the alignment of the floating
  273. * element.
  274. */
  275. mainAxis: boolean;
  276. /**
  277. * Whether to limit the axis that runs along the side of the floating element.
  278. */
  279. crossAxis: boolean;
  280. }>;
  281. export declare type Middleware = {
  282. name: string;
  283. options?: any;
  284. fn: (state: MiddlewareState) => Promisable<MiddlewareReturn>;
  285. };
  286. /**
  287. * @deprecated use `MiddlewareState` instead.
  288. */
  289. export declare type MiddlewareArguments = MiddlewareState;
  290. export declare interface MiddlewareData {
  291. [key: string]: any;
  292. arrow?: Partial<Coords> & {
  293. centerOffset: number;
  294. alignmentOffset?: number;
  295. };
  296. autoPlacement?: {
  297. index?: number;
  298. overflows: Array<{
  299. placement: Placement;
  300. overflows: Array<number>;
  301. }>;
  302. };
  303. flip?: {
  304. index?: number;
  305. overflows: Array<{
  306. placement: Placement;
  307. overflows: Array<number>;
  308. }>;
  309. };
  310. hide?: {
  311. referenceHidden?: boolean;
  312. escaped?: boolean;
  313. referenceHiddenOffsets?: SideObject;
  314. escapedOffsets?: SideObject;
  315. };
  316. offset?: Coords & {
  317. placement: Placement;
  318. };
  319. shift?: Coords;
  320. }
  321. export declare interface MiddlewareReturn extends Partial<Coords> {
  322. data?: {
  323. [key: string]: any;
  324. };
  325. reset?: boolean | {
  326. placement?: Placement;
  327. rects?: boolean | ElementRects;
  328. };
  329. }
  330. export declare interface MiddlewareState extends Coords {
  331. initialPlacement: Placement;
  332. placement: Placement;
  333. strategy: Strategy;
  334. middlewareData: MiddlewareData;
  335. elements: Elements;
  336. rects: ElementRects;
  337. platform: Platform;
  338. }
  339. /**
  340. * Modifies the placement by translating the floating element along the
  341. * specified axes.
  342. * A number (shorthand for `mainAxis` or distance), or an axes configuration
  343. * object may be passed.
  344. * @see https://floating-ui.com/docs/offset
  345. */
  346. export declare const offset: (options?: OffsetOptions) => Middleware;
  347. export declare type OffsetOptions = OffsetValue | Derivable<OffsetValue>;
  348. declare type OffsetValue = number | Partial<{
  349. /**
  350. * The axis that runs along the side of the floating element. Represents
  351. * the distance (gutter or margin) between the reference and floating
  352. * element.
  353. * @default 0
  354. */
  355. mainAxis: number;
  356. /**
  357. * The axis that runs along the alignment of the floating element.
  358. * Represents the skidding between the reference and floating element.
  359. * @default 0
  360. */
  361. crossAxis: number;
  362. /**
  363. * The same axis as `crossAxis` but applies only to aligned placements
  364. * and inverts the `end` alignment. When set to a number, it overrides the
  365. * `crossAxis` value.
  366. *
  367. * A positive number will move the floating element in the direction of
  368. * the opposite edge to the one that is aligned, while a negative number
  369. * the reverse.
  370. * @default null
  371. */
  372. alignmentAxis: number | null;
  373. }>;
  374. export { Padding }
  375. export { Placement }
  376. /**
  377. * Platform interface methods to work with the current platform.
  378. * @see https://floating-ui.com/docs/platform
  379. */
  380. export declare interface Platform {
  381. getElementRects: (args: {
  382. reference: ReferenceElement;
  383. floating: FloatingElement;
  384. strategy: Strategy;
  385. }) => Promisable<ElementRects>;
  386. getClippingRect: (args: {
  387. element: any;
  388. boundary: Boundary;
  389. rootBoundary: RootBoundary;
  390. strategy: Strategy;
  391. }) => Promisable<Rect>;
  392. getDimensions: (element: any) => Promisable<Dimensions>;
  393. convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
  394. elements?: Elements;
  395. rect: Rect;
  396. offsetParent: any;
  397. strategy: Strategy;
  398. }) => Promisable<Rect>;
  399. getOffsetParent?: (element: any) => Promisable<any>;
  400. isElement?: (value: any) => Promisable<boolean>;
  401. getDocumentElement?: (element: any) => Promisable<any>;
  402. getClientRects?: (element: any) => Promisable<Array<ClientRectObject>>;
  403. isRTL?: (element: any) => Promisable<boolean>;
  404. getScale?: (element: any) => Promisable<{
  405. x: number;
  406. y: number;
  407. }>;
  408. }
  409. declare type Promisable<T> = T | Promise<T>;
  410. export { Rect }
  411. export { rectToClientRect }
  412. export declare type ReferenceElement = any;
  413. export declare type RootBoundary = 'viewport' | 'document' | Rect;
  414. /**
  415. * Optimizes the visibility of the floating element by shifting it in order to
  416. * keep it in view when it will overflow the clipping boundary.
  417. * @see https://floating-ui.com/docs/shift
  418. */
  419. export declare const shift: (options?: ShiftOptions | Derivable<ShiftOptions>) => Middleware;
  420. export declare type ShiftOptions = Partial<DetectOverflowOptions & {
  421. /**
  422. * The axis that runs along the alignment of the floating element. Determines
  423. * whether overflow along this axis is checked to perform shifting.
  424. * @default true
  425. */
  426. mainAxis: boolean;
  427. /**
  428. * The axis that runs along the side of the floating element. Determines
  429. * whether overflow along this axis is checked to perform shifting.
  430. * @default false
  431. */
  432. crossAxis: boolean;
  433. /**
  434. * Accepts a function that limits the shifting done in order to prevent
  435. * detachment.
  436. */
  437. limiter: {
  438. fn: (state: MiddlewareState) => Coords;
  439. options?: any;
  440. };
  441. }>;
  442. export { Side }
  443. export { SideObject }
  444. /**
  445. * Provides data that allows you to change the size of the floating element —
  446. * for instance, prevent it from overflowing the clipping boundary or match the
  447. * width of the reference element.
  448. * @see https://floating-ui.com/docs/size
  449. */
  450. export declare const size: (options?: SizeOptions | Derivable<SizeOptions>) => Middleware;
  451. export declare type SizeOptions = Partial<DetectOverflowOptions & {
  452. /**
  453. * Function that is called to perform style mutations to the floating element
  454. * to change its size.
  455. * @default undefined
  456. */
  457. apply(args: MiddlewareState & {
  458. availableWidth: number;
  459. availableHeight: number;
  460. }): void | Promise<void>;
  461. }>;
  462. export { Strategy }
  463. export { VirtualElement }
  464. export { }