@navinc/base-react-components/dist/wayfinder/popover/popover.d.ts

Nav's Pattern Library

import * as PopoverPrimitive from '@radix-ui/react-popover';
import { InferComponentProps } from '../../types.js';
import { ReactNode } from 'react';
declare const PopoverRoot: import("react").FC<PopoverPrimitive.PopoverProps>;
export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
declare const PopoverContent: ({ children, ...props }: InferComponentProps<typeof PopoverPrimitive.Content>) => import("react/jsx-runtime").JSX.Element;
declare const Content: ({ title, description, buttons, className, }: {
    title: ReactNode;
    description: ReactNode;
    buttons?: ReactNode;
    className?: string;
}) => import("react/jsx-runtime").JSX.Element;
/** Wayfinder Popover
 *
 * Popover component that provides a customizable popover interface.
 * Similar to a dialog, but pops over the screen next to the trigger that was pressed. Does not blur background like Dialog.
 * The "trigger" must be a node that can have props applied to it, ideally a button. ie plain strings or fragments will not work.

 * @returns {ReactNode} The Popover component.
 *
 * @example
 * <Popover
 *   title="Popover Title"
 *   description="This is a customizable popover description."
 *   buttons={[<button>Action</button>]}
 *   trigger={<button>Open Popover</button>}
 * />
 */
type PopoverProps = {
    trigger?: ReactNode;
    hasArrow?: boolean;
} & InferComponentProps<typeof PopoverRoot> & InferComponentProps<typeof PopoverContent> & Partial<InferComponentProps<typeof Content>>;
export declare const Popover: ({ title, description, buttons, open, defaultOpen, onOpenChange, trigger, modal, hasArrow, align, sideOffset, children, className, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
export {};