# All files / menu MenuItemGroup.tsx

0% Statements 0/99
0% Branches 0/1
0% Functions 0/1
0% Lines 0/99

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

     "use client";
    import { cnb } from "cnbuilder";
    import type { ReactNode } from "react";
    import { forwardRef } from "react";
    import type { ListElement, ListProps } from "../list/List.js";
    import { List } from "../list/List.js";
    import { LabelRequiredForA11y } from "../types.js";
    import { useMenuConfiguration } from "./MenuConfigurationProvider.js";

    /** @remarks \@since 5.0.0 */
    export type MenuItemGroupProps = LabelRequiredForA11y<
      Omit<ListProps, "role">
    > & {
      children: ReactNode;
    };

    /**
     * **Client Component**
     *
     * If a menu or menubar contains more than one group of menuitemradio elements,
     * or if the menu contains one group and other, unrelated menu items, authors
     * SHOULD nest each set of related menuitemradio elements in an element using
     * the group role, and authors SHOULD delimit the group from other menu items
     * with an element using the separator role.
     *
     * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
     *
     * @example
     * Simple Example
     * ```tsx
     * import { ReactElement, useState } from "react";
     * import {
     *   DropdownMenu,
     *   MenuItemGroup,
     *   MenuItemRadio,
     *   MenuItemSeparator,
     *   MenuItemSwitch,
     * } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   const [value, setValue] = useState("value1");
     *   const [checked, setChecked] = useState(false);
     *
     *   return (
     *     <DropdownMenu id="dropdown-menu-id" buttonChildren="Button">
     *       <MenuItemSwitch
     *         id="switch-id"
     *         checked={checked}
     *         onCheckedChange={nextChecked => setChecked(nextChecked)}
     *       >
     *         Light mode
     *       </MenuItemSwitch>
     *       <MenuItemSeparator />
     *       <MenuItemGroup aria-label="My Group Label">
     *         <MenuItemRadio
     *           id="radio-1"
     *           checked={value === "value1"}
     *           onCheckedChange={() => setValue("value1")}
     *         >
     *           Radio 1
     *         </MenuItemRadio>
     *         <MenuItemRadio
     *           id="radio-2"
     *           checked={value === "value2"}
     *           onCheckedChange={() => setValue("value2")}
     *         >
     *           Radio 2
     *         </MenuItemRadio>
     *         <MenuItemRadio
     *           id="radio-3"
     *           checked={value === "value3"}
     *           onCheckedChange={() => setValue("value3")}
     *         >
     *           Radio 3
     *         </MenuItemRadio>
     *       </MenuItemGroup>
     *     </DropdownMenu>
     *   );
     * }
     * ```
     *
     * @remarks \@since 5.0.0
     */
    export const MenuItemGroup = forwardRef<ListElement, MenuItemGroupProps>(
      function MenuItemGroup({ children, className, ...props }, ref) {
        const { horizontal } = useMenuConfiguration(props);
        return (
          <List
            {...props}
            ref={ref}
            role="group"
            className={cnb("rmd-menu-item-group", className)}
            horizontal={horizontal}
          >
            {children}
          </List>
        );
      }
    );