[@mantine/hooks] Support ref cleanup function in React 19 with useMergedRef

packages/@mantine/hooks/src/use-merged-ref/use-merged-ref.test.tsx

@@ -19,4 +19,69 @@ describe('@mantine/hook/use-merged-ref', () => {
     expect(fnRefValue! instanceof HTMLButtonElement).toBe(true);
     expect(objectRef.current instanceof HTMLButtonElement).toBe(true);
   });
+
+  it('when ref callback does not return a function, ref callback is called with null on unmount', () => {
+    const refCalled: unknown[] = [];
+
+    const fnRef = (node: HTMLButtonElement | null) => {
+      refCalled.push(node);
+    };
+
+    const { unmount } = render(<TestComponent refs={[fnRef]} />);
+    expect(refCalled).toEqual([expect.any(HTMLButtonElement)]);
+
+    unmount();
+    expect(refCalled).toEqual([expect.any(HTMLButtonElement), null]);
+  });
+
+  describe('react 18', () => {
+    it('when ref callback returns a function, ref callback is called with null on unmount', () => {
+      const refCalled: unknown[] = [];
+      const cleanupCalled: unknown[] = [];
+
+      const fnRef = (node: HTMLButtonElement | null) => {
+        refCalled.push(node);
+        return () => {
+          cleanupCalled.push(node);
+        };
+      };
+
+      const { unmount } = render(<TestComponent refs={[fnRef]} />);
+      expect(refCalled).toEqual([expect.any(HTMLButtonElement)]);
+      expect(cleanupCalled).toEqual([]);
+
+      unmount();
+      expect(refCalled).toEqual([expect.any(HTMLButtonElement), null]);
+      expect(cleanupCalled).toEqual([]);
+    });
+
+    it('when ref callbacks that return a function and those that do not are mixed, each behaves accordingly', () => {
+      const refCalled: unknown[] = [];
+      const cleanupCalled: unknown[] = [];
+
+      const fnRef = (node: HTMLButtonElement | null) => {
+        refCalled.push(node);
+        return () => {
+          cleanupCalled.push(node);
+        };
+      };
+
+      const ref2Called: unknown[] = [];
+      const fnRef2 = (node: HTMLButtonElement | null) => {
+        ref2Called.push(node);
+      };
+
+      const { unmount } = render(<TestComponent refs={[fnRef, fnRef2]} />);
+
+      expect(refCalled).toEqual([expect.any(HTMLButtonElement)]);
+      expect(ref2Called).toEqual([expect.any(HTMLButtonElement)]);
+      expect(cleanupCalled).toEqual([]);
+
+      unmount();
+
+      expect(refCalled).toEqual([expect.any(HTMLButtonElement), null]);
+      expect(ref2Called).toEqual([expect.any(HTMLButtonElement), null]);
+      expect(cleanupCalled).toEqual([]);
+    });
+  });
 });

packages/@mantine/hooks/src/use-merged-ref/use-merged-ref.ts

@@ -1,18 +1,41 @@
-import { Ref, useCallback } from 'react';
+import { Ref, useCallback, type RefCallback } from 'react';
 
 type PossibleRef<T> = Ref<T> | undefined;
 
-export function assignRef<T>(ref: PossibleRef<T>, value: T) {
+type RefCleanup<T> = ReturnType<RefCallback<T>>;
+
+export function assignRef<T>(ref: PossibleRef<T>, value: T): RefCleanup<T> {
   if (typeof ref === 'function') {
-    ref(value);
+    return ref(value);
   } else if (typeof ref === 'object' && ref !== null && 'current' in ref) {
-    (ref as React.MutableRefObject<T>).current = value;
+    ref.current = value;
   }
 }
 
 export function mergeRefs<T>(...refs: PossibleRef<T>[]) {
+  const cleanupMap = new Map<PossibleRef<T>, Exclude<RefCleanup<T>, void>>();
+
   return (node: T | null) => {
-    refs.forEach((ref) => assignRef(ref, node));
+    refs.forEach((ref) => {
+      const cleanup = assignRef(ref, node);
+      if (cleanup) {
+        cleanupMap.set(ref, cleanup);
+      }
+    });
+
+    if (cleanupMap.size > 0) {
+      return () => {
+        refs.forEach((ref) => {
+          const cleanup = cleanupMap.get(ref);
+          if (cleanup) {
+            cleanup();
+          } else {
+            assignRef(ref, null);
+          }
+        });
+        cleanupMap.clear();
+      };
+    }
   };
 }