From 6f1869bac86c1dcbda622413a197f67536803f53 Mon Sep 17 00:00:00 2001
From: Mike Robinson <multiwebinc@users.noreply.github.com>
Date: Mon, 17 Apr 2023 12:56:34 -0600
Subject: [PATCH] fix(/lib/components/table): prevent scrollbars around
 `<Table>`s (#608)

* Update default.ts

* Update Table.tsx

* Update TableBody.tsx

* Update TableCell.tsx

* Update TableRow.tsx

* Update defaults.ts

* Fix prettier errors
---
 src/lib/components/Table/Table.tsx     |  6 ++++--
 src/lib/components/Table/TableBody.tsx | 24 +++++++++++++++++++++---
 src/lib/components/Table/TableCell.tsx |  2 +-
 src/lib/components/Table/TableRow.tsx  |  3 ++-
 src/lib/theme/default.ts               | 15 ++++++++++-----
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Table/Table.tsx b/src/lib/components/Table/Table.tsx
index c749738af..c33b02500 100644
--- a/src/lib/components/Table/Table.tsx
+++ b/src/lib/components/Table/Table.tsx
@@ -3,8 +3,8 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite';
+import type { FlowbiteTableBodyTheme } from './TableBody';
 import { TableBody } from './TableBody';
-import type { FlowbiteTableCellTheme } from './TableCell';
 import { TableCell } from './TableCell';
 import type { TableContextType } from './TableContext';
 import { TableContext } from './TableContext';
@@ -16,13 +16,14 @@ import { TableRow } from './TableRow';
 
 export interface FlowbiteTableTheme {
   root: FlowbiteTableRootTheme;
-  cell: FlowbiteTableCellTheme;
   head: FlowbiteTableHeadTheme;
   row: FlowbiteTableRowTheme;
+  body: FlowbiteTableBodyTheme;
 }
 
 export interface FlowbiteTableRootTheme {
   base: string;
+  shadow: string;
   wrapper: string;
 }
 
@@ -43,6 +44,7 @@ const TableComponent: FC<TableProps> = ({
   return (
     <div data-testid="table-element" className={classNames(theme.root.wrapper)}>
       <TableContext.Provider value={{ striped, hoverable }}>
+        <div className={classNames(theme.root.shadow, className)}></div>
         <table className={classNames(theme.root.base, className)} {...props}>
           {children}
         </table>
diff --git a/src/lib/components/Table/TableBody.tsx b/src/lib/components/Table/TableBody.tsx
index 9f0bb968e..04ea86155 100644
--- a/src/lib/components/Table/TableBody.tsx
+++ b/src/lib/components/Table/TableBody.tsx
@@ -1,7 +1,25 @@
+import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { DeepPartial } from '..';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import { useTheme } from '../Flowbite';
+import type { FlowbiteTableCellTheme } from './TableCell';
 
-export type TableBodyProps = PropsWithChildren<ComponentProps<'tbody'>>;
+export interface FlowbiteTableBodyTheme {
+  base: string;
+  cell: FlowbiteTableCellTheme;
+}
 
-export const TableBody: FC<TableBodyProps> = ({ children, ...props }) => {
-  return <tbody {...props}>{children}</tbody>;
+export interface TableBodyProps extends PropsWithChildren, ComponentProps<'tbody'> {
+  theme?: DeepPartial<FlowbiteTableCellTheme>;
+}
+
+export const TableBody: FC<TableBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+  const theme = mergeDeep(useTheme().theme.table.body, customTheme);
+
+  return (
+    <tbody className={classNames(theme.base, className)} {...props}>
+      {children}
+    </tbody>
+  );
 };
diff --git a/src/lib/components/Table/TableCell.tsx b/src/lib/components/Table/TableCell.tsx
index b5af06d62..fbb7350e0 100644
--- a/src/lib/components/Table/TableCell.tsx
+++ b/src/lib/components/Table/TableCell.tsx
@@ -13,7 +13,7 @@ export interface TableCellProps extends PropsWithChildren, ComponentProps<'td'>
 }
 
 export const TableCell: FC<TableCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(useTheme().theme.table.cell, customTheme);
+  const theme = mergeDeep(useTheme().theme.table.body.cell, customTheme);
 
   return (
     <td className={classNames(theme.base, className)} {...props}>
diff --git a/src/lib/components/Table/TableRow.tsx b/src/lib/components/Table/TableRow.tsx
index a4e4e1a70..c8ce124b4 100644
--- a/src/lib/components/Table/TableRow.tsx
+++ b/src/lib/components/Table/TableRow.tsx
@@ -6,6 +6,7 @@ import { useTheme } from '../Flowbite';
 import { useTableContext } from './TableContext';
 
 export interface FlowbiteTableRowTheme {
+  base: string;
   hovered: string;
   striped: string;
 }
@@ -21,7 +22,7 @@ export const TableRow: FC<TableRowProps> = ({ children, className, theme: custom
   return (
     <tr
       data-testid="table-row-element"
-      className={classNames(striped && theme.striped, hoverable && theme.hovered, className)}
+      className={classNames(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
       {...props}
     >
       {children}
diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
index c78f7cb0b..861504ab1 100644
--- a/src/lib/theme/default.ts
+++ b/src/lib/theme/default.ts
@@ -1008,18 +1008,23 @@ const theme: FlowbiteTheme = {
   table: {
     root: {
       base: 'w-full text-left text-sm text-gray-500 dark:text-gray-400',
-      wrapper: 'relative overflow-x-auto shadow-md sm:rounded-lg',
+      shadow: 'absolute bg-white dark:bg-black w-full h-full top-0 left-0 rounded-lg drop-shadow-md -z-10',
+      wrapper: 'relative',
     },
-    cell: {
-      base: 'px-6 py-4',
+    body: {
+      base: 'group/body',
+      cell: {
+        base: 'group-first/body:group-first/row:first:rounded-tl-lg group-first/body:group-first/row:last:rounded-tr-lg group-last/body:group-last/row:first:rounded-bl-lg group-last/body:group-last/row:last:rounded-br-lg px-6 py-4',
+      },
     },
     head: {
-      base: 'bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400',
+      base: 'group/head text-xs uppercase text-gray-700 dark:text-gray-400',
       cell: {
-        base: 'px-6 py-3',
+        base: 'group-first/head:first:rounded-tl-lg group-first/head:last:rounded-tr-lg bg-gray-50 dark:bg-gray-700 px-6 py-3',
       },
     },
     row: {
+      base: 'group/row',
       hovered: 'hover:bg-gray-50 dark:hover:bg-gray-600',
       striped: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700',
     },