retro-react
Version:
A React component library for building retro-style websites
57 lines (56 loc) • 1.94 kB
TypeScript
/// <reference types="react" />
import { ThemeUICSSObject } from 'theme-ui';
import { ButtonProps } from '../button';
export declare type PopoverPosition = 'top' | 'right' | 'bottom' | 'left';
export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
sx?: ThemeUICSSObject;
}
export interface PopoverButtonProps extends ButtonProps {
isOpen?: boolean;
}
/**
* A button that opens a popover.
*/
export declare const PopoverButton: import("react").ForwardRefExoticComponent<PopoverButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
sx?: ThemeUICSSObject;
position?: {
top: number;
left: number;
};
}
/**
* The content of a popover.
*/
export declare const PopoverContent: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
export interface PopoverProps {
/**
* The content and trigger of the popover. Use `PopoverButton` and `PopoverContent` to render the trigger and content.
*/
children: React.ReactElement | React.ReactElement[];
/**
* Position of the popover relative to the trigger.
*
* @default 'bottom'
*/
position?: PopoverPosition;
/**
* Close the popover when clicking outside of it.
*
* @default true
*/
closeOnClickOutside?: boolean;
sx?: ThemeUICSSObject;
}
/**
* A popover. The content is rendered in a Portal. Use `sx` to style the popover container.
*
* @example
* <Popover>
* <PopoverButton>Open Popover</PopoverButton>
* <PopoverContent>
* <Text>This is the content of the popover.</Text>
* </PopoverContent>
* </Popover>
*/
export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;