@stihl-design-system/components/components/Popover/Popover.d.ts

Welcome to the STIHL Design System react component library.

import { HTMLProps, JSX } from 'react';
import { OpenChangeReason, Placement } from '@floating-ui/react';
export interface PopoverProps {
    /** Content within the Popover. */
    children?: React.ReactNode;
    /** Default anchor button props:
     *
     * `data-*`: Custom data attributes.
     *
     * `label`: Accessibility label for the default anchor button.
     * (default) 'Toggle popover'
     */
    defaultAnchorButtonProps?: {
        [key: `data-${string}`]: string | undefined;
        label?: string;
    };
    /** Opens the Popover on initial render.
     * @default false
     */
    initialOpen?: boolean;
    /** Controls the open state of the Popover. If provided, it will be a controlled component.
     * @default false
     */
    isOpen?: boolean;
    /** The placement of the Popover relative to the anchor element.
     * @default 'bottom'
     */
    placement?: Placement;
    /** The offset distance in "px" between the Popover and its anchor element.
     * @default 6
     */
    popoverOffset?: number;
    /** Whether to render a pointing arrow attached to the popover.
     * @default true
     */
    showArrow?: boolean;
    /** The variant style of the Popover. The "grey" variant requires `showArrow` to be `true`.
     * @default 'default'
     */
    variant?: 'default' | 'grey';
    /** A function that is called when the open state should change. */
    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
}
/**
 * The Popover component is used to display additional information or actions related to an anchor element. It can be positioned relative to the anchor and supports various placements and offsets.
 *
 * Design in Figma: [Popover](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=35223-10505)
 * */
export declare const DSPopover: {
    ({ children, ...rest }: PopoverProps): JSX.Element;
    /** attach static members */
    Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & PopoverAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
    Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & PopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
    displayName: string;
};
interface PopoverAnchorProps {
    children?: React.ReactNode;
}
interface PopoverContentProps {
    classNameArrow?: string;
}
export {};