fix(#670): missing HTMLAttributes types (#671)

Author: coston

src/components/Table.tsx

@@ -1,13 +1,9 @@
 import { forwardRef } from 'react';
-import { OmitProps } from '../types';
+import { TableProps } from '../types';
 import { allowed } from '../utils/allowed';
 import React from 'react';
 import { HeaderProvider } from '../utils/tableContext';
 
-type TableProps = {
-  className?: string;
-} & OmitProps;
-
 const Table = forwardRef<HTMLTableElement, TableProps>(
   ({ className, ...props }, ref) => {
     const classes = `${className || ''} responsiveTable`;

src/components/Tbody.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import allowed from '../utils/allowed';
-import { OmitProps } from '../types';
+import { TbodyProps } from '../types';
 
-function Tbody(props: OmitProps) {
+function Tbody(props: TbodyProps) {
   return <tbody data-testid="tbody" {...allowed(props)} />;
 }
 export default Tbody;

src/components/Thead.tsx

@@ -1,9 +1,9 @@
-import React, { PropsWithChildren, ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 import allowed from '../utils/allowed';
-import { OmitProps } from '../types';
+import { TheadProps } from '../types';
 
-function Thead(props: PropsWithChildren<OmitProps>) {
+function Thead(props: TheadProps) {
   const { children } = props;
 
   return (

src/components/Tr.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import TrInner from './TrInner';
 import { HeaderContext } from '../utils/tableContext';
-import { OmitProps } from '../types';
+import { TrProps } from '../types';
 
-function Tr(props: OmitProps) {
+function Tr(props: TrProps) {
   const context = useContext(HeaderContext);
 
   if (!context) {

src/components/TrInner.tsx

@@ -1,15 +1,10 @@
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useContext,
-  useEffect,
-} from 'react';
+import React, { ReactElement, useContext, useEffect } from 'react';
 import { HeaderContext } from '../utils/tableContext';
 
 import allowed from '../utils/allowed';
-import { OmitProps } from '../types';
+import { TrProps } from '../types';
 
-type TrInnerProps = PropsWithChildren<OmitProps> & {
+type TrInnerProps = TrProps & {
   headers: string[];
 };
 

src/types/index.ts

@@ -1,4 +1,10 @@
-import { Dispatch, ReactNode, SetStateAction } from 'react';
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  HTMLAttributes,
+  TableHTMLAttributes,
+} from 'react';
 
 export type OmitProps = {
   inHeader?: boolean;
@@ -18,3 +24,9 @@ export type HeaderContextType = {
 export type TdProps = OmitProps & {
   columnKey?: number;
 };
+
+// Component-specific types that combine OmitProps with appropriate HTML attributes
+export type TrProps = OmitProps & HTMLAttributes<HTMLTableRowElement>;
+export type TbodyProps = OmitProps & HTMLAttributes<HTMLTableSectionElement>;
+export type TableProps = OmitProps & TableHTMLAttributes<HTMLTableElement>;
+export type TheadProps = OmitProps & HTMLAttributes<HTMLTableSectionElement>;

test/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { Table, Thead, Tbody, Tr, Th, Td } from '../src';
@@ -382,4 +382,61 @@ describe('SuperResponsiveTable UniqueCase', () => {
     expect(cellWithRowSpan).toBeInTheDocument();
     expect(cellWithRowSpan).toHaveAttribute('rowSpan', '2');
   });
+
+  it('should handle events and pass React HTMLAttributes props to Tr, Th, and Td components', () => {
+    const handleClick = jest.fn();
+    const handleMouseEnter = jest.fn();
+    const handleDoubleClick = jest.fn();
+    const handleKeyDown = jest.fn();
+
+    const { getByTestId } = render(
+      <Table>
+        <Thead>
+          <Tr>
+            <Th
+              data-testid="header"
+              onMouseEnter={handleMouseEnter}
+              onDoubleClick={handleDoubleClick}
+              onKeyDown={handleKeyDown}
+            >
+              Header 1
+            </Th>
+            <Th>Header 2</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr data-testid="clickable-row" onClick={handleClick}>
+            <Td
+              data-testid="cell"
+              onMouseEnter={handleMouseEnter}
+              onDoubleClick={handleDoubleClick}
+              onKeyDown={handleKeyDown}
+            >
+              Cell 1
+            </Td>
+            <Td>Cell 2</Td>
+          </Tr>
+        </Tbody>
+      </Table>
+    );
+
+    const row = getByTestId('clickable-row');
+    const header = getByTestId('header');
+    const cell = getByTestId('cell');
+
+    fireEvent.click(row);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+
+    fireEvent.mouseEnter(header);
+    fireEvent.mouseEnter(cell);
+    expect(handleMouseEnter).toHaveBeenCalledTimes(2);
+
+    fireEvent.doubleClick(header);
+    fireEvent.doubleClick(cell);
+    expect(handleDoubleClick).toHaveBeenCalledTimes(2);
+
+    fireEvent.keyDown(header, { key: 'Enter', code: 'Enter' });
+    fireEvent.keyDown(cell, { key: 'Enter', code: 'Enter' });
+    expect(handleKeyDown).toHaveBeenCalledTimes(2);
+  });
 });