# All files / list ListSubheader.tsx

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

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
    801x
    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
    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 type { HTMLAttributes } from "react";
    import { forwardRef } from "react";
    import { 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>
        );
      }
    );