Function useClickableTableRow

site/src/hooks/useClickableTableRow.ts:45–75

({
	role,
	onClick,
	onDoubleClick,
	onMiddleClick,
	onAuxClick: externalOnAuxClick,
}: UseClickableTableRowConfig<TRole>)

	};

export const useClickableTableRow = <
	TRole extends ClickableAriaRole = ClickableAriaRole,
>({
	role,
	onClick,
	onDoubleClick,
	onMiddleClick,
	onAuxClick: externalOnAuxClick,
}: UseClickableTableRowConfig<TRole>): UseClickableTableRowResult<TRole> => {
	const clickableProps = useClickable(onClick, (role ?? "button") as TRole);

	return {
		...clickableProps,
		className: cn([
			"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-secondary",
			"first:rounded-t-md last:rounded-b-md",
		]),
		hover: true,
		onDoubleClick,
		onAuxClick: (event) => {
			// Regardless of which callback gets called, the hook won't stop the event
			// from bubbling further up the DOM
			const isMiddleMouseButton = event.button === 1;
			if (isMiddleMouseButton) {
				onMiddleClick?.(event);
			} else {
				externalOnAuxClick?.(event);
			}
		},
	};
};