# All files / menu MenuItemCircularProgress.tsx

100% Statements 116/116
100% Branches 1/1
100% Functions 1/1
100% Lines 116/116

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
    1171x
    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
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { ListItemChildren } from "../list/ListItemChildren.js";
    import { listItem } from "../list/listItemStyles.js";
    import {
      type ListItemChildrenProps,
      type ListItemHeight,
    } from "../list/types.js";
    import {
      CircularProgress,
      type CircularProgressProps,
    } from "../progress/CircularProgress.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface MenuItemCircularProgressProps extends CircularProgressProps {
      /** @defaultValue `"Loading"` */
      "aria-label"?: string;

      /** @defaultValue `"none"` */
      role?: string;

      /** @defaultValue `true` */
      dense?: boolean;

      liProps?: HTMLAttributes<HTMLLIElement>;
      height?: ListItemHeight;
      leftAddon?: ReactNode;
      rightAddon?: ReactNode;
      listItemChildrenProps?: ListItemChildrenProps;
    }

    /**
     * @example
     * Simple Example
     * ```tsx
     * "use client";
     * import {
     *   DropdownMenu,
     *   MenuItem,
     *   MenuItemCircularProgress,
     *   useAsyncAction,
     * } from "@react-md/core";
     *
     * function Example() {
     *   const { handleAsync, pending } = useAsyncAction();
     *   const [visible, setVisible] = useState(false);
     *
     *   return (
     *     <DropdownMenu buttonChildren="Options" visible={visible} setVisible={setVisible}>
     *       {pending && <MenuItemCircularProgress />}
     *       <MenuItem
     *         onClick={handleAsync(async (event) => {
     *           // prevent menu from closing until action completes
     *           event.stopPropagation()
     *
     *           // do something async
     *           await ...
     *
     *           // close menu once completed
     *           setVisible(false)
     *         })}
     *       >
     *         Some Action
     *       </MenuItem>
     *     </DropdownMenu>
     *   )
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export const MenuItemCircularProgress = forwardRef<
      HTMLLIElement,
      MenuItemCircularProgressProps
    >(function MenuItemCircularProgress(props, ref) {
      const {
        "aria-label": propAriaLabel,
        "aria-labelledby": ariaLabelledBy,
        role = "none",
        className,
        height,
        leftAddon,
        rightAddon,
        liProps,
        listItemChildrenProps,
        ...remaining
      } = props;
      let ariaLabel = propAriaLabel;
      if (!ariaLabel && !ariaLabelledBy) {
        ariaLabel = "Loading";
      }

      return (
        <li
          {...liProps}
          ref={ref}
          role={role}
          className={cnb(listItem({ height, className }), liProps?.className)}
        >
          <ListItemChildren
            {...listItemChildrenProps}
            leftAddon={leftAddon}
            rightAddon={rightAddon}
          >
            <CircularProgress
              aria-label={ariaLabel as string}
              aria-labelledby={ariaLabelledBy}
              dense
              {...remaining}
            />
          </ListItemChildren>
        </li>
      );
    });