@carbon/react/es/components/Popover/index.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { WeakValidationMap } from 'prop-types';
import React from 'react';
import { type Boundary } from '@floating-ui/react';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
export interface PopoverContext {
    setFloating: React.Ref<HTMLSpanElement>;
    caretRef: React.Ref<HTMLSpanElement>;
    autoAlign: boolean | null;
}
/**
 * Deprecated popover alignment values.
 * @deprecated Use NewPopoverAlignment instead.
 */
export type DeprecatedPopoverAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
export type NewPopoverAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
export type PopoverAlignment = DeprecatedPopoverAlignment | NewPopoverAlignment;
export interface PopoverBaseProps {
    /**
     * Specify how the popover should align with the trigger element.
     */
    align?: PopoverAlignment;
    /**
     * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.
     */
    alignmentAxisOffset?: number;
    /**
     * Will auto-align the popover on first render if it is not visible. This prop
     * is currently experimental and is subject to future changes. Requires
     * React v17+
     * @see https://github.com/carbon-design-system/carbon/issues/18714
     */
    autoAlign?: boolean;
    /**
     * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
     */
    autoAlignBoundary?: Boundary;
    /**
     * Specify whether a caret should be rendered
     */
    caret?: boolean;
    /**
     * Provide elements to be rendered inside of the component
     */
    children?: React.ReactNode;
    /**
     * Provide a custom class name to be added to the outermost node in the
     * component
     */
    className?: string;
    /**
     * Specify whether a drop shadow should be rendered on the popover
     */
    dropShadow?: boolean;
    /**
     * Render the component using the high-contrast variant
     */
    highContrast?: boolean;
    /**
     * Render the component using the tab tip variant
     */
    isTabTip?: boolean;
    /**
     * Specify a handler for closing popover.
     * The handler should take care of closing the popover, e.g. changing the `open` prop.
     */
    onRequestClose?: () => void;
    /**
     * Specify whether the component is currently open or closed
     */
    open: boolean;
}
export type PopoverProps<E extends React.ElementType> = PolymorphicComponentPropWithRef<E, PopoverBaseProps>;
export type PopoverComponent = <E extends React.ElementType = 'span'>(props: PopoverProps<E>) => React.ReactElement | any;
export declare const Popover: PopoverComponent & {
    displayName?: string;
    propTypes?: WeakValidationMap<PopoverProps<any>>;
};
export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;