# All files / form SelectedOption.tsx

100% Statements 55/55
100% Branches 7/7
100% Functions 1/1
100% Lines 55/55

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
    561x
    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
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    45x
    45x
    45x
    45x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
    87x
     import { cnb } from "cnbuilder";
    import { type ReactElement, type ReactNode } from "react";
    import { Box, type BoxProps } from "../box/Box.js";
    import { cssUtils } from "../cssUtils.js";
    import { type OptionProps } from "./Option.js";
    import { textField } from "./textFieldStyles.js";

    /**
     * @remarks \@since 6.0.0
     * @internal
     */
    export interface SelectedOptionProps extends BoxProps {
      option: OptionProps | undefined;
      placeholder?: ReactNode;
      disableAddon: boolean;
    }

    /**
     * **Server Component**
     *
     * This component is used to render the current option.
     *
     * @remarks \@since 6.0.0
     * @internal
     */
    export function SelectedOption(props: SelectedOptionProps): ReactElement {
      const {
        disableAddon,
        option,
        className,
        disablePadding = true,
        placeholder,
        ...remaining
      } = props;

      let children = option?.children || placeholder;
      // when the children are a string or number, wrap it in additional span so
      // that overflow can be ellipsis-ed
      if (typeof children === "string" || typeof children === "number") {
        children = (
          <span className={cssUtils({ textOverflow: "ellipsis" })}>{children}</span>
        );
      }

      return (
        <Box
          {...remaining}
          className={cnb("rmd-selected-option", textField(), className)}
          disablePadding={disablePadding}
        >
          {!disableAddon && option?.leftAddon}
          {children}
        </Box>
      );
    }