# All files / app-bar AppBarTitle.tsx

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

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
    1231x
    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
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    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
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    37x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import type {
      TypographyProps,
      TypographyType,
    } from "../typography/Typography.js";
    import { Typography } from "../typography/Typography.js";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-app-bar-title");

    /**
     * - `"small"` - the first character in the title will be `1rem` (`$keyline`)
     *   from the edge of the app bar horizontally
     * - `"nav"` - this should be set when there is a nav button before the title so
     *   that the first character in the title will be `4.5rem` (`title-keyline`)
     * - `"list"` - this should be used when the title should align with the list
     *   item keyline and there is no nav icon before.
     *
     * @remarks \@since 6.0.0
     */
    export type AppBarTitleKeyline = "small" | "nav" | "list";

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

      /**
       * @defaultValue `"small"`
       * @see {@link AppBarTitleKeyline}
       */
      keyline?: AppBarTitleKeyline;

      /**
       * Set this to `true` if the children should be allowed to line wrap.
       *
       * @defaultValue `false`
       */
      lineWrap?: boolean;
    }

    /**
     * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
     * if using typescript.
     *
     * @remarks \@since 6.0.0
     */
    export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
      const { className, keyline = "small", lineWrap = false } = options;
      return cnb(
        styles({
          keyline: keyline == "list",
          "no-wrap": !lineWrap,
          "nav-keyline": keyline === "nav",
        }),
        className
      );
    }

    /**
     * @remarks \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the
     * `AppBarTitle` does not line wrap by default.
     */
    export interface AppBarTitleProps
      extends TypographyProps,
        AppBarTitleClassNameOptions {
      /** @defaultValue `"headline-6"` */
      type?: TypographyType;
    }

    /**
     * **Server Component**
     *
     * @example
     * Updating the Keyline
     * ```tsx
     * import { AppBar, AppBarTitle } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <AppBar>
     *       <AppBarTitle keyline="nav">
     *         Offset as if there was a nav button to the left
     *       </AppBarTitle>
     *     </AppBar>
     *   );
     * }
     * ```
     *
     * @remarks
     * \@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`
     * does not line wrap by default.
     * \@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type
     * union of different keylines: {@link AppBarTitleKeyline}
     */
    export const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(
      function AppBarTitle(props, ref) {
        const {
          type = "headline-6",
          keyline = "small",
          lineWrap = false,
          children,
          className,
          ...remaining
        } = props;
        return (
          <Typography
            {...remaining}
            ref={ref}
            type={type}
            className={appBarTitle({
              keyline,
              lineWrap,
              className,
            })}
          >
            {children}
          </Typography>
        );
      }
    );