chore: update TableHeadRow component and theme.ts

themesberg · Aug 28, 2024 · 29bf85a · 29bf85a
1 parent 487b3e8
commit 29bf85a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/packages/ui/src/components/Table/Table.spec.tsx b/packages/ui/src/components/Table/Table.spec.tsx
@@ -33,13 +33,15 @@ describe("Components / Table", () => {
 const TestTable: FC<TableProps> = (props) => (
   <Table {...props}>
     <Table.Head>
-      <Table.HeadCell>Product name</Table.HeadCell>
-      <Table.HeadCell>Color</Table.HeadCell>
-      <Table.HeadCell>Category</Table.HeadCell>
-      <Table.HeadCell>Price</Table.HeadCell>
-      <Table.HeadCell>
-        <span className="sr-only">Edit</span>
-      </Table.HeadCell>
+      <Table.HeadRow>
+        <Table.HeadCell>Product name</Table.HeadCell>
+        <Table.HeadCell>Color</Table.HeadCell>
+        <Table.HeadCell>Category</Table.HeadCell>
+        <Table.HeadCell>Price</Table.HeadCell>
+        <Table.HeadCell>
+          <span className="sr-only">Edit</span>
+        </Table.HeadCell>
+      </Table.HeadRow>
     </Table.Head>
     <Table.Body className="divide-y">
       <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">

diff --git a/packages/ui/src/components/Table/TableHead.tsx b/packages/ui/src/components/Table/TableHead.tsx
@@ -7,10 +7,11 @@ import type { DeepPartial } from "../../types";
 import { useTableContext } from "./TableContext";
 import type { FlowbiteTableHeadCellTheme } from "./TableHeadCell";
 import { TableHeadContext } from "./TableHeadContext";
+import { FlowbiteTableHeadRowTheme } from "./TableHeadRow";
 
 export interface FlowbiteTableHeadTheme {
   base: string;
-  row: string;
+  row: FlowbiteTableHeadRowTheme;
   cell: FlowbiteTableHeadCellTheme;
 }
 

diff --git a/packages/ui/src/components/Table/TableHeadRow.tsx b/packages/ui/src/components/Table/TableHeadRow.tsx
@@ -4,21 +4,24 @@ import { forwardRef, type ComponentPropsWithRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import type { DeepPartial } from "../../types";
-import { useTableContext } from "./TableContext";
-import type { FlowbiteTableHeadTheme } from "./TableHead";
+import { useTableHeadContext } from "./TableHeadContext";
+
+export interface FlowbiteTableHeadRowTheme {
+  base: string;
+}
 
 export interface TableHeadRowProps extends ComponentPropsWithRef<"tr"> {
-  theme?: DeepPartial<FlowbiteTableHeadTheme>;
+  theme?: DeepPartial<FlowbiteTableHeadRowTheme>;
 }
 
 export const TableHeadRow = forwardRef<HTMLTableRowElement, TableHeadRowProps>(
   ({ children, className, theme: customTheme = {}, ...props }, ref) => {
-    const { theme: rootTheme } = useTableContext();
+    const { theme: headTheme } = useTableHeadContext();
 
-    const theme = mergeDeep(rootTheme.head, customTheme);
+    const theme = mergeDeep(headTheme.row, customTheme);
 
     return (
-      <tr className={twMerge(theme.row, className)} ref={ref} {...props}>
+      <tr className={twMerge(theme.base, className)} ref={ref} {...props}>
         {children}
       </tr>
     );

diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts
@@ -15,6 +15,9 @@ export const tableTheme: FlowbiteTableTheme = createTheme({
   },
   head: {
     base: "group/head text-xs uppercase text-gray-700 dark:text-gray-400",
+    row: {
+      base: "group/row",
+    },
     cell: {
       base: "bg-gray-50 px-6 py-3 group-first/head:first:rounded-tl-lg group-first/head:last:rounded-tr-lg dark:bg-gray-700",
     },