@intility/bifrost-react/dist/components/Dropdown/Dropdown.d.ts

React library for Intility's design system, Bifrost.

export type DropdownProps = {
    /** Content inside the dropdown */
    content: React.ReactNode;
    /** Reference to the element that the dropdown will anchor to, and attaches
     * click events to toggle the dropdown. For controlled mode, no click events
     * are attached. */
    reference?: React.RefObject<Element | null> | Element | null;
    /** Bool to remove padding from content */
    noPadding?: boolean;
    /** CSS Class name(s) */
    className?: string;
    /** Content to anchor the dropdown to and attaches click events to toggle the
     * dropdown. Can optionally be supplied via `reference` prop instead. For
     * controlled mode, no click events are attached. */
    children?: React.ReactElement;
    /** Control the open state of the dropdown. */
    visible?: boolean;
    /** The dropdown can be placed "top", "right", "bottom", or "left" and
     * optionally suffixed with "-start" or "-end". Default is "bottom-start".
     * @link https://floating-ui.com/docs/computePosition#placement */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** Triggers when dropdown opens. (For controlled mode, does nothing) */
    onShow?: () => void;
    /** Triggers when dropdown closes. (For controlled mode, triggers when user
     * presses esc or clicks outside) */
    onHide?: () => void;
    /** Style the dropdown using `"absolute"` (default) or `"fixed"` CSS position.
     * If it looks sluggish or jumpy on scroll, try changing your strategy.
     * @link https://floating-ui.com/docs/computePosition#strategy
     */
    strategy?: "fixed" | "absolute";
    /** Disable the dropdown */
    disabled?: boolean;
    /** Array of two numbers with `skidding` (cross axis) and `distance` (main
     * axis) - default `[0, 10]` */
    offset?: [skidding: number, distance: number];
    /** Render children even when `<Dropdown>` is closed. (default `false`) */
    eager?: boolean;
    /** Reset to default styling */
    unstyled?: boolean;
    /** Don't render the arrow pointing to reference element */
    noArrow?: boolean;
};
/**
 * Display a dropdown on click.
 * The nested content of `<Dropdown>` needs to be a single element able to hold
 * a `ref`, unless an element reference is passed to the `reference` prop.
 * @example
 * <Dropdown content={<div>Dropdown content</div>}>
 *   <Button>Click to show dropdown</Button>
 * </Dropdown>
 */
export default function Dropdown({ reference, children, className, content, placement, onShow, onHide, noPadding, visible, strategy, disabled, eager, offset: offsetProp, noArrow, unstyled, }: DropdownProps): import("react/jsx-runtime").JSX.Element | undefined;