# All files / src/form TextFieldContainerStyles.ts

97.29% Statements 108/111
7.14% Branches 1/14
100% Functions 1/1
97.29% Lines 108/111

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
    107
    108
    109
    110
    111
    1121x
    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
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x

    23x

    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
    23x
     import { cnb } from "cnbuilder";
    import { cssUtils, type TextColor, type ThemeColor } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";
    import { type FormComponentStates, type FormThemeOptions } from "./types.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-text-field-height"?: string | number;
        "--rmd-text-field-padding-left"?: string | number;
        "--rmd-text-field-padding-right"?: string | number;
        "--rmd-text-field-padding-top"?: string | number;
        "--rmd-text-field-border-color"?: string;
        "--rmd-text-field-hover-border-color"?: string;
        "--rmd-text-field-filled-color"?: string;
        "--rmd-form-addon-top"?: string | number;
        "--rmd-form-addon-margin-top"?: string | number;
      }
    }

    const styles = bem("rmd-text-field-container");

    /** @remarks \@since 6.0.0 */
    export interface TextFieldContainerClassNameOptions
      extends FormThemeOptions,
        FormComponentStates {
      className?: string;

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

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

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

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

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

      /** @defaultValue `false` */
      rightAddon?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function textFieldContainer(
      options: TextFieldContainerClassNameOptions = {}
    ): string {
      const {
        className,
        theme = "outline",
        dense = false,
        error = false,
        label = false,
        active = false,
        inline = false,
        stretch = false,
        readOnly = false,
        disabled = false,
        leftAddon = false,
        rightAddon = false,
        underlineDirection = "left",
      } = options;
      const underline = theme === "underline";
      const outline = theme === "outline";
      const filled = theme === "filled";
      const isUnderlined = underline || filled;
      const isOutlineActive = outline && active;

      let textColor: ThemeColor | TextColor | undefined;
      if (disabled) {
        textColor = "text-disabled";
      } else if (error) {
        textColor = "error";
      }

      return cnb(
        styles({
          error,
          inline,
          stretch,
          filled,
          outline,
          disabled: disabled || readOnly,
          hoverable: !disabled && !isOutlineActive,
          label: label && !dense,
          dense: !label && dense,
          "dense-label": label && dense,
          "dense-placeholder": !label && dense && isUnderlined,
          "outline-active": isOutlineActive,
          "outline-error": outline && error,
          "outline-left": outline && leftAddon,
          "outline-right": outline && rightAddon,
          underline: isUnderlined,
          "underline-placeholder": isUnderlined && !label,
          "underline-placeholder-only":
            isUnderlined && !label && !leftAddon && !rightAddon,
          "underline-labelled": isUnderlined && label,
          "underline-active": isUnderlined && active,
          [`underline-${underlineDirection}`]: isUnderlined,
          "underline-left-addon": isUnderlined && leftAddon,
          "underline-right-addon": isUnderlined && rightAddon,
        }),
        cssUtils({ textColor }),
        className
      );
    }