# All files / src/MultiSelect MultiSelect.styles.tsx

100% Statements 20/20
85% Branches 17/20
100% Functions 2/2
100% Lines 20/20

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
    112
    113
    114
    115
    116
    1179x
    9x

    9x
    9x
    9x
    9x

    9x

    9x

    9x

    87x
    87x

    9x

    9x

    9x

    9x

    9x

    9x

    9x

    87x
    87x

     import styled, { css } from 'styled-components'
    import {
      StyledSelectArrow,
      StyledSelectArrowContainer,
      StyledSelectButton,
      StyledSelectClearIcon,
      StyledSelectMenu,
    } from '../Select/Select.styles'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { getFocus } from '../_styles/mixins'
    import { spacing } from '../_styles/spacing'

    export const StyledMultiSelectValues = styled.div`
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2px;
      margin-left: ${spacing.md}px;
      margin-right: ${spacing.xs}px;
      margin-top: 2px;
      min-width: 0;
      width: 100%;
    `

    export const StyledMultiSelectToken = styled.div`
      margin-bottom: 2px;
      margin-right: ${spacing.xs}px;
      margin-top: 2px;
      flex: 0 1 auto;

      > div {
        max-width: 178px;
        width: 100%;
      }
    `

    export const StyledMultiSelectSearchInput = styled.input<{
      $isNavigatingTokens?: boolean
    }>`
      background-color: transparent;
      border-width: 0;
      font-family: inherit;
      padding: 0;
      height: 24px;
      width: 100%;

      ${getTypographyIntent('body')}

      ${({ $isNavigatingTokens }) =>
        $isNavigatingTokens &&
        css`
          color: transparent;
        `}

      &::-ms-clear {
        display: none;
      }

      &:focus {
        box-shadow: none;
        outline: none;
      }

      &::placeholder {
        color: ${colors.gray45};
      }
    `

    export const StyledMultiSelectSearch = styled.div`
      margin-bottom: 2px;
      margin-right: ${spacing.xs}px;
      margin-top: 2px;
      flex: 1;
      max-width: 100%;
      min-width: 24px;
    `

    export const StyledMultiSelectSearchIcon = styled.div`
      align-items: center;
      align-self: flex-start;
      display: flex;
      height: 34px;
      justify-content: flex-end;
      margin-left: ${spacing.xs}px;
      margin-right: ${spacing.md}px;
      min-width: 40px;
      width: 40px;
    `

    export const StyledMultiSelectClearIcon = StyledSelectClearIcon

    export const StyledMultiSelectArrowContainer = StyledSelectArrowContainer

    export const StyledMultiSelectArrow = StyledSelectArrow

    export const StyledMultiSelectMenu = StyledSelectMenu

    export const StyledMultiSelectButton = styled(StyledSelectButton)<{
      $emptyValue: boolean
    }>`
      height: auto;
      padding: 0;
      white-space: normal;

      &:focus-within {
        ${getFocus()}
      }

      ${({ $emptyValue }) =>
        $emptyValue &&
        css`
          ${StyledMultiSelectSearchInput} {
            cursor: pointer;
          }
        `}
    `