@react-md/menu/types/useContextMenu.d.ts

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

import { Dispatch, Ref, SetStateAction } from "react";
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
import { PositionAnchor } from "@react-md/utils";
import { MenuProps } from "./Menu";
declare type ProvidedPropNames = "id" | "anchor" | "visible" | "classNames" | "positionOptions" | "onRequestClose" | "disableControlClickOkay";
export interface ProvidedContextMenuProps extends Required<Pick<MenuProps, ProvidedPropNames>> {
    /**
     * A ref that must be provided to the `Menu` component that is acting as a
     * context menu if you want to allow the native context menus within this
     * custom context menu.
     *
     * If this is never provided to the `Menu` component, right clicking (to
     * inspect an element for example) will close this context menu.
     */
    ref: (instance: HTMLDivElement | null) => void;
}
declare type VisibilityDispatcher = Dispatch<SetStateAction<boolean>>;
declare type ReturnValue<CE extends HTMLElement> = [
    ProvidedContextMenuProps,
    React.MouseEventHandler<CE>,
    VisibilityDispatcher
];
interface Options {
    /**
     * The id to use for the context menu. This defaults to `context-menu` since
     * there can usually only be one context menu visible at a time.
     */
    id?: string;
    /**
     * An optional ref that should be merged with the returned ref.
     */
    ref?: Ref<HTMLDivElement>;
    /**
     * The anchor to use for context menus.
     *
     * Defaults to `inner-left` and `top` to mimic native context menus.
     */
    anchor?: PositionAnchor;
    /**
     * The CSS classNames to use for the context menu animation. This defaults to
     * a vertical scaling transition instead of the default "from-point-scaling"
     * transition.
     */
    classNames?: CSSTransitionClassNames;
    /**
     * When a context menu becomes visible, the native functionality is to also
     * highlight any text below the cursor when possible. Since this is a custom
     * context menu, this is normally not desired behavior so this hook will
     * automatically deselect this text. If the text selection behavior is
     * desired, this property can be enabled to keep text selected.
     */
    disableDeselect?: boolean;
}
export declare function useContextMenu<CE extends HTMLElement>({ id, ref: propRef, anchor, classNames, disableDeselect, }?: Options): ReturnValue<CE>;
export {};