fix: table

Author: shiftpsh

src/components/$Table/Cell.tsx

@@ -15,6 +15,7 @@ const paddingMap = {
 
 interface CellContainerProps {
   padding: 'none' | 'dense' | 'normal' | 'wide'
+  verticalAlign: 'top' | 'middle' | 'bottom'
   numeric: boolean
   header: boolean
 }
@@ -28,13 +29,15 @@ const CellContainer = styled.td<CellContainerProps>`
   display: table-cell;
   border-bottom: ${({ theme }) => theme.styles.border()};
   ${({ padding }) => paddingMap[padding]}
+  ${({ verticalAlign }) => `vertical-align: ${verticalAlign};`}
   ${({ numeric }) =>
     numeric && "text-align: right; font-feature-settings: 'tnum';"}
   ${({ header }) => header && whenHeader}
 `
 
 export interface CellProps {
   padding?: 'none' | 'dense' | 'normal' | 'wide'
+  verticalAlign?: 'top' | 'middle' | 'bottom'
   header?: boolean
   numeric?: boolean
 }
@@ -45,6 +48,7 @@ export const Cell: PC<'td', CellProps> = forwardRefWithGenerics(
     const tableRowGroupContext = useContext(TableRowGroupContext)
     const {
       padding = tableContext.padding,
+      verticalAlign = tableRowGroupContext.verticalAlign,
       header = tableRowGroupContext.header,
       as,
       numeric = false,
@@ -56,6 +60,7 @@ export const Cell: PC<'td', CellProps> = forwardRefWithGenerics(
     return (
       <CellContainer
         padding={padding}
+        verticalAlign={verticalAlign}
         numeric={numeric}
         header={header}
         ref={ref}

src/components/$Table/Row.tsx

@@ -16,6 +16,7 @@ const RowContainer = styled.tr<RowContainerProps>`
 export interface RowProps {
   header?: boolean
   padding?: 'none' | 'dense' | 'normal' | 'wide'
+  verticalAlign?: 'top' | 'middle' | 'bottom'
 }
 
 export const Row: PC<'tr', RowProps> = forwardRefWithGenerics(
@@ -24,12 +25,15 @@ export const Row: PC<'tr', RowProps> = forwardRefWithGenerics(
     const {
       header = false,
       padding = tableContext.padding,
+      verticalAlign = tableContext.verticalAlign,
       as = 'tr',
       ...rest
     } = props
 
     return (
-      <TableContext.Provider value={{ ...tableContext, padding }}>
+      <TableContext.Provider
+        value={{ ...tableContext, padding, verticalAlign }}
+      >
         <RowContainer header={header} ref={ref} as={as} {...rest} />
       </TableContext.Provider>
     )

src/components/$Table/TableContext.ts

@@ -3,9 +3,11 @@ import React from 'react'
 export interface TableContextProps {
   padding: 'none' | 'dense' | 'normal' | 'wide'
   sticky: boolean | number | string
+  verticalAlign: 'top' | 'middle' | 'bottom'
 }
 
 export const TableContext = React.createContext<TableContextProps>({
   padding: 'normal',
   sticky: false,
+  verticalAlign: 'top',
 })

src/components/$Table/TableHead.tsx

@@ -28,15 +28,21 @@ const TableHeadContainer = styled.thead<TableHeadContainerProps>`
 
 export interface TableHeadProps {
   sticky?: boolean | number | string
+  verticalAlign?: 'top' | 'middle' | 'bottom'
 }
 
 export const TableHead: PC<'thead', TableHeadProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TableHeadProps>, ref?: PR<T>) => {
     const tableContext = useContext(TableContext)
-    const { sticky = tableContext.sticky, as = 'thead', ...rest } = props
+    const {
+      sticky = tableContext.sticky,
+      verticalAlign = tableContext.verticalAlign,
+      as = 'thead',
+      ...rest
+    } = props
 
     return (
-      <TableRowGroupContext.Provider value={{ header: true }}>
+      <TableRowGroupContext.Provider value={{ header: true, verticalAlign }}>
         <TableHeadContainer sticky={sticky} ref={ref} as={as} {...rest} />
       </TableRowGroupContext.Provider>
     )

src/components/$Table/TableRowGroupContext.ts

@@ -2,9 +2,11 @@ import React from 'react'
 
 export interface TableRowGroupContextProps {
   header: boolean
+  verticalAlign: 'top' | 'middle' | 'bottom'
 }
 
 export const TableRowGroupContext =
   React.createContext<TableRowGroupContextProps>({
     header: false,
+    verticalAlign: 'top',
   })

src/styles/Themes.ts

@@ -1,4 +1,5 @@
 import { transparentize } from 'polished'
+import { CSSLength } from '../types/length'
 import { cssDiv } from '../utils/css'
 import { cssLength } from '../utils/length'
 
@@ -52,8 +53,6 @@ const defaultPalette = {
   },
 }
 
-export type CSSLength = number | string
-
 export interface SolvedTextColor {
   main: string
   inverted: string

src/types/length.ts

@@ -0,0 +1 @@
+export type CSSLength = number | string

src/utils/css.ts

@@ -1,4 +1,4 @@
-import { CSSLength } from '../styles'
+import { CSSLength } from '../types/length'
 import { cssLength } from './length'
 
 export const cssAdd = (a: CSSLength, b: CSSLength): CSSLength => {

src/utils/length.ts

@@ -1,4 +1,4 @@
-import { CSSLength } from '../styles'
+import { CSSLength } from '../types/length'
 
 export const cssLength = (cssLength?: CSSLength | null | undefined): string => {
   if (typeof cssLength === 'number') {