feat: colMode

Author: lisalupi

packages/plus/src/components/OfferList/__tests__/__snapshots__/index.test.tsx.snap

@@ -3114,7 +3114,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_3g_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3244,7 +3244,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_3m_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3374,7 +3374,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_3s_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3504,7 +3504,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_42_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3634,7 +3634,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_48_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3764,7 +3764,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_4e_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -3894,7 +3894,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_4k_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >
@@ -4024,7 +4024,7 @@ exports[`offerList > should work with banner open 1`] = `
             id="_r_4q_"
           >
             <td
-              class="uv_inoh54n uv_inoh54k"
+              class="uv_inoh54o uv_inoh54k"
               colspan="5"
               style="--uv_1431nf64: auto; --uv_1431nf66: auto; --uv_1431nf65: none; --uv_1431nf67: auto; --uv_1431nf68: none; --uv_1431nf69: auto; --uv_1431nf63: var(--rwwhsl9t);"
             >

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

@@ -5,7 +5,8 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { CSSProperties, ReactNode } from 'react'
 import { forwardRef } from 'react'
 import { useColumnProvider } from './ColumnProvider'
-import { listCell } from './styles.css'
+import { useListContext } from './ListContext'
+import { listCell, listCellStrict } from './styles.css'
 import {
   listCellPadding,
   maxWidthCell,
@@ -27,7 +28,7 @@ type CellProps = {
 export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
   ({ children, className, 'data-testid': dataTestid, colSpan, style }, ref) => {
     const context = useColumnProvider()
-
+    const { colMode } = useListContext()
     const width = context?.width
     const maxWidth = context?.width
     const minWidth = context?.width
@@ -45,7 +46,11 @@ export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
 
     return (
       <td
-        className={cn(className, listCell)}
+        className={cn(
+          className,
+          listCell,
+          colMode === 'strict' ? listCellStrict : '',
+        )}
         colSpan={colSpan}
         data-testid={dataTestid}
         ref={ref}

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

@@ -50,6 +50,7 @@ export type ListContextValue = {
   refList: RefObject<HTMLInputElement>[]
   setRefList: Dispatch<SetStateAction<RefObject<HTMLInputElement>[]>>
   handleOnChange: (value: string, checked: boolean) => void
+  colMode?: 'strict' | 'flexible'
 }
 
 const ListContext = createContext<ListContextValue | undefined>(undefined)
@@ -61,6 +62,7 @@ export type ListProviderProps = {
   expandButton: boolean
   onSelectedChange?: Dispatch<SetStateAction<string[]>>
   columns: ColumnProps[]
+  colMode?: 'strict' | 'flexible'
 }
 
 const checkStateOfCheckboxs = (ids: RowState) => {
@@ -86,6 +88,7 @@ export const ListProvider = ({
   expandButton,
   onSelectedChange,
   columns,
+  colMode,
 }: ListProviderProps) => {
   const [expandedRowIds, setExpandedRowIds] = useState<RowState>({})
   const [selectedRowIds, setSelectedRowIds] = useState<RowState>({})
@@ -331,6 +334,7 @@ export const ListProvider = ({
     () => ({
       allRowSelectValue,
       collapseRow,
+      colMode,
       columns,
       expandButton,
       expandedRowIds,
@@ -370,6 +374,7 @@ export const ListProvider = ({
       unselectAll,
       unselectRow,
       handleOnChange,
+      colMode,
     ],
   )