@yamada-ui/popover/dist/popover.d.mts

Yamada UI popover component

import { FC, ThemeProps, CSSUIObject, PropGetter } from '@yamada-ui/core';
import { MotionTransitionProps, MotionProps } from '@yamada-ui/motion';
import { LazyMode } from '@yamada-ui/use-disclosure';
import { UsePopperProps } from '@yamada-ui/use-popper';
import { PropsWithChildren, RefObject, ComponentProps } from 'react';

type PopoverProperty = (typeof popoverProperties)[number];
declare const popoverProperties: readonly ["enabled", "offset", "gutter", "preventOverflow", "flip", "matchWidth", "boundary", "eventListeners", "strategy", "placement", "modifiers", "open", "isOpen", "defaultOpen", "defaultIsOpen", "onOpen", "onClose", "initialFocusRef", "restoreFocus", "autoFocus", "closeOnBlur", "closeOnEsc", "closeOnButton", "trigger", "openDelay", "closeDelay", "lazy", "isLazy", "lazyBehavior", "animation", "duration"];
interface ComboBoxProps extends Omit<PopoverOptions, "autoFocus" | "closeOnButton" | "initialFocusRef" | "relatedRef" | "restoreFocus" | "trigger">, Omit<UsePopperProps, "enabled"> {
}
interface PopoverOptions {
    /**
     * The animation of the popover.
     *
     * @default 'scale'
     */
    animation?: "bottom" | "left" | "none" | "right" | "scale" | "top";
    /**
     * If `true`, focus will be transferred to the first interactive element when the popover opens.
     *
     * @default true
     */
    autoFocus?: boolean;
    /**
     * The number of delay time to close.
     *
     * @default 200
     */
    closeDelay?: number;
    /**
     * If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
     *
     * @default true
     */
    closeOnBlur?: boolean;
    /**
     * If `true`, display the popover close button.
     *
     * @default true
     */
    closeOnButton?: boolean;
    /**
     * If `true`, the popover will close when you hit the `Esc` key.
     *
     * @default true
     */
    closeOnEsc?: boolean;
    /**
     * If `true`, the popover will be initially opened.
     *
     * @deprecated Use `defaultOpen` instead
     */
    defaultIsOpen?: boolean;
    /**
     * If `true`, the popover will be initially opened.
     */
    defaultOpen?: boolean;
    /**
     * The animation duration.
     */
    duration?: MotionTransitionProps["duration"];
    /**
     * The `ref` of the element that should receive focus when the popover opens.
     */
    initialFocusRef?: RefObject<{
        focus(): void;
    }>;
    /**
     * If `true`, the PopoverContent rendering will be deferred until the popover is open.
     *
     * @default false
     *
     * @deprecated Use `lazy` instead
     */
    isLazy?: boolean;
    /**
     * If `true`, the popover will be opened.
     *
     * @deprecated Use `open` instead
     */
    isOpen?: boolean;
    /**
     * If `true`, the PopoverContent rendering will be deferred until the popover is open.
     *
     * @default false
     */
    lazy?: boolean;
    /**
     * The lazy behavior of popover's content when not visible. Only works when `lazy={true}`
     *
     * - `unmount`: The popover's content is always unmounted when not open.
     * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.
     *
     * @default 'unmount'
     */
    lazyBehavior?: LazyMode;
    /**
     * If `true`, the popover will be opened.
     */
    open?: boolean;
    /**
     * The number of delay time to open.
     *
     * @default 200
     */
    openDelay?: number;
    /**
     * The `ref` of the element related to the popover.
     * This is used during the `onBlur` event.
     */
    relatedRef?: RefObject<HTMLElement>;
    /**
     * If `true`, focus will be returned to the element that triggers the popover when it closes.
     *
     * @default true
     */
    restoreFocus?: boolean;
    /**
     * The interaction that triggers the popover.
     *
     * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.
     * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.
     *
     * @default 'click'
     */
    trigger?: "click" | "contextmenu" | "hover" | "never";
    /**
     * Callback fired when the popover closes.
     */
    onClose?: () => void;
    /**
     * Callback fired when the popover opens.
     */
    onOpen?: () => void;
}
interface PopoverProps extends ThemeProps<"Popover">, Omit<UsePopperProps, "enabled">, PropsWithChildren<PopoverOptions> {
}
interface PopoverContext extends Pick<PopoverOptions, "animation" | "closeOnButton" | "duration" | "isOpen" | "onClose" | "open"> {
    id: string;
    bodyRef: RefObject<HTMLElement>;
    forceUpdate: () => undefined | void;
    headerRef: RefObject<HTMLElement>;
    shouldRenderContent: boolean;
    styles: {
        [key: string]: CSSUIObject | undefined;
    };
    getAnchorProps: PropGetter;
    getPopoverProps: PropGetter<MotionProps<"section">, MotionProps<"section">>;
    getPopperProps: PropGetter<ComponentProps<"div">>;
    getTriggerProps: PropGetter;
    onAnimationComplete: () => void;
}
declare const usePopover: () => PopoverContext;

/**
 * `Popover` is a component that floats around an element to display information.
 *
 * @see Docs https://yamada-ui.com/components/overlay/popover
 */
declare const Popover: FC<PopoverProps>;

export { type ComboBoxProps, Popover, type PopoverProperty, type PopoverProps, popoverProperties, usePopover };