@stratakit/structures/dist/Popover.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import * as AkPopover from "@ariakit/react/popover";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface PopoverProviderProps extends Pick<AkPopover.PopoverProviderProps, "children" | "open" | "setOpen" | "placement"> {
}
interface PopoverRootProps extends BaseProps, Pick<AkPopover.PopoverProps, "unmountOnHide"> {
}
interface PopoverProps extends Omit<BaseProps, "content">, Pick<PopoverProviderProps, "open" | "setOpen" | "placement">, Pick<PopoverRootProps, "unmountOnHide"> {
    /**
     * The element that will trigger the popover when clicked.
     * Common examples include buttons, links, or form controls.
     *
     * **Note**: The trigger must be a single interactive element. Do not add a
     * popover to a non-interactive static element (such as a `<div>` or `<svg>`). Also,
     * the trigger element must forward its ref and spread its props.
     */
    children: React.ReactElement;
    /**
     * The content to be displayed inside the popover when the trigger element is hovered or focused.
     */
    content: React.ReactNode;
}
/**
 * A component used to display content in a non-modal window overlay that is placed relative to a trigger element.
 *
 * Example:
 * ```tsx
 * <Popover
 *   content={<>Content</>}
 * >
 *   <Button>Open</Button>
 * </Popover>
 * ```
 */
declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export default Popover;