# All files / layout Main.tsx

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

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