From 4f3dd4d7c5a20400f233f6d6f8f56017af331f6a Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Fri, 13 Sep 2024 10:44:09 +1000
Subject: [PATCH] Fix error when rendering empty cell in `<TableView>`

---
 .changeset/late-cows-tie.md               |  5 +++
 design-system/pkg/src/table/TableView.tsx | 37 +++++++++--------------
 2 files changed, 19 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/late-cows-tie.md

diff --git a/.changeset/late-cows-tie.md b/.changeset/late-cows-tie.md
new file mode 100644
index 000000000..4acfbac5b
--- /dev/null
+++ b/.changeset/late-cows-tie.md
@@ -0,0 +1,5 @@
+---
+'@keystar/ui': patch
+---
+
+Fix error when rendering empty cell in `<TableView>`
diff --git a/design-system/pkg/src/table/TableView.tsx b/design-system/pkg/src/table/TableView.tsx
index 8bd8e71b6..1db9fba49 100644
--- a/design-system/pkg/src/table/TableView.tsx
+++ b/design-system/pkg/src/table/TableView.tsx
@@ -196,7 +196,7 @@ export function TableView<T extends object>(
 
   let layout = useMemo(
     () =>
-      new TableViewLayout({
+      new TableViewLayout<T>({
         // If props.overflowMode is wrap, then use estimated heights based on scale, otherwise use fixed heights.
         rowHeight:
           props.overflowMode === 'wrap' ? undefined : ROW_HEIGHTS[density],
@@ -406,6 +406,9 @@ export function TableView<T extends object>(
       case 'empty': {
         return <EmptyState />;
       }
+      default: {
+        return null;
+      }
     }
   }, []);
 
@@ -529,11 +532,9 @@ export function TableView<T extends object>(
         className={classNames(tableClassname, styleProps.className)}
         tableState={state}
         cosmeticConfig={cosmeticConfig}
-        // @ts-expect-error
         layout={layout}
         collection={state.collection}
         persistedKeys={persistedKeys}
-        // @ts-expect-error
         renderView={renderView}
         // @ts-expect-error
         renderWrapper={renderWrapper}
@@ -582,7 +583,7 @@ interface TableVirtualizerProps<T> extends HTMLAttributes<HTMLElement> {
   layout: TableViewLayout<T>;
   collection: TableCollection<T>;
   persistedKeys: Set<Key> | null;
-  renderView: (type: string, content: GridNode<T>) => ReactElement;
+  renderView: (type: string, content: GridNode<T>) => ReactElement | null;
   renderWrapper?: (
     parent: View | null,
     reusableView: View,
@@ -1387,13 +1388,15 @@ function TableCell({ cell }: { cell: GridNode<unknown> }) {
         ref={ref}
         className={cellClassname}
       >
-        <CellContents id={id}>
-          {isReactText(cell.rendered) ? (
-            <Text>{cell.rendered}</Text>
-          ) : (
-            cell.rendered
-          )}
-        </CellContents>
+        {typeof cell.rendered === 'boolean' || cell.rendered == null ? null : (
+          <CellContents id={id}>
+            {isReactText(cell.rendered) ? (
+              <Text>{cell.rendered}</Text>
+            ) : (
+              cell.rendered
+            )}
+          </CellContents>
+        )}
       </div>
     </FocusRing>
   );
@@ -1409,18 +1412,6 @@ function CellContents(props: HTMLAttributes<HTMLElement>) {
   );
 }
 
-export function getWrappedElement(
-  children: string | ReactElement | ReactNode
-): ReactElement {
-  let element: ReactElement;
-  if (isReactText(children)) {
-    element = <span>{children}</span>;
-  } else {
-    element = Children.only(children) as ReactElement;
-  }
-  return element;
-}
-
 function TableCellWrapper(
   props: VirtualizerItemOptions & {
     parent: View;