fix: table and list with a container around for overflow (#4571)

* fix: table and list with a container around for overflow

* fix: add style properties to each td following th props

* fix: make table td follow same as list

* fix: table and row to take in account checkbox and expandable

.changeset/short-balloons-fetch.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Add a container around `<Table />` and `<List />` to manage the overflow

examples/next-advanced/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-login/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-simple/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

packages/ui/package.json

@@ -60,7 +60,7 @@
         "!*.d.ts",
         "!*.cjs"
       ],
-      "limit": "600 kB",
+      "limit": "800 kB",
       "webpack": false,
       "brotli": true,
       "running": false

packages/ui/src/components/List/ListContext.tsx

@@ -15,6 +15,7 @@ import {
   useState,
 } from 'react'
 import type { Checkbox } from '../Checkbox'
+import type { ColumnProps } from './types'
 
 type RowState = Record<string, boolean>
 
@@ -42,6 +43,7 @@ type ListContextValue = {
   unselectAll: () => void
   refList: RefObject<HTMLInputElement[]>
   inRange: string[]
+  columns: ColumnProps[]
 }
 
 const ListContext = createContext<ListContextValue | undefined>(undefined)
@@ -52,6 +54,7 @@ type ListProviderProps = {
   selectable: boolean
   expandButton: boolean
   onSelectedChange?: Dispatch<SetStateAction<string[]>>
+  columns: ColumnProps[]
 }
 
 export const ListProvider = ({
@@ -60,6 +63,7 @@ export const ListProvider = ({
   selectable,
   expandButton,
   onSelectedChange,
+  columns,
 }: ListProviderProps) => {
   const [expandedRowIds, setExpandedRowIds] = useState<RowState>({})
   const [selectedRowIds, setSelectedRowIds] = useState<RowState>({})
@@ -301,6 +305,7 @@ export const ListProvider = ({
       expandButton,
       refList,
       inRange,
+      columns,
     }),
     [
       registerExpandableRow,
@@ -318,6 +323,7 @@ export const ListProvider = ({
       expandButton,
       refList,
       inRange,
+      columns,
     ],
   )
 

packages/ui/src/components/List/Row.tsx

@@ -14,6 +14,7 @@ import { Checkbox } from '../Checkbox'
 import { Tooltip } from '../Tooltip'
 import { Cell } from './Cell'
 import { useListContext } from './ListContext'
+import type { ColumnProps } from './types'
 
 const ExpandableWrapper = styled.tr`
   width: 100%;
@@ -52,9 +53,12 @@ const StyledCheckbox = styled(Checkbox, {
 `
 
 export const StyledRow = styled('tr', {
-  shouldForwardProp: prop => !['sentiment'].includes(prop),
+  shouldForwardProp: prop =>
+    !['sentiment', 'columns', 'columnsStartAt'].includes(prop),
 })<{
   sentiment: (typeof SENTIMENTS)[number]
+  columns: ColumnProps[]
+  columnsStartAt?: number
 }>`
   /* List itself also apply style about common templating between HeaderRow and other Rows */
 
@@ -130,6 +134,17 @@ export const StyledRow = styled('tr', {
     color: ${({ theme }) => theme.colors.neutral.textDisabled};
     cursor: not-allowed;
   }
+
+  ${({ columns, columnsStartAt }) =>
+    columns.map(
+      (column, index) => `
+    td:nth-of-type(${index + 1 + (columnsStartAt ?? 0)}) {
+      ${column.width ? `width: ${column.width};` : ''}
+      ${column.minWidth ? `min-width: ${column.minWidth};` : ''}
+      ${column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
+    }
+  `,
+    )}
 `
 
 const StyledCheckboxContainer = styled.div`
@@ -198,6 +213,7 @@ export const Row = forwardRef(
       expandButton,
       refList,
       inRange,
+      columns,
     } = useListContext()
 
     const expandedRowId = useId()
@@ -276,6 +292,8 @@ export const Row = forwardRef(
           }
           data-highlight={selectable && !!selectedRowIds[id]}
           data-testid={dataTestid}
+          columns={columns}
+          columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
         >
           {selectable ? (
             <NoPaddingCell preventClick={canClickRowToExpand}>

packages/ui/src/components/List/SkeletonRows.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { Skeleton } from '../Skeleton'
 import { Cell } from './Cell'
+import { useListContext } from './ListContext'
 import { StyledRow } from './Row'
 
 const StyledLoadingRow = styled(StyledRow)`
@@ -27,6 +28,7 @@ export const SkeletonRows = ({
 }: ListLoadingSkeletonProps) => {
   const rowArray = Array.from({ length: rows }, (_, index) => index)
   const colArray = Array.from({ length: cols }, (_, index) => index)
+  const { columns } = useListContext()
 
   return (
     <>
@@ -35,6 +37,7 @@ export const SkeletonRows = ({
           sentiment="neutral"
           role="row"
           id={`skeleton-${index}`}
+          columns={columns}
           key={index}
         >
           {selectable ? <div /> : null}