import type { FloatingElement, Middleware, MiddlewareData, Placement, ReferenceElement, Strategy } from "@floating-ui/dom"; import type { ReadableBox, WritableBox } from "svelte-toolbelt"; type ValueOrGetValue = T | (() => T); export type Measurable = { getBoundingClientRect: () => DOMRect; }; export type UseFloatingOptions = { /** * Represents the open/close state of the floating element. * @default true */ open?: ValueOrGetValue; /** * Where to place the floating element relative to its reference element. * @default 'bottom' */ placement?: ValueOrGetValue; /** * The type of CSS position property to use. * @default 'absolute' */ strategy?: ValueOrGetValue; /** * These are plain objects that modify the positioning coordinates in some fashion, * or provide useful data for the consumer to use. * @default undefined */ middleware?: ValueOrGetValue; /** * Whether to use `transform` instead of `top` and `left` styles to * position the floating element (`floatingStyles`). * @default true */ transform?: ValueOrGetValue; /** * Reference / Anchor element to position the floating element relative to */ reference: ReadableBox; /** * Callback to handle mounting/unmounting of the elements. * @default undefined */ whileElementsMounted?: (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void; /** * The offset from the reference element along the side axis. * Used to detect bad coordinates during transitions. * @default undefined */ sideOffset?: ValueOrGetValue; /** * The offset from the reference element along the alignment axis. * Used to detect bad coordinates during transitions. * @default undefined */ alignOffset?: ValueOrGetValue; }; export type UseFloatingReturn = { /** * The reference element to position the floating element relative to. */ reference: ReadableBox; /** * The floating element to position. */ floating: WritableBox; /** * The stateful placement, which can be different from the initial `placement` passed as options. */ placement: Readonly; /** * The type of CSS position property to use. */ strategy: Readonly; /** * Additional data from middleware. */ middlewareData: Readonly; /** * The boolean that let you know if the floating element has been positioned. */ isPositioned: Readonly; /** * CSS styles to apply to the floating element to position it. */ floatingStyles: Readonly<{ position: Strategy; top: string; left: string; transform?: string; willChange?: string; }>; /** * The function to update floating position manually. */ update: () => void; }; export {};