# All files / src/list ListItemText.tsx

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

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
    651x
    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
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    894x
    1x
     import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { type PropsWithRef } from "../types.js";
    import { listItemText } from "./listItemStyles.js";

    /**
     * @internal
     */
    export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
      secondaryText?: ReactNode;
      secondaryTextProps?: PropsWithRef<
        HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
      >;

      /** @defaultValue `false` */
      secondaryTextClamped?: boolean;
      secondaryTextClassName?: string;
    }

    /**
     * **Server Component**
     *
     * This is mostly an internal component that can conditionally render secondary
     * text within list items.
     *
     * @internal
     */
    export const ListItemText = forwardRef<HTMLSpanElement, ListItemTextProps>(
      function ListItemText(props, ref) {
        const {
          className,
          secondaryText,
          secondaryTextProps,
          secondaryTextClamped = false,
          secondaryTextClassName,
          children,
          ...remaining
        } = props;

        return (
          <span
            {...remaining}
            ref={ref}
            className={listItemText({
              className,
            })}
          >
            {children}
            {secondaryText && (
              <span
                {...secondaryTextProps}
                className={listItemText({
                  clamped: secondaryTextClamped,
                  className: secondaryTextClassName,
                  secondary: true,
                })}
              >
                {secondaryText}
              </span>
            )}
          </span>
        );
      }
    );