@umituz/web-design-system 4.29.3 → 4.29.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.29.3",
+  "version": "4.29.4",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/components.smoke.test.tsx

@@ -1811,3 +1811,45 @@ describe('FormField auto id (4.29.1)', () => {
     expect((control.getAttribute('aria-describedby') ?? '').length).toBeGreaterThan(0);
   });
 });
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../presentation/organisms/Table';
+
+describe('Table compound colSpan (4.29.4)', () => {
+  it('renders a grouped header row with colSpan and scope on th', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead />
+            <TableHead colSpan={2} scope="colgroup">
+              Orders
+            </TableHead>
+          </TableRow>
+          <TableRow>
+            <TableHead />
+            <TableHead>View</TableHead>
+            <TableHead>Edit</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Editor</TableCell>
+            <TableCell>yes</TableCell>
+            <TableCell>no</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    const group = screen.getByText('Orders');
+    expect(group.getAttribute('colspan')).toBe('2');
+    expect(group.getAttribute('scope')).toBe('colgroup');
+    expect(screen.getByText('Editor')).toBeTruthy();
+  });
+});

package/src/presentation/organisms/Table.tsx

@@ -3,7 +3,7 @@
  * @description Data table component
  */
 
-import { forwardRef, type HTMLAttributes, type TdHTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
 import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
@@ -78,7 +78,7 @@ export const TableRow = React.memo(forwardRef<HTMLTableRowElement, HTMLAttribute
 
 TableRow.displayName = 'TableRow';
 
-export const TableHead = React.memo(forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+export const TableHead = React.memo(forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
     <th
       ref={ref}