| 1 | import * as React from "react";
|
| 2 | import { Props } from "../../common";
|
| 3 | import { ContextMenuPopoverOptions, Offset } from "./contextMenuShared";
|
| 4 | /**
|
| 5 | * Render props relevant to the _content_ of a context menu (rendered as the underlying Popover's content).
|
| 6 | */
|
| 7 | export interface ContextMenuContentProps {
|
| 8 | /** Whether the context menu is currently open. */
|
| 9 | isOpen: boolean;
|
| 10 | /**
|
| 11 | * The computed target offset (x, y) coordinates for the context menu click event.
|
| 12 | * On first render, before any context menu click event has occurred, this will be undefined.
|
| 13 | */
|
| 14 | targetOffset: Offset | undefined;
|
| 15 | /** The context menu click event. If isOpen is false, this will be undefined. */
|
| 16 | mouseEvent: React.MouseEvent<HTMLElement> | undefined;
|
| 17 | }
|
| 18 | /**
|
| 19 | * Render props for advanced usage of ContextMenu.
|
| 20 | */
|
| 21 | export interface ContextMenuChildrenProps {
|
| 22 | /** Context menu container element class */
|
| 23 | className: string;
|
| 24 | /** Render props relevant to the content of this context menu */
|
| 25 | contentProps: ContextMenuContentProps;
|
| 26 | /** Context menu handler which implements the custom context menu interaction */
|
| 27 | onContextMenu: React.MouseEventHandler<HTMLElement>;
|
| 28 | /** Popover element rendered by ContextMenu, used to establish a click target to position the menu */
|
| 29 | popover: JSX.Element | undefined;
|
| 30 | /** DOM ref for the context menu target, used to detect dark theme */
|
| 31 | ref: React.Ref<any>;
|
| 32 | }
|
| 33 | export interface ContextMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "className" | "content" | "onContextMenu">, React.RefAttributes<any>, Props {
|
| 34 | /**
|
| 35 | * Menu content. This will usually be a Blueprint `<Menu>` component.
|
| 36 | * This optionally functions as a render prop so you can use component state to render content.
|
| 37 | */
|
| 38 | content: JSX.Element | ((props: ContextMenuContentProps) => JSX.Element | undefined) | undefined;
|
| 39 | /**
|
| 40 | * The context menu target. This may optionally be a render function so you can use
|
| 41 | * component state to render the target.
|
| 42 | */
|
| 43 | children: React.ReactNode | ((props: ContextMenuChildrenProps) => React.ReactElement);
|
| 44 | /**
|
| 45 | * Whether the context menu is disabled.
|
| 46 | *
|
| 47 | * @default false
|
| 48 | */
|
| 49 | disabled?: boolean;
|
| 50 | /**
|
| 51 | * Callback invoked when the popover overlay closes.
|
| 52 | */
|
| 53 | onClose?: () => void;
|
| 54 | /**
|
| 55 | * An optional context menu event handler. This can be useful if you want to do something with the
|
| 56 | * mouse event unrelated to rendering the context menu itself, especially if that involves setting
|
| 57 | * React state (which is an error to do in the render code path of this component).
|
| 58 | */
|
| 59 | onContextMenu?: React.MouseEventHandler<HTMLElement>;
|
| 60 | /**
|
| 61 | * A limited subset of props to forward along to the popover overlay generated by this component.
|
| 62 | */
|
| 63 | popoverProps?: ContextMenuPopoverOptions;
|
| 64 | /**
|
| 65 | * HTML tag to use for container element. Only used if this component's children are specified as
|
| 66 | * React node(s), not when it is a render function (in that case, you get to render whatever tag
|
| 67 | * you wish).
|
| 68 | *
|
| 69 | * @default "div"
|
| 70 | */
|
| 71 | tagName?: keyof JSX.IntrinsicElements;
|
| 72 | }
|
| 73 | /**
|
| 74 | * Context menu component.
|
| 75 | *
|
| 76 | * @see https://blueprintjs.com/docs/#core/components/context-menu
|
| 77 | */
|
| 78 | export declare const ContextMenu: React.FC<ContextMenuProps>;
|