shelving/ui/form/Popover.d.ts

Toolkit for using data in JavaScript.

/** biome-ignore-all lint/a11y/noStaticElementInteractions: This is fine we're only using this to listen for clicks on child buttons. */
/** biome-ignore-all lint/a11y/useKeyWithClickEvents: This is fine we're only using this to listen for clicks on child buttons. */
import type { ReactElement, ReactNode } from "react";
import type { Callback } from "../../util/function.js";
export type PopoverChildren = [
    /**
     * First child of the <Popover> is element that activates the popover.
     * - Should be a `<Button>` or `<Input>` that activates or provides the children.
     */
    trigger: ReactNode,
    /**
     * Remaining children are the contents of the popover.
     */
    ...popover: ReactNode[]
];
export interface PopoverProps {
    /** Children for the popover. */
    children: PopoverChildren;
    /** Callback that gets called when the Popover closes. */
    onClose?: Callback;
    /** Whether the popover is open/closed (defaults to whether all `popoverChildren` nodes has at least one truthy node). */
    open?: boolean;
}
/**
 * An input button that, when clicked, shows a popover next to it when clicked or focused.
 * - The first element passed to `children` is used as the content for the button, the rest is the content of the popover.
 *
 * @todo DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
 */
export declare function Popover({ children: [trigger, ...popover], //
onClose, open, }: PopoverProps): ReactElement;