From 88035797145b31992bea126a600f55a9df476f43 Mon Sep 17 00:00:00 2001
From: Nigel Lima <nigelnaiguel.comp@gmail.com>
Date: Sun, 21 Jan 2024 06:42:51 -0300
Subject: [PATCH 1/2] feat(table): wrap table components with forwardRef

---
 src/components/Table/Table.tsx         | 44 ++++++++++----------------
 src/components/Table/TableBody.tsx     | 27 +++++++++-------
 src/components/Table/TableCell.tsx     | 23 ++++++++------
 src/components/Table/TableHead.tsx     | 27 +++++++++-------
 src/components/Table/TableHeadCell.tsx | 23 ++++++++------
 src/components/Table/TableRow.tsx      | 32 +++++++++++--------
 6 files changed, 91 insertions(+), 85 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 88280df69..790c51446 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
@@ -31,34 +31,24 @@ export interface TableProps extends ComponentProps<'table'> {
   theme?: DeepPartial<FlowbiteTableTheme>;
 }
 
-const TableComponent: FC<TableProps> = ({
-  children,
-  className,
-  striped,
-  hoverable,
-  theme: customTheme = {},
-  ...props
-}) => {
-  const theme = mergeDeep(getTheme().table, customTheme);
-
-  return (
-    <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
-      <TableContext.Provider value={{ theme, striped, hoverable }}>
-        <div className={twMerge(theme.root.shadow, className)}></div>
-        <table className={twMerge(theme.root.base, className)} {...props}>
-          {children}
-        </table>
-      </TableContext.Provider>
-    </div>
-  );
-};
+const TableComponent = forwardRef<HTMLTableElement, TableProps>(
+  ({ children, className, striped, hoverable, theme: customTheme = {}, ...props }, ref) => {
+    const theme = mergeDeep(getTheme().table, customTheme);
+
+    return (
+      <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
+        <TableContext.Provider value={{ theme, striped, hoverable }}>
+          <div className={twMerge(theme.root.shadow, className)}></div>
+          <table className={twMerge(theme.root.base, className)} ref={ref} {...props}>
+            {children}
+          </table>
+        </TableContext.Provider>
+      </div>
+    );
+  },
+);
 
 TableComponent.displayName = 'Table';
-TableHead.displayName = 'Table.Head';
-TableBody.displayName = 'Table.Body';
-TableRow.displayName = 'Table.Row';
-TableCell.displayName = 'Table.Cell';
-TableHeadCell.displayName = 'Table.HeadCell';
 
 export const Table = Object.assign(TableComponent, {
   Head: TableHead,
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index 8bd4108a0..da0f08d66 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -17,16 +17,19 @@ export interface TableBodyProps extends ComponentProps<'tbody'> {
   theme?: DeepPartial<FlowbiteTableBodyTheme>;
 }
 
-export const TableBody: FC<TableBodyProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme } = useTableContext();
+export const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.body, customTheme);
+    const theme = mergeDeep(rootTheme.body, customTheme);
 
-  return (
-    <TableBodyContext.Provider value={{ theme }}>
-      <tbody className={twMerge(theme.base, className)} {...props}>
-        {children}
-      </tbody>
-    </TableBodyContext.Provider>
-  );
-};
+    return (
+      <TableBodyContext.Provider value={{ theme }}>
+        <tbody className={twMerge(theme.base, className)} ref={ref} {...props}>
+          {children}
+        </tbody>
+      </TableBodyContext.Provider>
+    );
+  },
+);
+TableBody.displayName = 'Table.Body';
diff --git a/src/components/Table/TableCell.tsx b/src/components/Table/TableCell.tsx
index e3920ad7d..87778ab8c 100644
--- a/src/components/Table/TableCell.tsx
+++ b/src/components/Table/TableCell.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -14,14 +14,17 @@ export interface TableCellProps extends ComponentProps<'td'> {
   theme?: DeepPartial<FlowbiteTableCellTheme>;
 }
 
-export const TableCell: FC<TableCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: bodyTheme } = useTableBodyContext();
+export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: bodyTheme } = useTableBodyContext();
 
