# All files / menu useContextMenu.ts

97.77% Statements 132/135
75% Branches 3/4
100% Functions 3/3
97.77% Lines 132/135

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    1361x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x

    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    1x
    1x

    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    2x
    2x
     "use client";
    import type { MouseEvent, RefObject } from "react";
    import { useCallback, useRef, useState } from "react";
    import { BELOW_INNER_LEFT_ANCHOR } from "../positioning/constants.js";
    import type { InitialCoords, PositionAnchor } from "../positioning/types.js";
    import type { UseStateObject } from "../types.js";

    /** @remarks \@since 6.0.0 */
    export interface ContextMenuProps extends InitialCoords {
      "aria-label": string;
      anchor: PositionAnchor;
      fixedTo: RefObject<HTMLElement>;
      visible: boolean;
      preventScroll: boolean;
      onRequestClose(): void;
    }

    /**
     * @remarks
     * \@since 5.0.0
     * \@since 6.0.0  Dropped most options since they are no longer required for the
     * context menu to work. Apply any `Menu` props directly to the `Menu` component
     * instead.
     */
    export interface ContextMenuHookOptions {
      /**
       * @defaultValue `BELOW_INNER_LEFT_ANCHOR`
       * @see {@link BELOW_INNER_LEFT_ANCHOR}
       */
      anchor?: PositionAnchor;

      /**
       * @defaultValue `"Context Menu"`
       */
      menuLabel?: string;

      /**
       * @defaultValue `true`
       */
      preventScroll?: boolean;
      onContextMenu?<E extends HTMLElement>(event: MouseEvent<E>): void;
    }

    /**
     * @remarks
     * \@since 5.0.0
     * \@since 6.0.0 Renamed from `ContextMenuHookReturnValue` to
     * `ContextMenuImplementation` and dropped the `menuRef` and `menuNodeRef`
     * fields.
     */
    export interface ContextMenuImplementation
      extends UseStateObject<"visible", boolean> {
      menuProps: ContextMenuProps;
      onContextMenu<E extends HTMLElement>(event: MouseEvent<E>): void;
    }

    const noop = (): void => {
      // do nothing
    };

    /**
     * This hook controls the visibility and positioning for a context menu.
     *
     * @example
     * Simple Example
     * ```tsx
     * import type { ReactElement } from "react";
     * import [ Menu, MenuItem, useContextMenu ] from "@react-md/core":
     *
     * function Example(): ReactElement {
     *   const { menuProps, onContextMenu } = useContextMenu();
     *
     *   return (
     *     <>
     *       <textarea onContextMenu={onContextMenu} />
     *       <Menu {...menuProps}>
     *         <MenuItem>Cut</MenuItem>
     *         <MenuItem>Copy</MenuItem>
     *         <MenuItem>Paste</MenuItem>
     *         <MenuItem>Undo</MenuItem>
     *       </Menu>
     *     </>
     *   );
     * }
     * ```
     *
     * @remarks
     * \@since 5.0.0
     * \@since 6.0.0 No longer supports overriding most of the `Menu` props. The
     * props must be passed to the `Menu` component manually.
     */
    export function useContextMenu(
      options: ContextMenuHookOptions = {}
    ): ContextMenuImplementation {
      const {
        anchor = BELOW_INNER_LEFT_ANCHOR,
        menuLabel = "Context Menu",
        onContextMenu = noop,
        preventScroll = true,
      } = options;
      const [coords, setCoords] = useState<InitialCoords>({});
      const [visible, setVisible] = useState(false);
      const fixedTo = useRef<HTMLElement>(null);
      const onRequestClose = useCallback(() => {
        setVisible(false);
      }, []);

      return {
        visible,
        setVisible,
        menuProps: {
          "aria-label": menuLabel,
          anchor,
          ...coords,
          fixedTo,
          visible,
          onRequestClose,
          preventScroll,
        },
        onContextMenu(event) {
          onContextMenu(event);
          if (event.isPropagationStopped()) {
            return;
          }

          event.preventDefault();
          event.stopPropagation();
          setCoords({
            initialX: event.clientX,
            initialY: event.clientY,
          });
          setVisible(true);
        },
      };
    }