# All files / src/list ListSubheader.tsx

100% Statements 78/78
100% Branches 2/2
100% Functions 2/2
100% Lines 78/78

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
    791x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    7x
    7x
    7x
    7x
    7x
    7x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    7x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { type PropsWithRef } from "../types.js";
    import { bem } from "../utils/bem.js";
    import { ListItemText } from "./ListItemText.js";

    const styles = bem("rmd-list-subheader");

    /** @remarks \@since 6.0.0 */
    export interface ListSubheaderClassNameOptions {
      className?: string;

      /**
       * Boolean if the subheader should be inset to match the `ListItem` text
       * keyline.
       *
       * @defaultValue `false`
       */
      inset?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function listSubheader(
      options: ListSubheaderClassNameOptions = {}
    ): string {
      const { inset = false, className } = options;

      return cnb(styles({ inset }), className);
    }

    export interface ListSubheaderProps
      extends HTMLAttributes<HTMLLIElement>,
        ListSubheaderClassNameOptions {
      /**
       * @defaultValue `"presentation"`
       */
      role?: HTMLAttributes<HTMLLIElement>["role"];

      /**
       * @remarks \@since 6.0.0
       */
      textProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    }

    /**
     * **Server Component**
     *
     * The `ListSubheader` is a wrapper for the `<li>` element to apply subheader
     * typography styles and {@link ListItemText} layout.
     */
    export const ListSubheader = forwardRef<HTMLLIElement, ListSubheaderProps>(
      function ListSubheader(props, ref) {
        const {
          role = "presentation",
          inset = false,
          className,
          children,
          textProps,
          ...remaining
        } = props;

        return (
          <li
            {...remaining}
            ref={ref}
            role={role}
            className={listSubheader({
              inset,
              className,
            })}
          >
            <ListItemText {...textProps}>{children}</ListItemText>
          </li>
        );
      }
    );