Merge pull request #922 from buildo/ssr-fixes

Update to React 18.3.1 and fix two React warnings in Table

Author: gabro

packages/bento-design-system/package.json

@@ -190,8 +190,8 @@
     "playroom": "0.32.1",
     "postcss": "8.4.47",
     "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "8.0.8",
     "style-loader": "3.3.4",
     "ts-loader": "9.4.4",

packages/bento-design-system/src/Table/Table.tsx

@@ -51,7 +51,7 @@ import {
   GridWidth,
   Row as RowType,
 } from "./types";
-import { useLayoutEffect, useMemo, useState, CSSProperties, useEffect, useRef } from "react";
+import { useMemo, useState, CSSProperties, useEffect, useRef } from "react";
 import { match, __ } from "ts-pattern";
 import { useBentoConfig } from "../BentoConfigContext";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -233,12 +233,12 @@ export function Table<
     .map((c) => c.id ?? c.accessor)
     .indexOf(stickyLeftColumnsIds[stickyLeftColumnsIds.length - 1]);
 
-  // Keep a style object for each sticky column, which will be updated by the useLayoutEffect below
+  // Keep a style object for each sticky column, which will be updated by the useEffect below
   const [stickyLeftColumnStyle, setStickyLeftColumnStyle] = useState(
     {} as Record<string, CSSProperties>
   );
 
-  // Keep a state for the height of the first row of headers, which will be updated by the useLayoutEffect below
+  // Keep a state for the height of the first row of headers, which will be updated by the useEffect below
   const [stickyHeaderHeight, setStickyHeaderHeight] = useState(0);
 
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -249,7 +249,7 @@ export function Table<
   /** Get the width of each sticky column (using the header width as reference) and use it to set the `left` of each sticky column.
    *  Each sticky column must have as `left` the total width of the previous sticky columns.
    */
-  useLayoutEffect(() => {
+  useEffect(() => {
     // Make this computation only if we have any data, because headers are not rendered when there are no rows
     // and we need them to get the column width.
     if (data.length > 0) {
@@ -375,20 +375,24 @@ export function Table<
     rowIndex: number,
     interactiveRow: boolean
   ) {
-    return cells.map((cell, index) => (
-      <CellContainer
-        {...cell.getCellProps()}
-        index={rowIndex}
-        lastLeftSticky={index === lastStickyColumnIndex}
-        style={stickyLeftColumnStyle[cell.column.id]}
-        first={index === 0}
-        last={(index + 1) % flatColumns.length === 0}
-        interactiveRow={interactiveRow}
-        withDividers={withDividers}
-      >
-        {cell.render("Cell")}
-      </CellContainer>
-    ));
+    return cells.map((cell, index) => {
+      const { key, ...cellProps } = cell.getCellProps();
+      return (
+        <CellContainer
+          key={key}
+          {...cellProps}
+          index={rowIndex}
+          lastLeftSticky={index === lastStickyColumnIndex}
+          style={stickyLeftColumnStyle[cell.column.id]}
+          first={index === 0}
+          last={(index + 1) % flatColumns.length === 0}
+          interactiveRow={interactiveRow}
+          withDividers={withDividers}
+        >
+          {cell.render("Cell")}
+        </CellContainer>
+      );
+    });
   }
 
   const rowsToRender = virtualizeRows
@@ -581,6 +585,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
   ) : null;
 
   const hasHeaderContent = column.Header || hint || sortIcon;
+  const { key: _key, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps());
 
   return (
     <Box
@@ -598,7 +603,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
         className={[columnHeader({ withDividers, first, lastLeftSticky })]}
         background={config.headerBackgroundColor}
         color={config.headerForegroundColor}
-        {...column.getHeaderProps(column.getSortByToggleProps())}
+        {...headerProps}
         textAlign={column.align}
         {...config.padding.header}
       >