@primitiv-ui/react 0.1.38 → 0.1.39

package/dist/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,508 @@
+import type { ReactElement } from "react";
+import { ContextMenuCheckboxItemProps, ContextMenuContentProps, ContextMenuGroupProps, ContextMenuItemIndicatorProps, ContextMenuItemProps, ContextMenuLabelProps, ContextMenuRadioGroupProps, ContextMenuRadioItemProps, ContextMenuRootProps, ContextMenuSeparatorProps, ContextMenuSubContentProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuTriggerProps } from "./types.js";
+/**
+ * The root of a ContextMenu — owns the open state and the position the
+ * menu should open at, and provides context to descendants. Renders no
+ * DOM of its own; it is a context boundary.
+ *
+ * Supports two state modes, statically discriminated at the type level so
+ * only one shape is accepted by TypeScript:
+ *
+ * - **Uncontrolled** — pass {@link ContextMenuRootProps.defaultOpen | `defaultOpen`}
+ *   (or omit it to start closed). The component owns and updates the open
+ *   state internally. Optional {@link ContextMenuRootProps.onOpenChange | `onOpenChange`}
+ *   observes transitions.
+ * - **Controlled** — pass {@link ContextMenuRootProps.open | `open`} *and*
+ *   {@link ContextMenuRootProps.onOpenChange | `onOpenChange`} together. The
+ *   parent owns the state; the component defers every transition back through
+ *   the callback.
+ *
+ * **Reading direction.** Pass {@link ContextMenuRootProps.dir | `dir`} to
+ * set `"ltr"` or `"rtl"`, which inverts the submenu open / close arrow
+ * keys (`ArrowRight` ↔ `ArrowLeft`). When omitted, the component reads
+ * the inherited {@link DirectionProvider} value, falling back to `"ltr"`.
+ *
+ * Renders no DOM of its own — no extended host element — it is purely a
+ * context provider around its `children`.
+ *
+ * @example Uncontrolled
+ * ```tsx
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>
+ *     <div className="canvas">Right-click here</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item onSelect={paste}>Paste</ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu.Root>
+ * ```
+ *
+ * @example Controlled
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <ContextMenu.Root open={open} onOpenChange={setOpen}>
+ *   ...
+ * </ContextMenu.Root>
+ * ```
+ */
+export declare function ContextMenuRoot({ defaultOpen, open: controlledOpen, onOpenChange, dir, children, }: ContextMenuRootProps): ReactElement;
+export declare namespace ContextMenuRoot {
+    var displayName: string;
+}
+/**
+ * The area that responds to right-click. Renders a `<span>` by default
+ * (a non-button host so the wrapped content keeps its native semantics);
+ * pass `asChild` to render any element.
+ *
+ * When the user opens the platform context menu over this element (via
+ * right-click, long-press on touch, or the keyboard context-menu key),
+ * the native menu is suppressed and the ContextMenu opens, positioned at
+ * the pointer.
+ *
+ * A `disabled` Trigger ignores the gesture entirely, letting the native
+ * browser menu through. `data-disabled=""` and `data-state="closed"` are
+ * exposed for styling.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Default `<span>` host
+ * ```tsx
+ * <ContextMenu.Trigger>
+ *   <div className="canvas">Right-click anywhere</div>
+ * </ContextMenu.Trigger>
+ * ```
+ *
+ * @example asChild — attach the gesture to any element
+ * ```tsx
+ * <ContextMenu.Trigger asChild>
+ *   <ImageCard src="..." alt="..." />
+ * </ContextMenu.Trigger>
+ * ```
+ */
+export declare function ContextMenuTrigger({ children, onContextMenu, asChild, disabled, ...rest }: ContextMenuTriggerProps): ReactElement;
+export declare namespace ContextMenuTrigger {
+    var displayName: string;
+}
+/**
+ * The menu panel rendered with the native HTML
+ * [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * in **manual** mode (`popover="manual"`) — no portal, no floating-ui. The
+ * browser still layers the menu via the top layer, but the component owns
+ * the close flow rather than the browser's light-dismiss algorithm.
+ *
+ * Manual mode is required because the right-click gesture's pointerdown
+ * fires before the popover exists; with `popover="auto"`, the browser
+ * treats the matching pointerup as an outside click and closes the menu
+ * the instant the user releases the button. Outside-click close and
+ * Escape are handled explicitly here instead.
+ *
+ * Renders a `<menu role="menu">` positioned at the pointer coordinates
+ * captured when the Trigger fired its `contextmenu` event. The cursor
+ * position is exposed twice on the element style: as explicit `left` /
+ * `top` insets (so the menu renders at the cursor with zero consumer
+ * CSS), and as `--primitiv-context-menu-x` / `--primitiv-context-menu-y`
+ * custom properties so consumer CSS can write `@position-try` fallbacks
+ * that flip the menu to the opposite side when it would overflow the
+ * viewport. Pass `asChild` to render any element with menu semantics.
+ *
+ * **Focus & keyboard.** On open, focus moves to the first enabled item.
+ * `ArrowDown` / `ArrowUp` move between items (wrapping), `Home` / `End`
+ * jump to the first / last, `Enter` / `Space` activate the focused item,
+ * `Escape` closes and returns focus to the Trigger, and any printable
+ * character starts a typeahead search (accumulated within a 500 ms window;
+ * repeating a character cycles items sharing that first letter). Disabled
+ * items are skipped throughout. `data-state="open" | "closed"` is exposed
+ * for state-driven styling.
+ *
+ * @extends HTMLMenuElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Content>
+ *   <ContextMenu.Item onSelect={cut}>Cut</ContextMenu.Item>
+ *   <ContextMenu.Item onSelect={copy}>Copy</ContextMenu.Item>
+ *   <ContextMenu.Separator />
+ *   <ContextMenu.Item disabled>Archive</ContextMenu.Item>
+ * </ContextMenu.Content>
+ * ```
+ */
+export declare function ContextMenuContent({ children, style, onKeyDown, asChild, ...rest }: ContextMenuContentProps): ReactElement;
+export declare namespace ContextMenuContent {
+    var displayName: string;
+}
+/**
+ * A standard menu item. Renders a `<li role="menuitem">` by default; pass
+ * `asChild` to render any element with menuitem semantics.
+ *
+ * Clicking the item (or pressing Enter / Space while focused) fires
+ * {@link ContextMenuItemProps.onSelect | `onSelect`} with a cancellable
+ * `Event`. The menu auto-closes after selection; call
+ * `event.preventDefault()` inside `onSelect` to keep it open.
+ *
+ * Disabled items receive `aria-disabled="true"` and no-op on activation;
+ * arrow navigation and typeahead skip them. `data-highlighted=""` is
+ * present while the pointer hovers the item.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Item onSelect={() => rename()}>Rename</ContextMenu.Item>
+ * <ContextMenu.Item disabled>Archive (coming soon)</ContextMenu.Item>
+ * ```
+ *
+ * @example asChild — render a link with menuitem semantics
+ * ```tsx
+ * <ContextMenu.Item asChild>
+ *   <a href="/rename">Rename</a>
+ * </ContextMenu.Item>
+ * ```
+ */
+export declare function ContextMenuItem({ children, onClick, onSelect, disabled, asChild, ...rest }: ContextMenuItemProps): ReactElement;
+export declare namespace ContextMenuItem {
+    var displayName: string;
+}
+/**
+ * A visual separator between groups of items. Renders a `<li role="separator">`
+ * by default. Non-interactive — skipped by focus, arrow navigation, and
+ * typeahead.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Item>Copy</ContextMenu.Item>
+ * <ContextMenu.Separator />
+ * <ContextMenu.Item>Delete</ContextMenu.Item>
+ * ```
+ */
+export declare function ContextMenuSeparator({ asChild, children, ...rest }: ContextMenuSeparatorProps): ReactElement;
+export declare namespace ContextMenuSeparator {
+    var displayName: string;
+}
+/**
+ * A semantic grouping of related items. Renders as a `<li role="group">`
+ * wrapping an inner `<ul role="none">`, or — with `asChild` — a single
+ * grouping element composed onto the provided child.
+ *
+ * Generates a stable id for its accompanying {@link ContextMenuLabel |
+ * `ContextMenu.Label`}, wired automatically via `aria-labelledby`.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Group>
+ *   <ContextMenu.Label>Edit</ContextMenu.Label>
+ *   <ContextMenu.Item>Undo</ContextMenu.Item>
+ *   <ContextMenu.Item>Redo</ContextMenu.Item>
+ * </ContextMenu.Group>
+ * ```
+ */
+export declare function ContextMenuGroup({ children, asChild, ...rest }: ContextMenuGroupProps): ReactElement;
+export declare namespace ContextMenuGroup {
+    var displayName: string;
+}
+/**
+ * A non-interactive label, typically used inside a {@link ContextMenuGroup |
+ * `ContextMenu.Group`} to give that group an accessible name. When nested in
+ * a group, the label's `id` is auto-wired to the group's `aria-labelledby` —
+ * consumers don't need to thread ids manually. A caller-supplied `id` takes
+ * precedence over the auto-generated one.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Group>
+ *   <ContextMenu.Label>View</ContextMenu.Label>
+ *   <ContextMenu.CheckboxItem>Show grid</ContextMenu.CheckboxItem>
+ * </ContextMenu.Group>
+ * ```
+ */
+export declare function ContextMenuLabel({ id, children, asChild, ...rest }: ContextMenuLabelProps): ReactElement;
+export declare namespace ContextMenuLabel {
+    var displayName: string;
+}
+/**
+ * A toggleable menu item. Renders a `<li role="menuitemcheckbox">` with
+ * `aria-checked` reflecting the current state. Supports a WAI-ARIA tri-state:
+ * `true`, `false`, or `"indeterminate"` (encoded as `aria-checked="mixed"`).
+ * An indeterminate item resolves to `true` on the next activation.
+ *
+ * Activation (click) toggles the checked state, then fires
+ * {@link ContextMenuCheckboxItemProps.onSelect | `onSelect`} with a
+ * cancellable `Event`. Call `event.preventDefault()` to keep the menu open.
+ *
+ * Supports both state modes: uncontrolled via
+ * {@link ContextMenuCheckboxItemUncontrolledProps.defaultChecked | `defaultChecked`},
+ * or controlled via
+ * {@link ContextMenuCheckboxItemControlledProps.checked | `checked`} +
+ * {@link ContextMenuCheckboxItemControlledProps.onCheckedChange | `onCheckedChange`}.
+ * Render a {@link ContextMenuItemIndicator | `ContextMenu.ItemIndicator`}
+ * inside it for the visible mark.
+ *
+ * Disabled items receive `aria-disabled="true"` and no-op on activation.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example Uncontrolled, with an indicator
+ * ```tsx
+ * <ContextMenu.CheckboxItem defaultChecked>
+ *   <ContextMenu.ItemIndicator><CheckIcon /></ContextMenu.ItemIndicator>
+ *   Show grid
+ * </ContextMenu.CheckboxItem>
+ * ```
+ *
+ * @example Controlled, kept open for rapid toggling
+ * ```tsx
+ * <ContextMenu.CheckboxItem
+ *   checked={showRuler}
+ *   onCheckedChange={setShowRuler}
+ *   onSelect={(event) => event.preventDefault()}
+ * >
+ *   Show ruler
+ * </ContextMenu.CheckboxItem>
+ * ```
+ */
+export declare function ContextMenuCheckboxItem({ children, onClick, onSelect, disabled, defaultChecked, checked: controlledChecked, onCheckedChange, asChild, ...rest }: ContextMenuCheckboxItemProps): ReactElement;
+export declare namespace ContextMenuCheckboxItem {
+    var displayName: string;
+}
+/**
+ * The visible mark (usually a checkmark) rendered inside a
+ * {@link ContextMenuCheckboxItem | `ContextMenu.CheckboxItem`} (or radio item).
+ * Must be a descendant of one; rendering it anywhere else throws a
+ * descriptive error.
+ *
+ * Renders a `<span>` by default. Exposes `data-state` reflecting the parent
+ * item's live state: `"checked"`, `"unchecked"`, or `"indeterminate"`.
+ *
+ * By default the indicator unmounts when its parent is unchecked. Pass
+ * {@link ContextMenuItemIndicatorProps.forceMount | `forceMount`} to keep
+ * the DOM node mounted in both states for animation use cases.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Compose onto an icon
+ * ```tsx
+ * <ContextMenu.CheckboxItem checked={bookmarked} onCheckedChange={setBookmarked}>
+ *   <ContextMenu.ItemIndicator asChild>
+ *     <CheckIcon aria-hidden />
+ *   </ContextMenu.ItemIndicator>
+ *   Bookmark
+ * </ContextMenu.CheckboxItem>
+ * ```
+ *
+ * @example forceMount for CSS-driven transitions
+ * ```tsx
+ * <ContextMenu.ItemIndicator forceMount>
+ *   <CheckIcon />
+ * </ContextMenu.ItemIndicator>
+ * ```
+ */
+export declare function ContextMenuItemIndicator({ children, asChild, forceMount, ...rest }: ContextMenuItemIndicatorProps): ReactElement | null;
+export declare namespace ContextMenuItemIndicator {
+    var displayName: string;
+}
+/**
+ * A single-selection group of menu items. Children must be
+ * {@link ContextMenuRadioItem | `ContextMenu.RadioItem`} elements. Renders a
+ * `<li role="group">` wrapping `<ul role="none">`.
+ *
+ * Owns the selected value: uncontrolled via
+ * {@link ContextMenuRadioGroupUncontrolledProps.defaultValue | `defaultValue`},
+ * or controlled via
+ * {@link ContextMenuRadioGroupControlledProps.value | `value`} +
+ * {@link ContextMenuRadioGroupControlledProps.onValueChange | `onValueChange`}.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.RadioGroup defaultValue="system">
+ *   <ContextMenu.RadioItem value="light">Light</ContextMenu.RadioItem>
+ *   <ContextMenu.RadioItem value="dark">Dark</ContextMenu.RadioItem>
+ *   <ContextMenu.RadioItem value="system">Match system</ContextMenu.RadioItem>
+ * </ContextMenu.RadioGroup>
+ * ```
+ */
+export declare function ContextMenuRadioGroup({ defaultValue, value: controlledValue, onValueChange, children, asChild, ...rest }: ContextMenuRadioGroupProps): ReactElement;
+export declare namespace ContextMenuRadioGroup {
+    var displayName: string;
+}
+/**
+ * A single radio choice. Must be rendered inside a {@link ContextMenuRadioGroup |
+ * `ContextMenu.RadioGroup`}; rendering it outside one throws a descriptive
+ * error.
+ *
+ * Renders a `<li role="menuitemradio">` with `aria-checked` reflecting whether
+ * this item's `value` matches the group's active value.
+ *
+ * Activation (click) selects this item, updating the group's value, then fires
+ * {@link ContextMenuRadioItemProps.onSelect | `onSelect`} with a cancellable
+ * `Event`. Call `event.preventDefault()` to keep the menu open.
+ *
+ * Disabled items receive `aria-disabled="true"` and no-op on activation.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.RadioItem value="dark">
+ *   <ContextMenu.ItemIndicator><DotIcon /></ContextMenu.ItemIndicator>
+ *   Dark
+ * </ContextMenu.RadioItem>
+ * ```
+ */
+export declare function ContextMenuRadioItem({ children, onClick, onSelect, disabled, value: itemValue, asChild, ...rest }: ContextMenuRadioItemProps): ReactElement;
+export declare namespace ContextMenuRadioItem {
+    var displayName: string;
+}
+/**
+ * A submenu boundary. Wrap a {@link ContextMenuSubTrigger | `ContextMenu.SubTrigger`}
+ * and its {@link ContextMenuSubContent | `ContextMenu.SubContent`} in a
+ * `ContextMenu.Sub` to establish an independent open state for the nested
+ * menu. Supports uncontrolled (`defaultOpen`) and controlled (`open` +
+ * `onOpenChange`) modes.
+ *
+ * Renders no DOM of its own — no extended host element — it is purely a
+ * context boundary around the SubTrigger / SubContent pair.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Sub>
+ *   <ContextMenu.SubTrigger>Share</ContextMenu.SubTrigger>
+ *   <ContextMenu.SubContent>
+ *     <ContextMenu.Item>Email</ContextMenu.Item>
+ *     <ContextMenu.Item>Copy link</ContextMenu.Item>
+ *   </ContextMenu.SubContent>
+ * </ContextMenu.Sub>
+ * ```
+ */
+export declare function ContextMenuSub({ defaultOpen, open: controlledOpen, onOpenChange, children, }: ContextMenuSubProps): ReactElement;
+export declare namespace ContextMenuSub {
+    var displayName: string;
+}
+/**
+ * The submenu trigger. Must be rendered inside a {@link ContextMenuSub |
+ * `ContextMenu.Sub`}.
+ *
+ * Renders a `<li role="menuitem">` with `aria-haspopup="menu"`,
+ * `aria-expanded`, and `aria-controls` wiring it to the sibling
+ * {@link ContextMenuSubContent | `ContextMenu.SubContent`}.
+ *
+ * Opens the submenu on click, the inline-forward arrow key, or pointer
+ * hover. The open key follows the resolved reading direction —
+ * `ArrowRight` in `"ltr"`, `ArrowLeft` in `"rtl"`. Disabled triggers
+ * ignore both click and the open arrow key. `data-highlighted=""` is
+ * present while hovered or while its submenu is open.
+ *
+ * @extends HTMLLIElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.Sub>
+ *   <ContextMenu.SubTrigger>More tools</ContextMenu.SubTrigger>
+ *   <ContextMenu.SubContent>...</ContextMenu.SubContent>
+ * </ContextMenu.Sub>
+ * ```
+ */
+export declare function ContextMenuSubTrigger({ children, onClick, onKeyDown, disabled, asChild, ...rest }: ContextMenuSubTriggerProps): ReactElement;
+export declare namespace ContextMenuSubTrigger {
+    var displayName: string;
+}
+/**
+ * The submenu panel. Must be rendered inside a {@link ContextMenuSub |
+ * `ContextMenu.Sub`}.
+ *
+ * Renders a `<menu role="menu" popover="auto">` by default. When the submenu
+ * opens, focus moves to its first enabled item. The inline-backward arrow
+ * key closes the submenu and returns focus to the SubTrigger —
+ * `ArrowLeft` in `"ltr"`, `ArrowRight` in `"rtl"`.
+ *
+ * Unlike {@link ContextMenuContent | `ContextMenu.Content`}, the submenu
+ * panel uses `popover="auto"` — it is opened programmatically and nests
+ * inside the already-open manual root popover.
+ *
+ * @extends HTMLMenuElement
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu.SubContent>
+ *   <ContextMenu.Item>Email</ContextMenu.Item>
+ *   <ContextMenu.Item>Copy link</ContextMenu.Item>
+ * </ContextMenu.SubContent>
+ * ```
+ */
+export declare function ContextMenuSubContent({ children, onKeyDown, asChild, ...rest }: ContextMenuSubContentProps): ReactElement;
+export declare namespace ContextMenuSubContent {
+    var displayName: string;
+}
+/** Type of the {@link ContextMenu} compound: the root callable plus its attached sub-components. */
+export type TContextMenuCompound = typeof ContextMenuRoot & {
+    Root: typeof ContextMenuRoot;
+    Trigger: typeof ContextMenuTrigger;
+    Content: typeof ContextMenuContent;
+    Item: typeof ContextMenuItem;
+    Separator: typeof ContextMenuSeparator;
+    Group: typeof ContextMenuGroup;
+    Label: typeof ContextMenuLabel;
+    CheckboxItem: typeof ContextMenuCheckboxItem;
+    ItemIndicator: typeof ContextMenuItemIndicator;
+    RadioGroup: typeof ContextMenuRadioGroup;
+    RadioItem: typeof ContextMenuRadioItem;
+    Sub: typeof ContextMenuSub;
+    SubTrigger: typeof ContextMenuSubTrigger;
+    SubContent: typeof ContextMenuSubContent;
+};
+/**
+ * Headless, accessible **ContextMenu** — a compound component implementing the
+ * [WAI-ARIA menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) opened
+ * by a right-click (or long-press) on its trigger, with submenus, checkbox and
+ * radio items, groups, labels and separators. Zero styles ship.
+ *
+ * `ContextMenu` is both callable (it is an alias of
+ * {@link ContextMenuRoot | `ContextMenu.Root`}) and carries its
+ * sub-components as static properties. Prefer the namespaced form in
+ * application code for readability and grep-ability:
+ *
+ * - {@link ContextMenuRoot | `ContextMenu.Root`} — open-state owner and direction provider (no DOM).
+ * - {@link ContextMenuTrigger | `ContextMenu.Trigger`} — the right-click target (`<span>`).
+ * - {@link ContextMenuContent | `ContextMenu.Content`} — the `role="menu"` popover panel.
+ * - {@link ContextMenuItem | `ContextMenu.Item`} — a `role="menuitem"` row.
+ * - {@link ContextMenuCheckboxItem | `ContextMenu.CheckboxItem`} — a tri-state `role="menuitemcheckbox"`.
+ * - {@link ContextMenuRadioGroup | `ContextMenu.RadioGroup`} — single-selection container.
+ * - {@link ContextMenuRadioItem | `ContextMenu.RadioItem`} — a `role="menuitemradio"` choice.
+ * - {@link ContextMenuItemIndicator | `ContextMenu.ItemIndicator`} — the checked-state mark.
+ * - {@link ContextMenuGroup | `ContextMenu.Group`} — a `role="group"` of related items.
+ * - {@link ContextMenuLabel | `ContextMenu.Label`} — a non-interactive group caption.
+ * - {@link ContextMenuSeparator | `ContextMenu.Separator`} — a `role="separator"` divider.
+ * - {@link ContextMenuSub | `ContextMenu.Sub`} — a submenu boundary (no DOM).
+ * - {@link ContextMenuSubTrigger | `ContextMenu.SubTrigger`} — opens a submenu.
+ * - {@link ContextMenuSubContent | `ContextMenu.SubContent`} — the submenu panel.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import { ContextMenu } from "@primitiv-ui/react";
+ *
+ * <ContextMenu.Root>
+ *   <ContextMenu.Trigger>
+ *     <div className="canvas">Right-click anywhere</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item onSelect={paste}>Paste</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Item disabled>Archive</ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu.Root>
+ * ```
+ *
+ * @see {@link ContextMenuRoot} for state modes and reading direction.
+ * @see {@link ContextMenuContent} for the popover, positioning, and keyboard model.
+ * @see {@link ContextMenuCheckboxItem} and {@link ContextMenuRadioGroup} for stateful items.
+ * @see {@link ContextMenuSub} for submenus.
+ */
+declare const ContextMenuCompound: TContextMenuCompound;
+export { ContextMenuCompound as ContextMenu };