# All files / sheet Sheet.tsx

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

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
    1071x
    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
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    35x
    1x
     "use client";
    import { forwardRef } from "react";
    import type { BaseDialogProps } from "../dialog/Dialog.js";
    import { Dialog } from "../dialog/Dialog.js";
    import type {
      CSSTransitionClassNames,
      TransitionTimeout,
    } from "../transition/types.js";
    import { LabelRequiredForA11y } from "../types.js";
    import type { BaseSheetClassNameOptions } from "./styles.js";
    import { sheet } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-sheet-height"?: string | number;
        "--rmd-sheet-width"?: string | number;
        "--rmd-sheet-max-height"?: string | number;
        "--rmd-sheet-touch-width"?: string | number;
        "--rmd-sheet-touch-max-height"?: string | number;
        "--rmd-sheet-static-width"?: string | number;
        "--rmd-sheet-transform-offscreen"?: string | number;
        "--rmd-sheet-z-index"?: number;
      }
    }

    export const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {
      enter: 200,
      exit: 150,
    };

    export const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {
      appear: "rmd-sheet--offscreen",
      appearActive: "rmd-sheet--enter rmd-sheet--visible",
      enter: "rmd-sheet--offscreen",
      enterActive: "rmd-sheet--enter rmd-sheet--visible",
      exit: "rmd-sheet--exit",
      exitActive: "rmd-sheet--offscreen",
      exitDone: "rmd-sheet--offscreen rmd-sheet--hidden",
    };

    export type SheetDialogProps = Omit<BaseDialogProps, "role" | "type" | "modal">;

    export interface BaseSheetProps
      extends SheetDialogProps,
        BaseSheetClassNameOptions {
      /**
       * @defaultValue `"dialog"`
       */
      role?: "dialog" | "menu" | "none";

      /**
       * @defaultValue `true`
       * @see {@link SheetDialogProps.exitedHidden}
       * @remarks \@since 6.0.0
       */
      exitedHidden?: boolean;
    }

    export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;

    /**
     * **Client Component**
     *
     */
    export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
      function Sheet(props, ref) {
        const {
          role = "dialog",
          className,
          position = "left",
          horizontalSize = "media",
          verticalSize = "recommended",
          timeout = DEFAULT_SHEET_TIMEOUT,
          classNames = DEFAULT_SHEET_CLASSNAMES,
          visible,
          temporary = true,
          exitedHidden = true,
          children,
          ...remaining
        } = props;
        const { disableOverlay } = props;

        return (
          <Dialog
            {...remaining}
            ref={ref}
            role={role}
            type="custom"
            timeout={timeout}
            classNames={classNames}
            visible={visible}
            temporary={temporary}
            exitedHidden={exitedHidden}
            className={sheet({
              position,
              horizontalSize,
              verticalSize,
              disableOverlay,
              className,
            })}
          >
            {children}
          </Dialog>
        );
      }
    );