-  const theme = mergeDeep(bodyTheme.cell, customTheme);
+    const theme = mergeDeep(bodyTheme.cell, customTheme);
 
-  return (
-    <td className={twMerge(theme.base, className)} {...props}>
-      {children}
-    </td>
-  );
-};
+    return (
+      <td className={twMerge(theme.base, className)} ref={ref} {...props}>
+        {children}
+      </td>
+    );
+  },
+);
+TableCell.displayName = 'Table.Cell';
diff --git a/src/components/Table/TableHead.tsx b/src/components/Table/TableHead.tsx
index 0379c93b6..34bf69771 100644
--- a/src/components/Table/TableHead.tsx
+++ b/src/components/Table/TableHead.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -17,16 +17,19 @@ export interface TableHeadProps extends ComponentProps<'thead'> {
   theme?: DeepPartial<FlowbiteTableHeadTheme>;
 }
 
-export const TableHead: FC<TableHeadProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme } = useTableContext();
+export const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.head, customTheme);
+    const theme = mergeDeep(rootTheme.head, customTheme);
 
-  return (
-    <TableHeadContext.Provider value={{ theme }}>
-      <thead className={twMerge(theme.base, className)} {...props}>
-        <tr>{children}</tr>
-      </thead>
-    </TableHeadContext.Provider>
-  );
-};
+    return (
+      <TableHeadContext.Provider value={{ theme }}>
+        <thead className={twMerge(theme.base, className)} ref={ref} {...props}>
+          <tr>{children}</tr>
+        </thead>
+      </TableHeadContext.Provider>
+    );
+  },
+);
+TableHead.displayName = 'Table.Head';
diff --git a/src/components/Table/TableHeadCell.tsx b/src/components/Table/TableHeadCell.tsx
index bf69bc5ad..223c2ee5a 100644
--- a/src/components/Table/TableHeadCell.tsx
+++ b/src/components/Table/TableHeadCell.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -14,14 +14,17 @@ export interface TableHeadCellProps extends ComponentProps<'th'> {
   theme?: DeepPartial<FlowbiteTableHeadCellTheme>;
 }
 
-export const TableHeadCell: FC<TableHeadCellProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: headTheme } = useTableHeadContext();
+export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: headTheme } = useTableHeadContext();
 
-  const theme = mergeDeep(headTheme.cell, customTheme);
+    const theme = mergeDeep(headTheme.cell, customTheme);
 
-  return (
-    <th className={twMerge(theme.base, className)} {...props}>
-      {children}
-    </th>
-  );
-};
+    return (
+      <th className={twMerge(theme.base, className)} ref={ref} {...props}>
+        {children}
+      </th>
+    );
+  },
+);
+TableHeadCell.displayName = 'Table.HeadCell';
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 6c5baa5bb..2a3a5826d 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ComponentProps, FC } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -16,18 +16,22 @@ export interface TableRowProps extends ComponentProps<'tr'> {
   theme?: DeepPartial<FlowbiteTableRowTheme>;
 }
 
-export const TableRow: FC<TableRowProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const { theme: rootTheme, hoverable, striped } = useTableContext();
+export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const { theme: rootTheme, hoverable, striped } = useTableContext();
 
-  const theme = mergeDeep(rootTheme.row, customTheme);
+    const theme = mergeDeep(rootTheme.row, customTheme);
 
