fix: typing of ButtonPrimitive ref

apps/react-sample/src/components/primitives/ButtonPrimitive/ButtonPrimitive.tsx

@@ -1,32 +1,20 @@
-import type { ComponentProps, ForwardedRef, ReactElement } from "react";
+import type { ComponentPropsWithoutRef } from "react";
 
-import { forwardRef } from "react";
+import { forwardConditionalRef } from "../../../utils/forwardConditionalRefs";
 
-type AnchorRef = ForwardedRef<HTMLAnchorElement | undefined>;
-type ButtonRef = ForwardedRef<HTMLButtonElement | undefined>;
-type MixedRef = ForwardedRef<HTMLAnchorElement & HTMLButtonElement>;
-
-type AnchorProps = Omit<ComponentProps<"a">, "ref"> & {
+type AnchorProps = Omit<ComponentPropsWithoutRef<"a">, "href"> & {
   href: string;
-  ref?: AnchorRef | MixedRef | undefined;
 };
-type ButtonProps = Omit<ComponentProps<"button">, "ref"> & {
+type ButtonProps = ComponentPropsWithoutRef<"button"> & {
   href?: undefined;
-  ref?: ButtonRef | MixedRef | undefined;
 };
 
-type ButtonPrimitiveProps = AnchorProps | ButtonProps;
-
-export const ButtonPrimitive = forwardRef<
-  HTMLAnchorElement & HTMLButtonElement,
-  ButtonPrimitiveProps
->(function renderButtonPrimitive(props, ref) {
+export const ButtonPrimitive = forwardConditionalRef<
+  [[HTMLAnchorElement, AnchorProps], [HTMLButtonElement, ButtonProps]]
+>(function ButtonPrimitiveForwardedRef(props, ref) {
   return props.href === undefined ? (
     <button {...props} ref={ref} />
   ) : (
     <a {...props} ref={ref} />
   );
-}) as {
-  (props: AnchorProps): ReactElement<AnchorProps, "a">;
-  (props: ButtonProps): ReactElement<ButtonProps, "button">;
-};
+});

apps/react-sample/src/utils/composeRefs.ts

@@ -0,0 +1,18 @@
+import type { MutableRefObject, Ref, RefObject } from "react";
+
+export type PossibleRef<T> =
+  | Exclude<Ref<T>, RefObject<T>>
+  | MutableRefObject<T>
+  | undefined;
+
+export const composeRefs =
+  <T>(...refs: PossibleRef<T>[]) =>
+  (el: T) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref) {
+        ref.current = el;
+      }
+    });
+  };

apps/react-sample/src/utils/forwardConditionalRefs.ts

@@ -0,0 +1,48 @@
+import {
+  type ForwardRefExoticComponent,
+  type ForwardedRef,
+  type ReactNode,
+  type RefAttributes,
+  forwardRef,
+} from "react";
+
+type ForwardRefComponent<
+  Props,
+  Element extends HTMLElement,
+> = ForwardRefExoticComponent<Props & RefAttributes<Element | undefined>>;
+
+type ForwardConditionalRefVariant<
+  E extends HTMLElement = HTMLElement,
+  P = unknown,
+> = [E, P];
+
+type ForwardConditionalRefProps<T extends ForwardConditionalRefVariant[]> =
+  T extends [[HTMLElement, infer P], ...infer Rest]
+    ? Rest extends [ForwardConditionalRefVariant]
+      ? ForwardConditionalRefProps<Rest> | P
+      : P
+    : never;
+type ForwardConditionalRefRefs<T extends ForwardConditionalRefVariant[]> =
+  T extends [[infer E extends HTMLElement, unknown], ...infer Rest]
+    ? Rest extends [ForwardConditionalRefVariant]
+      ? E & ForwardConditionalRefRefs<Rest>
+      : E
+    : never;
+type ForwardConditionalRefComponent<T extends ForwardConditionalRefVariant[]> =
+  T extends [[infer E extends HTMLElement, infer P], ...infer Rest]
+    ? Rest extends [ForwardConditionalRefVariant]
+      ? ForwardConditionalRefComponent<Rest> & ForwardRefComponent<P, E>
+      : ForwardRefComponent<P, E>
+    : never;
+
+export const forwardConditionalRef = <
+  CP extends ForwardConditionalRefVariant[],
+>(
+  render: (
+    props: ForwardConditionalRefProps<CP>,
+    ref: ForwardedRef<ForwardConditionalRefRefs<CP>>,
+  ) => ReactNode,
+) =>
+  forwardRef<ForwardConditionalRefRefs<CP>, ForwardConditionalRefProps<CP>>(
+    render,
+  ) as ForwardConditionalRefComponent<CP>;