@mantine/core/lib/components/Popover/Popover.d.ts

React components library focused on usability, accessibility and developer experience

import { ElementProps, ExtendComponent, Factory, MantineRadius, MantineShadow, StylesApiProps } from '../../core';
import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
import { OverlayProps } from '../Overlay';
import { BasePortalProps } from '../Portal';
import { TransitionOverride } from '../Transition';
import { PopoverContextValue } from './Popover.context';
import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
import { PopoverContextMenu, PopoverContextMenuProps } from './PopoverContextMenu/PopoverContextMenu';
import { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
import { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
export type PopoverCssVariables = {
    dropdown: '--popover-radius' | '--popover-shadow';
};
export interface __PopoverProps {
    /** Dropdown position relative to the target element @default 'bottom' */
    position?: FloatingPosition;
    /** Offset of the dropdown element @default 8 */
    offset?: number | FloatingAxesOffsets;
    /** Called when dropdown position changes */
    onPositionChange?: (position: FloatingPosition) => void;
    /** Called when dropdown closes */
    onClose?: () => void;
    /** Called when the popover is dismissed by clicking outside or by pressing escape */
    onDismiss?: () => void;
    /** Called when dropdown opens */
    onOpen?: () => void;
    /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */
    keepMounted?: boolean;
    /**
     * Controls how the dropdown is hidden when `keepMounted` is set:
     * `'activity'` – hidden with React 19 `Activity` component,
     * `'display-none'` – hidden with `display: none` styles
     * @default 'activity'
     */
    keepMountedMode?: 'activity' | 'display-none';
    /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */
    transitionProps?: TransitionOverride;
    /** Called when exit transition ends */
    onExitTransitionEnd?: () => void;
    /** Called when enter transition ends */
    onEnterTransitionEnd?: () => void;
    /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */
    width?: PopoverWidth;
    /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */
    middlewares?: PopoverMiddlewares;
    /** Determines whether component should have an arrow @default false */
    withArrow?: boolean;
    /** Determines whether the overlay should be displayed when the dropdown is opened @default false */
    withOverlay?: boolean;
    /** Props passed down to `Overlay` component */
    overlayProps?: OverlayProps & ElementProps<'div'>;
    /** Arrow size in px @default 7 */
    arrowSize?: number;
    /** Arrow offset in px @default 5 */
    arrowOffset?: number;
    /** Arrow `border-radius` in px @default 0 */
    arrowRadius?: number;
    /** Arrow position */
    arrowPosition?: ArrowPosition;
    /** Determines whether dropdown should be rendered within the `Portal` @default true */
    withinPortal?: boolean;
    /** Props to pass down to the `Portal` when `withinPortal` is true */
    portalProps?: BasePortalProps;
    /** Dropdown `z-index` @default 300 */
    zIndex?: string | number;
    /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */
    radius?: MantineRadius;
    /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
    shadow?: MantineShadow;
    /** If set, popover dropdown will not be rendered */
    disabled?: boolean;
    /** Determines whether focus should be automatically returned to control when dropdown closes @default false */
    returnFocus?: boolean;
    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */
    floatingStrategy?: FloatingStrategy;
    /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */
    hideDetached?: boolean;
    /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */
    preventPositionChangeWhenVisible?: boolean;
}
export interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {
    __staticSelector?: string;
    /** `Popover.Target` and `Popover.Dropdown` components */
    children?: React.ReactNode;
    /** Initial opened state for uncontrolled component */
    defaultOpened?: boolean;
    /** Controlled dropdown opened state */
    opened?: boolean;
    /** Called with current state when dropdown opens or closes */
    onChange?: (opened: boolean) => void;
    /** Determines whether dropdown should be closed on outside clicks @default true */
    closeOnClickOutside?: boolean;
    /** Events that trigger outside clicks */
    clickOutsideEvents?: string[];
    /** Determines whether focus should be trapped within dropdown @default false */
    trapFocus?: boolean;
    /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */
    closeOnEscape?: boolean;
    /** Id base to create accessibility connections */
    id?: string;
    /** Determines whether dropdown and target elements should have accessible roles @default true */
    withRoles?: boolean;
}
export type PopoverFactory = Factory<{
    props: PopoverProps;
    stylesNames: PopoverStylesNames;
    vars: PopoverCssVariables;
}>;
export declare function Popover(_props: PopoverProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Popover {
    var Target: import("../..").MantineComponent<{
        props: PopoverTargetProps;
        ref: HTMLElement;
        compound: true;
    }>;
    var Dropdown: import("../..").MantineComponent<{
        props: PopoverDropdownProps;
        ref: HTMLDivElement;
        stylesNames: PopoverStylesNames;
        compound: true;
    }>;
    var ContextMenu: typeof PopoverContextMenu;
    var varsResolver: import("../..").VarsResolver<{
        props: PopoverProps;
        stylesNames: PopoverStylesNames;
        vars: PopoverCssVariables;
    }>;
    var displayName: string;
    var extend: (input: ExtendComponent<PopoverFactory>) => import("../../core/factory/factory").ExtendsRootComponent<{
        props: PopoverProps;
        stylesNames: PopoverStylesNames;
        vars: PopoverCssVariables;
    }>;
    var withProps: (fixedProps: Partial<PopoverProps>) => {
        (props: PopoverProps): import("react/jsx-runtime").JSX.Element;
        extend: (input: ExtendComponent<PopoverFactory>) => import("../../core/factory/factory").ExtendsRootComponent<{
            props: PopoverProps;
            stylesNames: PopoverStylesNames;
            vars: PopoverCssVariables;
        }>;
        displayName: string;
    };
}
export declare namespace Popover {
    type Props = PopoverProps;
    type __Props = __PopoverProps;
    type Factory = PopoverFactory;
    type StylesNames = PopoverStylesNames;
    type TargetProps = PopoverTargetProps;
    type DropdownProps = PopoverDropdownProps;
    type Width = PopoverWidth;
    type ContextValue = PopoverContextValue;
    namespace Target {
        type Props = PopoverTargetProps;
    }
    namespace Dropdown {
        type Props = PopoverDropdownProps;
    }
    namespace ContextMenu {
        type Props = PopoverContextMenuProps;
    }
}