# All files / src/main-layout Main.tsx

0% Statements 0/71
0% Branches 0/1
0% Functions 0/1
0% Lines 0/71

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

     import { cnb } from "cnbuilder";
    import type { ElementType, HTMLAttributes, ReactNode, Ref } from "react";
    import { forwardRef } from "react";
    import { useUserInteractionMode } from "../interaction";
    import { DEFAULT_SHEET_TIMEOUT } from "../sheet";
    import type { CSSTransitionClassNames, TransitionTimeout } from "../transition";
    import { useCSSTransition } from "../transition";
    import { bem } from "../utils";
    import { useMainLayout } from "./useMainLayout";

    const styles = bem("rmd-layout-main");

    export const DEFAULT_MAIN_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
      enter: "rmd-layout-main--enter",
      enterActive: "rmd-layout-main--nav-offset",
      enterDone: "rmd-layout-main--nav-offset",
      exit: "rmd-layout-main--exit",
    };

    export type CustomMainElement = ElementType<
      HTMLAttributes<HTMLElement> & { ref: Ref<HTMLElement>; className?: string }
    >;

    export interface MainProps extends HTMLAttributes<HTMLElement> {
      as?: CustomMainElement;
      id: string;
      children: ReactNode;
      timeout?: TransitionTimeout;
      classNames?: CSSTransitionClassNames;
    }

    export const Main = forwardRef<HTMLElement, MainProps>(function Main(
      props,
      ref
    ) {
      const {
        as: Component = "main",
        className,
        children,
        tabIndex: propTabIndex,
        timeout = DEFAULT_SHEET_TIMEOUT,
        classNames = DEFAULT_MAIN_CLASSNAMES,
        ...remaining
      } = props;

      const { variant, expanded, disablePersistentTransition } = useMainLayout();
      const keyboard = useUserInteractionMode() === "keyboard";
      let tabIndex = propTabIndex;
      if (keyboard && typeof propTabIndex === "undefined") {
        tabIndex = -1;
      }

      const { elementProps } = useCSSTransition({
        nodeRef: ref,
        timeout: disablePersistentTransition.current ? 0 : timeout,
        classNames,
        className: cnb(
          styles({
            offset: variant !== "static-app-bar",
          }),
          className
        ),
        transitionIn: expanded,
      });

      return (
        <Component {...remaining} {...elementProps} tabIndex={tabIndex}>
          {children}
        </Component>
      );
    });