# All files / src/sheet Sheet.tsx

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

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
    1051x
    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 { Dialog, type BaseDialogProps } from "../dialog/Dialog.js";
    import {
      type CSSTransitionClassNames,
      type TransitionTimeout,
    } from "../transition/types.js";
    import { type LabelRequiredForA11y } from "../types.js";
    import { sheet, type BaseSheetClassNameOptions } 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>
        );
      }
    );