# All files / src/app-bar AppBarTitle.tsx

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

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
    1211x
    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
    95x
    95x
    95x
    95x
    95x
    95x
    95x
    95x
    95x
    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
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    94x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";
    import { type TextOverflow } from "../cssUtils.js";
    import {
      Typography,
      type TypographyProps,
      type TypographyType,
    } 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;
    }

    /**
     * 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" } = options;
      return cnb(
        styles({
          keyline: keyline == "list",
          "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;

      /**
       * @defaultValue `"ellipsis"`
       */
      textOverflow?: TextOverflow;
    }

    /**
     * **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",
          children,
          className,
          textOverflow = "ellipsis",
          ...remaining
        } = props;
        return (
          <Typography
            {...remaining}
            ref={ref}
            type={type}
            className={appBarTitle({
              keyline,
              className,
            })}
            textOverflow={textOverflow}
          >
            {children}
          </Typography>
        );
      }
    );