@sinchsmb/ui-kit/dist/types/components/Dropdown/Dropdown.d.ts

UI kit for SinchSMB frontend

import FocusTrap from 'focus-trap-react';
import { AriaRole, ReactNode } from 'react';
import { usePopper } from 'react-popper';
import { TestIdProps } from '../../types';
/** Props for {@link Dropdown } */
export interface DropdownProps extends TestIdProps {
    /**
     * HTML id attribute that will be set to {@link Dropdown} container.
     *
     * This props should be REQUIRED because it should be used in `aria-controls`.
     */
    id: string;
    /** HTML role attribute that will be set to {@link Dropdown} container. */
    role?: AriaRole;
    /**
     * If `true` then {@link Dropdown} will be visible.
     *
     * Pay attention that {@link Dropdown} will be hidden with animation, that's
     * mean that if this property will be changed to `false` dropdown content will
     * be hidden after some delay.
     */
    visible: boolean;
    /**
     * Element that used as {@link Dropdown} trigger.
     *
     * It's important to know what element used as trigger to correct process
     * clicks event outside {@link Dropdown}. If we do not know trigger, and
     * user clicks by trigger, than {@link Dropdown} will be hidden and shown
     * immediately.
     */
    trigger: HTMLElement | null;
    /**
     * Options that will be passed to {@link usePopper} hook.
     *
     * Strategy should be always `fixed` to be sure that {@link Dropdown} works
     * well in popups.
     */
    popperOptions: Omit<NonNullable<Parameters<typeof usePopper>[2]>, 'strategy'>;
    /** Handler that should be run when user press ESC button. Usually it should hide {@link Dropdown} */
    onEscButtonPress(): void;
    /**
     * Handler that should be run when user click somewhere outside {@link Dropdown}.
     * Usually it should hide {@link Dropdown}
     */
    onOutsideClick(event: MouseEvent): void;
    children: ReactNode;
    focusTrapOptions?: FocusTrap.Props['focusTrapOptions'];
}
export declare function Dropdown(props: DropdownProps): JSX.Element;