feat: support auxiliary clicks

.changeset/flat-coins-unite.md

@@ -0,0 +1,5 @@
+---
+"@timhettler/radix-card": minor
+---
+
+Support auxiliary clicks, i.e. clicking with the middle mouse button to open the link in a new tab

lib/src/Card.tsx

@@ -33,14 +33,20 @@ interface CardProps extends PrimitiveDivProps {}
 const Card = React.forwardRef<CardElement, CardProps>(
   (props: ScopedProps<CardProps>, forwardedRef) => {
     const { __scopeCard, ...cardProps } = props;
-    const { targetRef, handleRedundantClick } = useRedundantClick();
+    const { targetRef, handleRedundantClick, handleAuxiliaryClick } =
+      useRedundantClick();
     const [targetHasFocus, setTargetHasFocus] = React.useState<"" | null>(null);
 
     const handleClick = composeEventHandlers(
       props.onClick,
       handleRedundantClick
     );
 
+    const handleAuxClick = composeEventHandlers(
+      props.onAuxClick,
+      handleAuxiliaryClick
+    );
+
     const handleFocus = composeEventHandlers(props.onFocus, (event) => {
       setTargetHasFocus(event.target === targetRef.current ? "" : null);
     });
@@ -59,6 +65,7 @@ const Card = React.forwardRef<CardElement, CardProps>(
           {...cardProps}
           ref={forwardedRef}
           onClick={handleClick}
+          onAuxClick={handleAuxClick}
           onFocus={handleFocus}
           onBlur={handleBlur}
           data-target-focused={targetHasFocus}

lib/src/useRedundantClick.ts

@@ -38,9 +38,19 @@ const useRedundantClick = <T extends HTMLElement = HTMLElement>() => {
     targetRef.current.dispatchEvent(newEvent);
   };
 
+  // Add to the container element
+  const handleAuxiliaryClick = (event: React.MouseEvent) => {
+    if (event.button !== 1) {
+      return;
+    }
+
+    handleRedundantClick(event);
+  };
+
   return {
     targetRef,
     handleRedundantClick,
+    handleAuxiliaryClick,
   };
 };