@styleless-ui/react/Popper/Popper.d.ts

Completely unstyled, headless and accessible React UI components.

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 OwnProps {
    /**
     * The className applied to the component.
     */
    className?: string | ((ctx: {
        placement: Placement;
        openState: boolean;
    }) => string);
    /**
     * The content of the component.
     */
    children?: React.ReactNode | ((ctx: {
        placement: Placement;
        openState: boolean;
    }) => React.ReactNode);
    /**
     * If `true`, the popper will be open.
     */
    open: boolean;
    /**
     * 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.
     */
    anchorElement: React.RefObject<HTMLElement> | HTMLElement | VirtualElement | string;
    /**
     * Used to keep mounting when more control is needed.\
     * Useful when controlling animation with React animation libraries.
     * @default false
     */
    keepMounted?: boolean;
}
export type Props = Omit<MergeElementProps<"div", OwnProps>, "defaultChecked" | "defaultValue" | "autoSave" | "autoCapitalize" | "autoCorrect">;
declare const Popper: (props: Props, ref: React.Ref<HTMLDivElement>) => JSX.Element | null;
export default Popper;