@cbinsights/fds
Version:
Form: A design system by CB Insights
65 lines (64 loc) • 3.36 kB
TypeScript
import React, { RefObject } from 'react';
import * as RadixPopover from '@radix-ui/react-popover';
export declare type Position = 'top' | 'right' | 'bottom' | 'left';
export declare type InteractionMode = 'hover' | 'click' | 'controlled';
declare type RequiredOnInteractOutsideFn = Required<React.ComponentProps<typeof RadixPopover.Content>>['onInteractOutside'];
declare type InteractOutsideEvent = Parameters<RequiredOnInteractOutsideFn>[0];
export interface PopoverProps {
/** JSX - Acts as a positioning reference for the popover and triggers active state */
trigger: React.ReactElement;
/**
* JSX - Content to place in the positioned popover container. The popover container
* does not provide any default styling; content should be styled with background,
* borders, and shadows as appropriate.
*/
children: React.ReactNode;
/**
* What mode of interaction triggers the active/inactive state of the popover.
*
* `hover` - popover opens on trigger hover/focus
*
* `click` - popover opens on trigger click
*
* `controlled` - enables "fully controlled" mode in which the popover is only active
* when the `isOpen` prop is set to `true`. Use `onUserDismiss` to handle dismissal
* events from user interaction.
*/
interactionMode?: InteractionMode;
/** Controlls active state of popover when in fully controlled interaction mode */
isOpen?: boolean;
/**
* Callback fired when user takes an action to dismiss the popover.
* (e.g. ESC press, clicking outside, etc.)
* Useful for updating `isOpen` in controlled mode.
* Function is invoked with the DOM event as the argument.
*/
onUserDismiss?: (e: MouseEvent | KeyboardEvent | InteractOutsideEvent) => void;
/** disables portaling the popover to `document.body` */
disablePortal?: boolean;
/**
* Vertical position preference of popover content.
* `top` for example, will place the popover content above the trigger.
*/
position?: Position;
/** Horizontal alignment preference of popover content relative to trigger */
alignment?: 'start' | 'center' | 'end';
/** Offset distance from trigger. */
distance?: number;
/** Delay in milliseconds for popover to trigger (hover mode only) */
delay?: number;
/** Name of transition for popover content */
transitionName?: 'GrowFast';
/** Callback called when popover opens */
onOpen?: () => void;
/** Callback called when popover closes */
onClose?: () => void;
/** When popover opens, this element should freeze scrolling. When the popover closes, the scrollability of this element should resume. */
disableScrollRef?: RefObject<HTMLElement>;
/** When the Popover detects scroll events from this ref, the popover should close. */
closeOnScrollRef?: RefObject<HTMLElement>;
/** Ref to forward to the content container of the popover */
ref?: RefObject<HTMLDivElement>;
}
declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, "children" | "onClose" | "alignment" | "closeOnScrollRef" | "delay" | "disablePortal" | "disableScrollRef" | "distance" | "interactionMode" | "isOpen" | "onOpen" | "onUserDismiss" | "position" | "transitionName" | "trigger"> & React.RefAttributes<HTMLDivElement>>;
export default Popover;