From 51ac35cc640fd3c14d742718a1fd8f2a7206915f Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Thu, 16 Apr 2026 22:05:53 +1000
Subject: [PATCH] fix: remove mui dependency on `useClickableTableRow()`
 (#24373)

This pull-request ensures that we don't rely on MUI for something that
doesn't need to be MUI-specific (hurrah!)

The issues with the accessibility persist however.
---
 site/src/hooks/useClickableTableRow.ts | 28 ++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

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<HTMLTableRowElement>,
+	"onClick" | "onDoubleClick" | "onAuxClick"
+>;
+
 type UseClickableTableRowResult<
 	TRole extends ClickableAriaRole = ClickableAriaRole,
 > = UseClickableResult<HTMLTableRowElement, TRole> &
-	TableRowProps & {
+	TableRowClickHandlers & {
 		className: string;
 		hover: true;
 		onAuxClick: MouseEventHandler<HTMLTableRowElement>;
 	};
 
-// 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<TRole extends ClickableAriaRole> = {
-	[Key in keyof TableRowProps as Key extends `on${string}Click`
-		? Key
-		: never]: UseClickableTableRowResult<TRole>[Key];
-} & {
-	role?: TRole;
-	onClick: MouseEventHandler<HTMLTableRowElement>;
-	onMiddleClick?: MouseEventHandler<HTMLTableRowElement>;
-};
+type UseClickableTableRowConfig<TRole extends ClickableAriaRole> =
+	TableRowClickHandlers & {
+		role?: TRole;
+		onClick: MouseEventHandler<HTMLTableRowElement>;
+		onMiddleClick?: MouseEventHandler<HTMLTableRowElement>;
+	};
 
 export const useClickableTableRow = <
 	TRole extends ClickableAriaRole = ClickableAriaRole,