@patreon/studio/module/components/Popover/types.d.ts

Patreon Studio Design System

import type { Placement } from '@floating-ui/react-dom';
import type { AriaAttributes, ReactElement, ReactNode, Ref } from 'react';
type LegacyChildrenAPI = (value: {
    ref: Ref<unknown>;
    ariaProps: AriaAttributes;
}) => React.ReactNode;
export interface PopoverProps {
    /**
     * The component this popover will anchor next to and point at.
     * Ideally, this component is an interactive element (e.g. <button>).
     */
    children: ReactElement | LegacyChildrenAPI;
    /**
     * The content to display inside the popover.
     */
    content: ReactNode;
    /**
     * String descriptor for testing. References popover overlay.
     */
    'data-tag'?: string;
    /**
     * Hide the arrow pointing to the reference element. Defaults to `false`.
     * @default false
     */
    hideArrow?: boolean;
    /**
     * A unique HTML ID for the popover. If unspecified, one will be generated automatically.
     */
    id?: string;
    /**
     * Show the popover.
     */
    isOpen?: boolean;
    /**
     * Called when the user clicks outside of an open popover.
     */
    onCloseRequest?: () => void;
    /**
     * Preferred position of the popover relative to its reference element.
     * @default "top"
     */
    preferredPlacement?: Placement;
    /**
     * Where in the document to place the popover DOM.
     * @default "adjacent"
     */
    renderMode?: 'adjacent' | 'portal';
    /**
     * Maximum popover width, in units.
     * @deprecated
     */
    maxWidth?: number;
    /**
     * Minimum popover width, in units.
     * @deprecated
     */
    minWidth?: number;
    /**
     * Disable auto flipping of the `Popover` position when it will be partially or completely off screen. Use carefully.
     */
    autoPositioning?: 'disabled' | 'default';
}
export {};