diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts index 5f1e1d7692..562e1c0cac 100644 --- a/site/src/hooks/useClickableTableRow.ts +++ b/site/src/hooks/useClickableTableRow.ts @@ -13,8 +13,7 @@ * It might not make sense to test this hook until the underlying design * problems are fixed. */ -import type { TableRowProps } from "@mui/material/TableRow"; -import type { MouseEventHandler } from "react"; +import type { HTMLAttributes, MouseEventHandler } from "react"; import { cn } from "#/utils/cn"; import { type ClickableAriaRole, @@ -22,27 +21,26 @@ import { useClickable, } from "./useClickable"; +type TableRowClickHandlers = Pick< + HTMLAttributes, + "onClick" | "onDoubleClick" | "onAuxClick" +>; + type UseClickableTableRowResult< TRole extends ClickableAriaRole = ClickableAriaRole, > = UseClickableResult & - TableRowProps & { + TableRowClickHandlers & { className: string; hover: true; onAuxClick: MouseEventHandler; }; -// Awkward type definition (the hover preview in VS Code isn't great, either), -// but this basically extracts all click props from TableRowProps, but makes -// onClick required, and adds additional optional props (notably onMiddleClick) -type UseClickableTableRowConfig = { - [Key in keyof TableRowProps as Key extends `on${string}Click` - ? Key - : never]: UseClickableTableRowResult[Key]; -} & { - role?: TRole; - onClick: MouseEventHandler; - onMiddleClick?: MouseEventHandler; -}; +type UseClickableTableRowConfig = + TableRowClickHandlers & { + role?: TRole; + onClick: MouseEventHandler; + onMiddleClick?: MouseEventHandler; + }; export const useClickableTableRow = < TRole extends ClickableAriaRole = ClickableAriaRole,