# All files / src/overlay overlayStyles.ts

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

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
    861x
    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
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    221x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
     import { cnb } from "cnbuilder";
    import {
      box,
      type BoxAlignItems,
      type BoxJustifyContent,
    } from "../box/styles.js";
    import {
      type CSSTransitionClassNamesObject,
      type TransitionTimeout,
    } from "../transition/types.js";
    import { bem } from "../utils/bem.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-overlay-background-color"?: string;
        "--rmd-overlay-z-index"?: number;
      }
    }

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

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

      visible: boolean;

      /** @defaultValue `false` */
      active?: boolean;

      /** @defaultValue `false` */
      clickable?: boolean;

      /** @defaultValue `false` */
      absolute?: boolean;
      /** @defaultValue `"center"` */
      align?: BoxAlignItems;

      /** @defaultValue `"center"` */
      justify?: BoxJustifyContent;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function overlay(
      options: OverlayClassNameOptions & { active?: boolean }
    ): string {
      const {
        visible,
        active,
        absolute = false,
        clickable = false,
        align = "center",
        justify = "center",
        className,
      } = options;

      return cnb(
        styles({
          active,
          visible,
          clickable,
          absolute,
        }),
        box({
          align,
          justify,
          disablePadding: true,
        }),
        className
      );
    }

    /** @remarks \@since 2.4.0 */
    export const DEFAULT_OVERLAY_TIMEOUT: TransitionTimeout = 150;

    /** @remarks \@since 2.4.0 */
    export const DEFAULT_OVERLAY_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =
      {
        appearActive: "rmd-overlay--active",
        appearDone: "rmd-overlay--active",
        enterActive: "rmd-overlay--active",
        enterDone: "rmd-overlay--active",
      };