import React, { HTMLAttributes, ReactNode } from 'react'; import type { Options } from '@popperjs/core'; import type { Placements, Triggers } from '../../types'; export interface CPopoverProps extends Omit, 'title' | 'content'> { /** * Adds a fade transition animation to the React Popover. * * @since 4.9.0 */ animation?: boolean; /** * Custom class name(s) for additional styling. */ className?: string; /** * Defines the container element to which the React Popover is appended. * Accepts: * - A DOM element (`HTMLElement` or `DocumentFragment`) * - A function that returns a single element * - `null` (defaults to `document.body`) * * @example * ... * * @default document.body * @since 4.11.0 */ container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null; /** * Main content of the React Popover. It can be a string or any valid React node. */ content: ReactNode | string; /** * Delay (in milliseconds) before showing or hiding the React Popover. * - If a number is provided, that delay applies to both "show" and "hide". * - If an object is provided, use separate values for "show" and "hide". * * @example * // Delays 300ms on both show and hide * ... * * // Delays 500ms on show and 100ms on hide * ... * * @since 4.9.0 */ delay?: number | { show: number; hide: number; }; /** * Specifies the fallback placements when the preferred `placement` cannot be met. * * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[] * @since 4.9.0 */ fallbackPlacements?: Placements | Placements[]; /** * Offset of the React Popover relative to its toggle element, in the form `[x, y]`. * * @example * // Offset the menu 0px in X and 10px in Y direction * ... * * // Offset the menu 5px in both X and Y direction * ... */ offset?: [number, number]; /** * Invoked when the React Popover is about to hide. */ onHide?: () => void; /** * Invoked when the React Popover is about to show. */ onShow?: () => void; /** * Placement of the React Popover. Popper.js may override this based on available space. */ placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'; /** * Allows customization of the Popper.js configuration for the React Popover. * Can be an object or a function returning a modified configuration. * [Learn more](https://popper.js.org/docs/v2/constructors/#options) * * @example * ({ * ...defaultConfig, * strategy: 'fixed', * modifiers: [ * ...defaultConfig.modifiers, * { name: 'computeStyles', options: { adaptive: false } }, * ], * })} * >... * * @since 5.5.0 */ popperConfig?: Partial | ((defaultPopperConfig: Partial) => Partial); /** * Title for the React Popover header. Can be a string or any valid React node. */ title?: ReactNode | string; /** * Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers. * * @example * // Hover-only popover * ... * * // Hover + click combined * ... * * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[] */ trigger?: Triggers | Triggers[]; /** * Controls the visibility of the React Popover. * - `true` shows the popover. * - `false` hides the popover. */ visible?: boolean; } export declare const CPopover: React.ForwardRefExoticComponent>;