@renderlesskit/react
Version:
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit
31 lines (30 loc) • 1.62 kB
TypeScript
import * as React from "react";
import { PlacementData } from "@radix-ui/popper";
import { DialogActions, DialogInitialState, DialogState } from "../dialog";
export declare type PopoverState = DialogState & PlacementData & {
side: "top" | "bottom" | "left" | "right";
align: "start" | "center" | "end";
sideOffset: number;
alignOffset: number;
arrowOffset: number;
collisionTolerance: number;
anchor: HTMLDivElement | null;
popper: HTMLDivElement | null;
arrow: HTMLDivElement | null;
};
export declare type PopoverActions = DialogActions & {
setSide: React.Dispatch<React.SetStateAction<PopoverState["side"]>>;
setAlign: React.Dispatch<React.SetStateAction<PopoverState["align"]>>;
setSideOffset: React.Dispatch<React.SetStateAction<number>>;
setAlignOffset: React.Dispatch<React.SetStateAction<number>>;
setArrowOffset: React.Dispatch<React.SetStateAction<number>>;
setCollisionTolerance: React.Dispatch<React.SetStateAction<number>>;
setAnchor: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
setPopper: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
setArrow: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
};
export declare type PopoverStateReturn = PopoverState & PopoverActions;
export declare type PopoverInitialState = DialogInitialState & Partial<Pick<PopoverState, "side" | "align" | "sideOffset" | "alignOffset" | "arrowOffset" | "collisionTolerance">> & {
enableCollisionsDetection?: boolean;
};
export declare const usePopoverState: (props?: PopoverInitialState) => PopoverStateReturn;