@coreui/react/dist/cjs/components/popover/CPopover.d.ts

UI Components Library for React.js

import React, { HTMLAttributes, ReactNode } from 'react';
import type { Options } from '@popperjs/core';
import type { Placements, Triggers } from '../../types';
export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, '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
     * <CPopover container={document.getElementById('my-container')}>...</CPopover>
     *
     * @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
     * <CPopover delay={300}>...</CPopover>
     *
     * // Delays 500ms on show and 100ms on hide
     * <CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>
     *
     * @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
     * <CPopover offset={[0, 10]}>...</CPopover>
     *
     * // Offset the menu 5px in both X and Y direction
     * <CPopover offset={[5, 5]}>...</CPopover>
     */
    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
     * <CPopover
     *   popperConfig={(defaultConfig) => ({
     *     ...defaultConfig,
     *     strategy: 'fixed',
     *     modifiers: [
     *       ...defaultConfig.modifiers,
     *       { name: 'computeStyles', options: { adaptive: false } },
     *     ],
     *   })}
     * >...</CPopover>
     *
     * @since 5.5.0
     */
    popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>);
    /**
     * 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
     * <CPopover trigger="hover">...</CPopover>
     *
     * // Hover + click combined
     * <CPopover trigger={['hover', 'click']}>...</CPopover>
     *
     * @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<CPopoverProps & React.RefAttributes<HTMLDivElement>>;