import * as React from "react"; import type { MergeElementProps } from "../typings"; import { type Alignment, type AutoPlacementMiddleware, type ComputationMiddleware, type ComputationMiddlewareOrder, type OffsetMiddleware, type Placement, type Side, type Strategy, type VirtualElement } from "./helpers"; interface PopperBaseProps { /** * Append to the classNames applied to the component so you can override or * extend the styles. */ className?: string; /** * This element will work as an anchor for the popper, * unless you opt-in the `virtualAnchor` property. */ children?: React.ReactElement; /** * If `true`, the popper will be open. */ open: boolean; /** * Renders the content of the popper. */ renderPopperContent?: (finalPlacement: Placement) => React.ReactNode; /** * The popper positioning side. * * @default "top" */ side?: Side; /** * The popper positioning alignment. * * @default "middle" */ alignment?: Alignment | "middle"; /** * By enabling this option, popper chooses the placement automatically * (the one with the most space available) * and ignores the `side` property value but will consider the `alignment` value. * * @default false */ autoPlacement?: AutoPlacementMiddleware; /** * The type of CSS positioning strategy to use. * You will want to use `fixed` if your anchor element is inside a fixed container * * @default "absolute" */ positioningStrategy?: Strategy; /** * If a number is provided, it will represent the `mainAxis` offset. * * The `mainAxis` indicates x-axis * when the `placement` is equal to any combination of `top` or `bottom`. * In other cases it indicates the y-axis. * * Accordingly, the `crossAxis` works opposite to the `mainAxis`. * * @default 8 */ offset?: OffsetMiddleware; /** * A callback that runs as an in-between "middle" step of * the placement computation and eventual return. * * It should return an object containing either new coordinates or a new placement.\ * (**Note**: You can't return both of them!) * * You can control the execution order of this callback via `computationMiddlewareOrder` * property. */ computationMiddleware?: ComputationMiddleware; /** * Controls the execution order of `computationMiddleware`. * * @default "afterAutoPlacement" */ computationMiddlewareOrder?: ComputationMiddlewareOrder; /** * The actions you can perform on the popper instance. */ actions?: React.RefObject<{ /** * Re-runs the positioning computation process. */ recompute: () => void; }>; /** * Works as an anchor for the popper.\ * This enables things like positioning context menus or following the cursor. * * **Note**: If both `children` and `virtualAnchor` was provided, * popper will use the `virtualAnchor` as the main anchor. */ virtualAnchor?: HTMLElement | VirtualElement; } export declare type PopperProps = MergeElementProps<"div", PopperBaseProps>; declare type Component = { (props: PopperProps): React.ReactElement | null; propTypes?: React.WeakValidationMap | undefined; displayName?: string | undefined; }; declare const Popper: Component; export default Popper;