CSSLength; Fix tables

example/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@emotion/react": "link:../node_modules/@emotion/react",
     "@emotion/styled": "link:../node_modules/@emotion/styled",
-    "@floating-ui/react-dom-interactions": "link:../node_modules/@floating-ui/react-dom-interactions",
+    "@floating-ui/react": "link:../node_modules/@floating-ui/react",
     "@solved-ac/ui-react": "link:..",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
     "@testing-library/react": "link:../node_modules/@testing-library/react",

package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@floating-ui/react-dom-interactions": "^0.13.3",
-    "framer-motion": "6.x",
+    "@floating-ui/react": "^0.24.3",
+    "framer-motion": ">=6",
     "react": ">=17",
     "react-dom": ">=17"
   },
@@ -42,7 +42,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "@floating-ui/react-dom-interactions": "^0.13.3",
+    "@floating-ui/react": "^0.24.3",
     "@tabler/icons-react": "^2.11.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",

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/components/Select.tsx

@@ -16,7 +16,7 @@ import {
   useListNavigation,
   useRole,
   useTypeahead,
-} from '@floating-ui/react-dom-interactions'
+} from '@floating-ui/react'
 import { IconChevronDown } from '@tabler/icons-react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ellipsis } from 'polished'
@@ -142,7 +142,7 @@ export const Select = forwardRefWithGenerics(
       }
     }, [value])
 
