# All files / src/form textAreaStyles.ts

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

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

     import { cnb } from "cnbuilder";
    import { bem } from "../utils/bem.js";
    import {
      textField,
      type TextFieldClassNameOptions,
    } from "./textFieldStyles.js";
    import { type TextAreaResize } from "./useResizingTextArea.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-textarea-height"?: string | number;
        "--rmd-textarea-padding"?: string | number;
      }
    }

    const styles = bem("rmd-textarea");
    const containerStyles = bem("rmd-textarea-container");

    /**
     * @remarks \@since 6.0.0
     */
    export interface TextareaClassNameOptions extends TextFieldClassNameOptions {
      className?: string;

      /**
       * This should not be used externally and is only used for creating the hidden
       * textarea mask for the auto resizing behavior.
       *
       * @defaultValue `false`
       */
      mask?: boolean;

      /**
       * @see {@link TextAreaResize}
       * @defaultValue `"auto"`
       */
      resize?: TextAreaResize;

      /**
       * Set this to `true` if the textarea should display a scrollbar.
       *
       * @defaultValue `false`
       */
      scrollable?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function textArea(options: TextareaClassNameOptions = {}): string {
      const {
        className,
        mask,
        resize = "auto",
        scrollable,
        placeholderHidden,
      } = options;

      return cnb(
        textField({ placeholderHidden }),
        styles({
          rh: resize === "horizontal",
          rv: resize === "vertical",
          rn: resize === "auto" || resize === "none",
          mask,
          scrollable: scrollable || resize === "none",
        }),
        className
      );
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface TextareaContainerClassNameOptions {
      className?: string;
      height?: boolean;
      disabled?: boolean;
      animate?: boolean;
      underlineLabelled?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function textAreaContainer(
      options: TextareaContainerClassNameOptions = {}
    ): string {
      const { className, height, animate, disabled, underlineLabelled } = options;

      return cnb(
        containerStyles({
          height,
          animate,
          cursor: !disabled,
          "underline-labelled": underlineLabelled,
        }),
        className
      );
    }