# All files / src/list List.tsx

100% Statements 135/135
100% Branches 4/4
100% Functions 2/2
100% Lines 135/135

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
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    1361x
    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
    587x
    587x
    587x
    587x
    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
    1x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    586x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef, type HTMLAttributes } from "react";
    import { bem } from "../utils/bem.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-list-padding-h"?: string | number;
        "--rmd-list-padding-v"?: string | number;
      }
    }

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

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

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

      /** @defaultValue `false` */
      horizontal?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function list(options: ListClassNameOptions = {}): string {
      const { dense = false, horizontal = false, className } = options;

      return cnb(styles({ dense, horizontal }), className);
    }

    export type ListElement = HTMLUListElement | HTMLOListElement;

    export interface ListProps extends HTMLAttributes<ListElement> {
      /**
       * @defaultValue `"none"`
       */
      role?: HTMLAttributes<ListElement>["role"];

      /**
       * Set to `true` to decrease the amount of padding and font size within the
       * list.
       *
       * @defaultValue `false`
       */
      dense?: boolean;

      /**
       * Set this to `true` to render as `<ol>` instead of `<ul>` when the children
       * are in a specific order. For example: steps within a recipe.
       *
       * @defaultValue `false`
       */
      ordered?: boolean;

      /**
       * Set this to `true` to render horizontally instead of vertically.
       *
       * @defaultValue `false`
       */
      horizontal?: boolean;
    }

    /**
     * **Server Component**
     *
     * The `List` component is used to render a collection of clickable actions
     * vertically or horizontally and does not include the default `ol`/`ul` styles.
     *
     * @example
     * Simple Example
     * ```tsx
     * import { List, ListItem, ListItemLink } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <List>
     *       <ListItem
     *         onClick={() => {
     *           // do something
     *         }}
     *       >
     *         Item 1
     *       </ListItem>
     *       <ListItem
     *         onClick={() => {
     *           // do something
     *         }}
     *       >
     *         Item 2
     *       </ListItem>
     *       <ListItem
     *         onClick={() => {
     *           // do something
     *         }}
     *       >
     *         Item 3
     *       </ListItem>
     *       <ListItemLink href="/some-route">Link Example</ListItemLink>
     *     </List>
     *   );
     * }
     * ```
     */
    export const List = forwardRef<ListElement, ListProps>(
      function List(props, ref) {
        const {
          className,
          children,
          role = "none",
          dense = false,
          ordered = false,
          horizontal = false,
          ...remaining
        } = props;
        const Component = (ordered ? "ol" : "ul") as "ul";
        return (
          <Component
            {...remaining}
            ref={ref}
            role={role}
            className={list({
              dense,
              horizontal,
              className,
            })}
          >
            {children}
          </Component>
        );
      }
    );