Function useClickable

site/src/hooks/useClickable.ts:38–74

(
	onClick: MouseEventHandler<TElement>,
	role?: TRole,
)

 * buttons.
 */
export const useClickable = <
	TElement extends ClickableElement,
	TRole extends ClickableAriaRole = ClickableAriaRole,
>(
	onClick: MouseEventHandler<TElement>,
	role?: TRole,
): UseClickableResult<TElement, TRole> => {
	const ref = useRef<TElement>(null);

	return {
		ref,
		onClick,
		tabIndex: 0,
		role: (role ?? "button") as TRole,

		/*
		 * Native buttons are programmed to handle both space and enter, but they're
		 * each handled via different event handlers.
		 *
		 * 99% of the time, you shouldn't be able to tell the difference, but one
		 * edge case behavior is that holding down Enter will continually fire
		 * events, while holding down Space won't fire anything until you let go.
		 */
		onKeyDown: (event) => {
			if (event.key === "Enter") {
				ref.current?.click();
				event.stopPropagation();
			}
		},
		onKeyUp: (event) => {
			if (event.key === " ") {
				ref.current?.click();
				event.stopPropagation();
			}
		},
	};
};