-  return (
-    <tr
-      data-testid="table-row-element"
-      className={twMerge(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-};
+    return (
+      <tr
+        ref={ref}
+        data-testid="table-row-element"
+        className={twMerge(theme.base, striped && theme.striped, hoverable && theme.hovered, className)}
+        {...props}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+TableRow.displayName = 'Table.Row';

From 97a3df00044726b85c2610d78df90f38839b66fb Mon Sep 17 00:00:00 2001
From: Nigel Lima <nigelnaiguel.comp@gmail.com>
Date: Sun, 21 Jan 2024 06:52:37 -0300
Subject: [PATCH 2/2] fix(table): use ComponentPropsWithRef instead of
 ComponentProps

---
 src/components/Table/Table.tsx         | 6 +++---
 src/components/Table/TableBody.tsx     | 4 ++--
 src/components/Table/TableCell.tsx     | 4 ++--
 src/components/Table/TableHead.tsx     | 4 ++--
 src/components/Table/TableHeadCell.tsx | 4 ++--
 src/components/Table/TableRow.tsx      | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 790c51446..965639dc6 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { getTheme } from '../../theme-store';
@@ -25,7 +25,7 @@ export interface FlowbiteTableRootTheme {
   wrapper: string;
 }
 
-export interface TableProps extends ComponentProps<'table'> {
+export interface TableProps extends ComponentPropsWithRef<'table'> {
   striped?: boolean;
   hoverable?: boolean;
   theme?: DeepPartial<FlowbiteTableTheme>;
@@ -39,7 +39,7 @@ const TableComponent = forwardRef<HTMLTableElement, TableProps>(
       <div data-testid="table-element" className={twMerge(theme.root.wrapper)}>
         <TableContext.Provider value={{ theme, striped, hoverable }}>
           <div className={twMerge(theme.root.shadow, className)}></div>
-          <table className={twMerge(theme.root.base, className)} ref={ref} {...props}>
+          <table className={twMerge(theme.root.base, className)} {...props} ref={ref}>
             {children}
           </table>
         </TableContext.Provider>
diff --git a/src/components/Table/TableBody.tsx b/src/components/Table/TableBody.tsx
index da0f08d66..e95dab06c 100644
--- a/src/components/Table/TableBody.tsx
+++ b/src/components/Table/TableBody.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -13,7 +13,7 @@ export interface FlowbiteTableBodyTheme {
   cell: FlowbiteTableCellTheme;
 }
 
-export interface TableBodyProps extends ComponentProps<'tbody'> {
+export interface TableBodyProps extends ComponentPropsWithRef<'tbody'> {
   theme?: DeepPartial<FlowbiteTableBodyTheme>;
 }
 
diff --git a/src/components/Table/TableCell.tsx b/src/components/Table/TableCell.tsx
index 87778ab8c..c1c0683c9 100644
--- a/src/components/Table/TableCell.tsx
+++ b/src/components/Table/TableCell.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -10,7 +10,7 @@ export interface FlowbiteTableCellTheme {
   base: string;
 }
 
-export interface TableCellProps extends ComponentProps<'td'> {
+export interface TableCellProps extends ComponentPropsWithRef<'td'> {
   theme?: DeepPartial<FlowbiteTableCellTheme>;
 }
 
diff --git a/src/components/Table/TableHead.tsx b/src/components/Table/TableHead.tsx
index 34bf69771..65cd6a73c 100644
--- a/src/components/Table/TableHead.tsx
+++ b/src/components/Table/TableHead.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -13,7 +13,7 @@ export interface FlowbiteTableHeadTheme {
   cell: FlowbiteTableHeadCellTheme;
 }
 
-export interface TableHeadProps extends ComponentProps<'thead'> {
+export interface TableHeadProps extends ComponentPropsWithRef<'thead'> {
   theme?: DeepPartial<FlowbiteTableHeadTheme>;
 }
 
diff --git a/src/components/Table/TableHeadCell.tsx b/src/components/Table/TableHeadCell.tsx
index 223c2ee5a..2f4366cab 100644
--- a/src/components/Table/TableHeadCell.tsx
+++ b/src/components/Table/TableHeadCell.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -10,7 +10,7 @@ export interface FlowbiteTableHeadCellTheme {
   base: string;
 }
 
-export interface TableHeadCellProps extends ComponentProps<'th'> {
+export interface TableHeadCellProps extends ComponentPropsWithRef<'th'> {
   theme?: DeepPartial<FlowbiteTableHeadCellTheme>;
 }
 
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 2a3a5826d..05a36b544 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ComponentPropsWithRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import type { DeepPartial } from '../../types';
@@ -12,7 +12,7 @@ export interface FlowbiteTableRowTheme {
   striped: string;
 }
 
-export interface TableRowProps extends ComponentProps<'tr'> {
+export interface TableRowProps extends ComponentPropsWithRef<'tr'> {
   theme?: DeepPartial<FlowbiteTableRowTheme>;
 }