From 2bad02cc57c226560dc6f1784ad454842c267bd4 Mon Sep 17 00:00:00 2001
From: cahnory <cahnory@gmail.com>
Date: Thu, 19 Oct 2023 10:57:29 +0200
Subject: [PATCH 1/2] fix: typing of ButtonPrimitive ref

- add forwardConditionalRefs utility function
- add composeRefs utility function
---
 .../ButtonPrimitive/ButtonPrimitive.tsx       | 28 ++++-------
 apps/react-sample/src/utils/composeRefs.ts    | 18 +++++++
 .../src/utils/forwardConditionalRefs.ts       | 48 +++++++++++++++++++
 3 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 apps/react-sample/src/utils/composeRefs.ts
 create mode 100644 apps/react-sample/src/utils/forwardConditionalRefs.ts

diff --git a/apps/react-sample/src/components/primitives/ButtonPrimitive/ButtonPrimitive.tsx b/apps/react-sample/src/components/primitives/ButtonPrimitive/ButtonPrimitive.tsx
index cac3cff..e4dbfcd 100644
--- a/apps/react-sample/src/components/primitives/ButtonPrimitive/ButtonPrimitive.tsx
+++ b/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">;
-};
+});
diff --git a/apps/react-sample/src/utils/composeRefs.ts b/apps/react-sample/src/utils/composeRefs.ts
new file mode 100644
index 0000000..8a618c7
--- /dev/null
+++ b/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;
+      }
+    });
+  };
diff --git a/apps/react-sample/src/utils/forwardConditionalRefs.ts b/apps/react-sample/src/utils/forwardConditionalRefs.ts
new file mode 100644
index 0000000..dfd2ab3
--- /dev/null
+++ b/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[],
+>(
+  cb: (
+    props: ForwardConditionalRefProps<CP>,
+    ref: ForwardedRef<ForwardConditionalRefRefs<CP>>,
+  ) => ReactNode,
+) =>
+  forwardRef<ForwardConditionalRefRefs<CP>, ForwardConditionalRefProps<CP>>(
+    cb,
+  ) as ForwardConditionalRefComponent<CP>;

From f6d52ee6fd2df55ad6f3ff4edf2babc08f0ece3e Mon Sep 17 00:00:00 2001
From: cahnory <cahnory@gmail.com>
Date: Thu, 19 Oct 2023 22:58:18 +0200
Subject: [PATCH 2/2] refactor: rename forwardConditionalRef param

---
 apps/react-sample/src/utils/forwardConditionalRefs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/react-sample/src/utils/forwardConditionalRefs.ts b/apps/react-sample/src/utils/forwardConditionalRefs.ts
index dfd2ab3..3e0707e 100644
--- a/apps/react-sample/src/utils/forwardConditionalRefs.ts
+++ b/apps/react-sample/src/utils/forwardConditionalRefs.ts
@@ -38,11 +38,11 @@ type ForwardConditionalRefComponent<T extends ForwardConditionalRefVariant[]> =
 export const forwardConditionalRef = <
   CP extends ForwardConditionalRefVariant[],
 >(
-  cb: (
+  render: (
     props: ForwardConditionalRefProps<CP>,
     ref: ForwardedRef<ForwardConditionalRefRefs<CP>>,
   ) => ReactNode,
 ) =>
   forwardRef<ForwardConditionalRefRefs<CP>, ForwardConditionalRefProps<CP>>(
-    cb,
+    render,
   ) as ForwardConditionalRefComponent<CP>;