@navikt/ds-react/cjs/popover/Popover.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React, { HTMLAttributes } from "react";
import { PopoverContentType } from "./PopoverContent";
export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    /**
     * Popover content
     */
    children: React.ReactNode;
    /**
     * Element popover anchors to
     */
    anchorEl: Element | null;
    /**
     * Open state
     */
    open: boolean;
    /**
     * onClose callback
     */
    onClose: () => void;
    /**
     * Default orientation of popover
     *
     * Try to keep general usage to "top", "bottom", "left", "right".
     * @default "top"
     */
    placement?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
    /**
     * Adds a arrow from dialog to anchor when true
     * @default true
     */
    arrow?: boolean;
    /**
     * Distance from anchor to popover
     * @default 16 w/arrow, 4 w/no-arrow
     */
    offset?: number;
    /**
     * Changes what CSS position property to use
     * You want to use "fixed" if reference element is inside a fixed container, but popover is not
     * @default "absolute"
     */
    strategy?: "absolute" | "fixed";
    /**
     * Changes placement of the floating element in order to keep it in view.
     * @default true
     */
    flip?: boolean;
}
interface PopoverComponent extends React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>> {
    Content: PopoverContentType;
}
/**
 * A component that displays a popover.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/popover)
 * @see 🏷️ {@link PopoverProps}
 *
 * @example
 * ```jsx
 * <Button ref={buttonRef} onClick={() => setOpenState(true)}>
 *   Åpne popover
 * </Button>
 * <Popover
 *   open={openState}
 *   onClose={() => setOpenState(false)}
 *   anchorEl={buttonRef.current}
 * >
 *   <Popover.Content>Innhold her!</Popover.Content>
 * </Popover>
 * ```
 */
export declare const Popover: PopoverComponent;
export default Popover;