import React from 'react' ; import { HTMLElementProps , createDataProp } from '@leafygreen-ui/lib' ; import { css , cx } from '@leafygreen-ui/emotion' ; import { getCommonCellStyles } from './styles' ; import { useFontSizeContext } from './FontSizeContext' ; export const tdInnerDiv = createDataProp ( 'td-inner-div' ) ; interface HeaderCellProps extends HTMLElementProps < 'th' , HTMLTableHeaderCellElement > { isHeader : true ; } interface TableCellProps extends HTMLElementProps < 'td' , HTMLTableCellElement > { isHeader ? : false ; } type CellProps = HeaderCellProps | TableCellProps ; const baseStyles = css `
  line-height: 20px;
  position: relative;
` ; const thStyles = css `
  font-weight: bold;
` ; const innerDivStyles = css `
  display: flex;
  align-items: center;
` ; export type CellElement = React . ReactComponentElement < typeof Cell > ; const Cell = React . forwardRef ( ( { children , className , isHeader = false , ... rest } , ref ) => { const Root = isHeader ? 'th' : 'td' ; const baseFontSize = useFontSizeContext ( ) ; const props = { ref , className : cx ( getCommonCellStyles ( baseFontSize ) , baseStyles , { [ thStyles ] : isHeader } , className ) , } ; if ( isHeader ) { props . scope = 'row' ; props . role = 'rowheader' ; } return ( < Root { ... props } { ... rest } > < div className = { innerDivStyles } { ... tdInnerDiv . prop } > { children } < /div> < /Root>); } ) ; Cell . displayName = 'Cell' ; export default Cell ;