# All files / src/layout Main.tsx

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

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
    951x
    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
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    97x
    1x
     "use client";
    import {
      forwardRef,
      type ElementType,
      type HTMLAttributes,
      type ReactNode,
      type Ref,
    } from "react";
    import { useEnsuredId } from "../useEnsuredId.js";
    import { main, type MainClassNameOptions } from "./mainStyles.js";
    import { useMainTabIndex } from "./useMainTabIndex.js";

    /**
     * @remarks \@since 6.0.0
     */
    export type CustomMainElement = ElementType<
      HTMLAttributes<HTMLElement> & {
        ref: Ref<HTMLElement>;
        className?: string;
        tabIndex?: number;
      }
    >;

    /**
     * @remarks \@since 6.0.0
     */
    export interface MainProps
      extends HTMLAttributes<HTMLElement>,
        MainClassNameOptions {
      /**
       * @defaultValue `"main"`
       */
      as?: CustomMainElement;
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * This component is really only used to dynamically set the `tabIndex` to `-1`
     * while using a keyboard for the `SkipToMainContent` component's focus behavior
     * to work correctly. If you don't need that functionality, use the {@link main}
     * style utility instead.
     *
     * @example
     * Styles Only
     * ```tsx
     * import { main as mainStyles } from "@react-md/core":
     *
     * function MyCustomMainElement({ children }) {
     *   return (
     *     <main
     *       className={mainStyles({
     *         navOffset: true,
     *         appBarOffset: true,
     *       })}
     *     >
     *       {children}
     *     </main>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0 Renamed from `LayoutMain` removed a lot of
     * functionality to keep this component simple.
     */
    export const Main = forwardRef<HTMLElement, MainProps>(
      function Main(props, ref) {
        const {
          as: Component = "main",
          id: propId,
          className,
          children,
          tabIndex: propTabIndex,
          navOffset,
          appBarOffset,
          ...remaining
        } = props;
        const id = useEnsuredId(propId, "main");
        const tabIndex = useMainTabIndex(propTabIndex);

        return (
          <Component
            {...remaining}
            id={id}
            ref={ref}
            className={main({ navOffset, appBarOffset, className })}
            tabIndex={tabIndex}
          >
            {children}
          </Component>
        );
      }
    );