# All files / src/form TextFieldContainer.tsx

100% Statements 93/93
33.33% Branches 1/3
100% Functions 1/1
100% Lines 93/93

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
    941x
    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
    23x
    23x
    23x
     "use client";
    import { forwardRef, type HTMLAttributes } from "react";
    import { getFormConfig } from "./formConfig.js";
    import { TextFieldAddon } from "./TextFieldAddon.js";
    import { textFieldContainer } from "./TextFieldContainerStyles.js";
    import { type TextFieldContainerOptions } from "./types.js";

    export interface TextFieldContainerProps
      extends HTMLAttributes<HTMLDivElement>,
        TextFieldContainerOptions {
      /**
       * Set this to `true` if there is a floating label with the `TextField` or
       * `TextArea`.
       *
       * @defaultValue `false`
       */
      label?: boolean;
    }

    /**
     * **Client Component**
     * This might be able to become a server component if I remove the useFormTheme hook
     *
     * This component is used to add the additional `TextField`, `TextArea`, and
     * `Select` theme styles.
     *
     * @internal
     */
    export const TextFieldContainer = forwardRef<
      HTMLDivElement,
      TextFieldContainerProps
    >(function TextFieldContainer(props, ref) {
      const {
        children,
        className,
        dense = false,
        error = false,
        label = false,
        active = false,
        inline = false,
        stretch = false,
        readOnly = false,
        disabled = false,
        leftAddon,
        leftAddonProps,
        disableLeftAddonStyles = false,
        rightAddon,
        rightAddonProps,
        disableRightAddonStyles = false,
        theme: propTheme,
        underlineDirection: propUnderlineDirection,
        ...remaining
      } = props;
      const theme = getFormConfig("theme", propTheme);
      const underlineDirection = getFormConfig(
        "underlineDirection",
        propUnderlineDirection
      );

      return (
        <div
          {...remaining}
          ref={ref}
          className={textFieldContainer({
            theme,
            dense,
            error,
            label,
            inline,
            active,
            stretch,
            readOnly,
            disabled,
            className,
            leftAddon: !!leftAddon && !disableLeftAddonStyles,
            rightAddon: !!rightAddon && !disableRightAddonStyles,
            underlineDirection,
          })}
        >
          <TextFieldAddon {...leftAddonProps} disabled={disableLeftAddonStyles}>
            {leftAddon}
          </TextFieldAddon>
          {children}
          <TextFieldAddon
            {...rightAddonProps}
            disabled={disableRightAddonStyles}
            after
          >
            {rightAddon}
          </TextFieldAddon>
        </div>
      );
    });