-    const { x, y, reference, floating, strategy, context, refs } = useFloating({
+    const { x, y, refs, strategy, context } = useFloating({
       placement: 'bottom',
       open,
       onOpenChange: setOpen,
@@ -168,6 +168,8 @@ export const Select = forwardRefWithGenerics(
       ],
     })
 
+    const { reference } = refs
+
     useImperativeHandle(ref, () => reference)
 
     const { getReferenceProps, getFloatingProps, getItemProps } =
@@ -251,12 +253,12 @@ export const Select = forwardRefWithGenerics(
     return (
       <React.Fragment>
         <SelectDisplay
+          ref={refs.setReference}
           fullWidth={fullWidth}
           ellipsis={!disableEllipsis}
           role="button"
           tabIndex={0}
           type="button"
-          ref={reference}
           {...getReferenceProps({
             onTouchStart() {
               setTouch(true)
@@ -280,14 +282,14 @@ export const Select = forwardRefWithGenerics(
               <FloatingOverlay lockScroll={!touch} style={{ zIndex: 1 }}>
                 <FloatingFocusManager context={context}>
                   <SelectItemsWrapper
-                    ref={floating}
                     style={{
                       position: strategy,
                       top: y ?? 0,
                       left: x ?? 0,
                       originX: 0.5,
                       originY: 0,
                     }}
+                    ref={refs.setFloating}
                     {...getFloatingProps({
                       onKeyDown() {
                         setControlledScrolling(true)

src/components/Tooltip.tsx

@@ -9,8 +9,8 @@ import {
   shift,
   useFloating,
   useHover,
-  useInteractions
-} from '@floating-ui/react-dom-interactions'
+  useInteractions,
+} from '@floating-ui/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { transparentize } from 'polished'
 import React, { ReactNode, useRef, useState } from 'react'
@@ -80,8 +80,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   const {
     x,
     y,
-    reference,
-    floating,
+    refs,
     strategy,
     context,
     placement,
@@ -115,11 +114,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
 
   return (
     <React.Fragment>
-      <TooltipWrapper
-        {...getReferenceProps({
-          ref: reference,
-        })}
-      >
+      <TooltipWrapper ref={refs.setReference} {...getReferenceProps()}>
         {children}
       </TooltipWrapper>
       <FloatingPortal>
@@ -128,8 +123,8 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
             {isOpen && (
               <React.Fragment>
                 <RenderComponent
+                  ref={refs.setFloating}
                   {...getFloatingProps({
-                    ref: floating,
                     style: {
                       position: strategy,
                       top: y || 0,

src/styles/Themes.ts

@@ -1,4 +1,7 @@
 import { transparentize } from 'polished'
+import { CSSLength } from '../types/length'
+import { cssDiv } from '../utils/css'
+import { cssLength } from '../utils/length'
 
 const defaultPalette = {
   white: '#ffffff',
@@ -50,23 +53,20 @@ const defaultPalette = {
   },
 }
 
+export interface SolvedTextColor {
+  main: string
+  inverted: string
+  light: string
+  dark: string
+}
+
 export interface SolvedTheme {
   name: string
   color: {
     solvedAc: string
     text: {
-      primary: {
-        main: string
-        inverted: string
-        light: string
-        dark: string
-      }
-      secondary: {
-        main: string
-        inverted: string
-        light: string
-        dark: string
-      }
+      primary: SolvedTextColor
+      secondary: SolvedTextColor
     }
     background: {
       page: string
@@ -95,7 +95,7 @@ export interface SolvedTheme {
   }
   styles: {
     border: (color?: string) => string
-    shadow: (color?: string, length?: number) => string
+    shadow: (color?: string, length?: CSSLength) => string
   }
 }
 
@@ -139,10 +139,11 @@ const Light: SolvedTheme = {
   styles: {
     border: (color?: string) =>
       `1px solid ${color || defaultPalette.gray[200]}`,
-    shadow: (color?: string, length?: number) =>
-      `${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
-        (length || 8) / 2
-      }px ${length || 8}px`,
+    shadow: (color?: string, length?: CSSLength) =>
+      `${transparentize(
+        0.6,
+        color || defaultPalette.gray[200]
+      )} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
   },
 }
 
@@ -177,10 +178,11 @@ const Dark: SolvedTheme = {
   styles: {
     border: (color?: string) =>
       `1px solid ${(color || defaultPalette.gray[700]).toString()}`,
-    shadow: (color?: string, length?: number) =>
-      `${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
-        (length || 8) / 2
-      }px ${length || 8}px`,
+    shadow: (color?: string, length?: CSSLength) =>
+      `${transparentize(
+        0.6,
+        color || defaultPalette.gray[200]
+      )} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
   },
 }
 
@@ -200,10 +202,11 @@ const Black: SolvedTheme = {
   styles: {
     border: (color?: string) =>
       `1px solid ${(color || defaultPalette.gray[900]).toString()}`,
-    shadow: (color?: string, length?: number) =>
-      `${transparentize(0.6, color || defaultPalette.gray[200])} 0px ${
-        (length || 8) / 2
-      }px ${length || 8}px`,
+    shadow: (color?: string, length?: CSSLength) =>
+      `${transparentize(
+        0.6,
+        color || defaultPalette.gray[200]
+      )} 0px ${cssLength(cssDiv(length || 8, 2))} ${cssLength(length || 8)}`,
   },
 }
 

src/types/length.ts

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

src/utils/css.ts

@@ -0,0 +1,30 @@
+import { CSSLength } from '../types/length'
+import { cssLength } from './length'
+
+export const cssAdd = (a: CSSLength, b: CSSLength): CSSLength => {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a + b
+  }
+  return `calc(${cssLength(a)} + ${cssLength(b)})`
+}
+
+export const cssSub = (a: CSSLength, b: CSSLength): CSSLength => {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b
+  }
+  return `calc(${cssLength(a)} - ${cssLength(b)})`
+}
+
+export const cssMul = (a: CSSLength, b: number): CSSLength => {
+  if (typeof a === 'number') {
+    return a * b
+  }
+  return `calc(${cssLength(a)} * ${b})`
+}
+
+export const cssDiv = (a: CSSLength, b: number): CSSLength => {
+  if (typeof a === 'number') {
+    return a / b
+  }
+  return `calc(${cssLength(a)} / ${b})`
+}

src/utils/length.ts

@@ -0,0 +1,8 @@
+import { CSSLength } from '../types/length'
+
+export const cssLength = (cssLength?: CSSLength | null | undefined): string => {
+  if (typeof cssLength === 'number') {
+    return `${cssLength}px`
+  }
+  return cssLength || '0px'
+}