material-ui-popup-state/hooks.d.ts

easiest way to create menus, popovers, and poppers with material-ui

import { type SyntheticEvent, type MouseEvent, type TouchEvent, type FocusEvent } from 'react';
import { type PopoverPosition, type PopoverReference } from '@mui/material';
export type Variant = 'popover' | 'popper' | 'dialog';
export type PopupState = {
    open: (eventOrAnchorEl?: SyntheticEvent | Element | null) => void;
    close: (eventOrAnchorEl?: SyntheticEvent | Element | null) => void;
    toggle: (eventOrAnchorEl?: SyntheticEvent | Element | null) => void;
    onBlur: (event: FocusEvent) => void;
    onMouseLeave: (event: MouseEvent) => void;
    setOpen: (open: boolean, eventOrAnchorEl?: SyntheticEvent | Element | null) => void;
    isOpen: boolean;
    anchorEl: Element | undefined;
    anchorPosition: PopoverPosition | undefined;
    setAnchorEl: (anchorEl: Element | null | undefined) => any;
    setAnchorElUsed: boolean;
    disableAutoFocus: boolean;
    popupId: string | undefined;
    variant: Variant;
    _openEventType: string | null | undefined;
    _childPopupState: PopupState | null | undefined;
    _setChildPopupState: (popupState: PopupState | null | undefined) => void;
};
export type CoreState = {
    isOpen: boolean;
    setAnchorElUsed: boolean;
    anchorEl: Element | undefined;
    anchorPosition: PopoverPosition | undefined;
    hovered: boolean;
    focused: boolean;
    _openEventType: string | null | undefined;
    _childPopupState: PopupState | null | undefined;
    _deferNextOpen: boolean;
    _deferNextClose: boolean;
};
export declare const initCoreState: CoreState;
export declare function usePopupState({ parentPopupState, popupId, variant, disableAutoFocus, }: {
    parentPopupState?: PopupState | null | undefined;
    popupId?: string | null;
    variant: Variant;
    disableAutoFocus?: boolean | null | undefined;
}): PopupState;
/**
 * Creates a ref that sets the anchorEl for the popup.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function anchorRef({ setAnchorEl, }: PopupState): (el: Element | null | undefined) => any;
type ControlAriaProps = {
    'aria-controls'?: string;
    'aria-describedby'?: string;
    'aria-haspopup'?: true;
};
/**
 * Creates props for a component that opens the popup when clicked.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindTrigger(popupState: PopupState): ControlAriaProps & {
    onClick: (event: MouseEvent) => void;
    onTouchStart: (event: TouchEvent) => void;
};
/**
 * Creates props for a component that opens the popup on its contextmenu event (right click).
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindContextMenu(popupState: PopupState): ControlAriaProps & {
    onContextMenu: (event: MouseEvent) => void;
};
/**
 * Creates props for a component that toggles the popup when clicked.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindToggle(popupState: PopupState): ControlAriaProps & {
    onClick: (event: MouseEvent) => void;
    onTouchStart: (event: TouchEvent) => void;
};
/**
 * Creates props for a component that opens the popup while hovered.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindHover(popupState: PopupState): ControlAriaProps & {
    onTouchStart: (event: TouchEvent) => any;
    onMouseOver: (event: MouseEvent) => any;
    onMouseLeave: (event: MouseEvent) => any;
};
/**
 * Creates props for a component that opens the popup while focused.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindFocus(popupState: PopupState): ControlAriaProps & {
    onFocus: (event: FocusEvent) => any;
    onBlur: (event: FocusEvent) => any;
};
/**
 * Creates props for a component that opens the popup while double click.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindDoubleClick({ isOpen, open, popupId, variant, }: PopupState): {
    'aria-controls'?: string;
    'aria-describedby'?: string;
    'aria-haspopup'?: true;
    onDoubleClick: (event: MouseEvent) => any;
};
/**
 * Creates props for a `Popover` component.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindPopover({ isOpen, anchorEl, anchorPosition, close, popupId, onMouseLeave, disableAutoFocus, _openEventType, }: PopupState): {
    id?: string;
    anchorEl?: Element | null;
    anchorPosition?: PopoverPosition;
    anchorReference: PopoverReference;
    open: boolean;
    onClose: () => void;
    onMouseLeave: (event: MouseEvent) => void;
    disableAutoFocus?: boolean;
    disableEnforceFocus?: boolean;
    disableRestoreFocus?: boolean;
};
/**
 * Creates props for a `Menu` component.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
/**
 * Creates props for a `Popover` component.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindMenu({ isOpen, anchorEl, anchorPosition, close, popupId, onMouseLeave, disableAutoFocus, _openEventType, }: PopupState): {
    id?: string;
    anchorEl?: Element | null;
    anchorPosition?: PopoverPosition;
    anchorReference: PopoverReference;
    open: boolean;
    onClose: () => void;
    onMouseLeave: (event: MouseEvent) => void;
    autoFocus?: boolean;
    disableAutoFocusItem?: boolean;
    disableAutoFocus?: boolean;
    disableEnforceFocus?: boolean;
    disableRestoreFocus?: boolean;
};
/**
 * Creates props for a `Popper` component.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindPopper({ isOpen, anchorEl, popupId, onMouseLeave, }: PopupState): {
    id?: string;
    anchorEl?: Element | null;
    open: boolean;
    onMouseLeave: (event: MouseEvent) => void;
};
/**
 * Creates props for a `Dialog` component.
 *
 * @param {object} popupState the argument passed to the child function of
 * `PopupState`
 */
export declare function bindDialog({ isOpen, close }: PopupState): {
    open: boolean;
    onClose: (event: SyntheticEvent) => any;
};
export {};
//# sourceMappingURL=hooks.d.ts.map