# All files / src/Box Box.tsx

90% Statements 45/50
66.66% Branches 12/18
100% Functions 2/2
90% Lines 45/50

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
    11465x

    65x

    1104x
    739x

    365x

    365x

    365x

    365x
    365x

    365x

    365x

    365x

    365x

    365x

    65x

    1105x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x
    1104x

    1104x

    1104x

    65x
     import * as React from 'react'
    import { DivAttributes } from '../_utils/types'
    import { StyledBox } from './Box.styles'
    import { BoxProps, Display, FlexDirection } from './Box.types'

    // TODO remove this after we decommission the LegacyDisplay type
    function getLegacyDisplayAndDirection(d?: Display) {
      if (!d) {
        return {}
      }

      let display = d

      let direction: FlexDirection | undefined = display.includes('flex')
        ? 'row'
        : undefined

      Iif (d.includes('flex-inline') || d.includes('inline-flex')) {
        display = 'inline-flex'
      } else if (d.includes('flex')) {
        display = 'flex'
      }

      Iif (d.includes('column-reverse')) {
        direction = 'column-reverse'
      } else Iif (d.includes('column')) {
        direction = 'column'
      }

      Iif (d.includes('row-reverse')) {
        direction = 'row-reverse'
      } else Iif (d.includes('row')) {
        direction = 'row'
      }

      return {
        display,
        direction,
      }
    }

    export const Box = React.forwardRef<HTMLDivElement, DivAttributes & BoxProps>(
      function Box(
        {
          as,
          alignContent,
          alignItems,
          alignSelf,
          children,
          display,
          flex,
          flexBasis,
          flexDirection,
          flexGrow,
          flexShrink,
          flexWrap,
          gap,
          justifyContent,
          margin,
          marginBottom,
          marginLeft,
          marginRight,
          marginTop,
          order,
          padding,
          paddingBottom,
          paddingLeft,
          paddingRight,
          paddingTop,
          textAlign,
          ...props
        },
        ref
      ) {
        const legacyProps = getLegacyDisplayAndDirection(display)

        return (
          <StyledBox
            {...props}
            ref={ref}
            $as={as}
            $alignContent={alignContent}
            $alignItems={alignItems}
            $alignSelf={alignSelf}
            $display={legacyProps.display}
            $flex={flex}
            $flexBasis={flexBasis}
            $flexDirection={flexDirection ?? legacyProps.direction}
            $flexGrow={flexGrow}
            $flexShrink={flexShrink}
            $flexWrap={flexWrap}
            $gap={gap}
            $justifyContent={justifyContent}
            $margin={margin}
            $marginBottom={marginBottom}
            $marginLeft={marginLeft}
            $marginRight={marginRight}
            $marginTop={marginTop}
            $order={order}
            $padding={padding}
            $paddingBottom={paddingBottom}
            $paddingLeft={paddingLeft}
            $paddingRight={paddingRight}
            $paddingTop={paddingTop}
            $textAlign={textAlign}
          >
            {children}
          </StyledBox>
        )
      }
    )

    Box.displayName = 'Box'