# All files / sheet styles.ts

100% Statements 97/97
100% Branches 8/8
100% Functions 1/1
100% Lines 97/97

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
    981x
    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
    1x
    1x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
    81x
     import { cnb } from "cnbuilder";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-sheet");

    /**
     * The location that the sheet should be located within the viewport.
     */
    export type SheetPosition = "top" | "right" | "bottom" | "left";

    /**
     * The size to use for sheets that have been positioned left or right. The
     * default supported values are:
     *
     * - `"none"` - the size is based on content, but is still limited to the
     *   viewport width so that the horizontal scrolling will not occur within the
     *   page. No limits added to sizing.
     * - `"touch"` - the `width` is set to be the entire viewport width minus a
     *   touchable area and is normally recommended for mobile devices.
     * - `"static"` - the `width` is set to a static `16rem` and generally used for
     *   landscape tablets and desktops.
     * - `"media"` - automatically switches between "touch" and "static" based on
     *   css media queries. (this is the default)
     */
    export type SheetHorizontalSize = "none" | "media" | "touch" | "static";

    /**
     * The size to use for sheets that have been positioned top or bottom. The
     * supported sizes are:
     *
     * - `"none"` - the size is based on content and is limited to the viewport
     *   height
     * - `"touch"` - the size is based on content and is limited to the viewport
     *   height minus a small touchable area
     * - `"recommended"` - the material design recommended sizing that forces a
     *   `max-height` of 50vh and `min-height` of 3.5rem
     */
    export type SheetVerticalSize = "none" | "touch" | "recommended";

    /** @remarks \@since 6.0.0 */
    export interface BaseSheetClassNameOptions {
      className?: string;

      /**
       * @defaultValue `"left"`
       */
      position?: SheetPosition;

      /**
       * @defaultValue `"media"`
       */
      horizontalSize?: SheetHorizontalSize;

      /**
       * @defaultValue `"recommended"`
       */
      verticalSize?: SheetVerticalSize;
    }

    /**
     * @remarks \@since 6.0.0
     * @internal
     */
    export interface SheetClassNameOptions extends BaseSheetClassNameOptions {
      offscreen?: boolean;
      disableOverlay?: boolean;
    }

    /** @remarks \@since 6.0.0 */
    export function sheet(options: SheetClassNameOptions): string {
      const {
        position = "left",
        horizontalSize = "media",
        verticalSize = "recommended",
        offscreen = false,
        disableOverlay,
        className,
      } = options;
      const horizontal = position === "left" || position === "right";

      return cnb(
        styles({
          horizontal,
          vertical: !horizontal,
          raised: !disableOverlay,
          offscreen,
          [position]: true,
          "media-width": horizontal && horizontalSize === "media",
          "touch-width": horizontal && horizontalSize === "touch",
          "static-width": horizontal && horizontalSize === "static",
          "viewport-height": !horizontal && verticalSize === "none",
          "touchable-height": !horizontal && verticalSize === "touch",
          "recommended-height": !horizontal && verticalSize === "recommended",
        }),
        className
      );
    }