diff --git a/src/components/Table.tsx b/src/components/Table.tsx index f1ad30cb..e741004e 100644 --- a/src/components/Table.tsx +++ b/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( ({ className, ...props }, ref) => { const classes = `${className || ''} responsiveTable`; diff --git a/src/components/Tbody.tsx b/src/components/Tbody.tsx index 490f9db4..ebece5df 100644 --- a/src/components/Tbody.tsx +++ b/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 ; } export default Tbody; diff --git a/src/components/Thead.tsx b/src/components/Thead.tsx index 1cdbcddc..bd9cfe42 100644 --- a/src/components/Thead.tsx +++ b/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) { +function Thead(props: TheadProps) { const { children } = props; return ( diff --git a/src/components/Tr.tsx b/src/components/Tr.tsx index f19bc11e..75ead73f 100644 --- a/src/components/Tr.tsx +++ b/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) { diff --git a/src/components/TrInner.tsx b/src/components/TrInner.tsx index 94ed2a3a..1641afa6 100644 --- a/src/components/TrInner.tsx +++ b/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 & { +type TrInnerProps = TrProps & { headers: string[]; }; diff --git a/src/types/index.ts b/src/types/index.ts index 18b4e6e5..dfdec79b 100644 --- a/src/types/index.ts +++ b/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; +export type TbodyProps = OmitProps & HTMLAttributes; +export type TableProps = OmitProps & TableHTMLAttributes; +export type TheadProps = OmitProps & HTMLAttributes; diff --git a/test/index.test.tsx b/test/index.test.tsx index 49a183f2..b88c6955 100644 --- a/test/index.test.tsx +++ b/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( + + + + + + + + + + + + + +
+ Header 1 + Header 2
+ Cell 1 + Cell 2
+ ); + + 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); + }); });