chore: Adds internal use-merge-refs util

src/internal/index.ts

@@ -37,3 +37,4 @@ export { isFocusable, getAllFocusables, getFirstFocusable, getLastFocusable } fr
 export { default as handleKey } from './utils/handle-key';
 export { default as circleIndex } from './utils/circle-index';
 export { default as Portal, PortalProps } from './portal';
+export { useMergeRefs } from './use-merge-refs';

src/internal/use-merge-refs/__tests__/use-merge-refs.test.tsx

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useMergeRefs } from '../index';
+
+const DemoNull = React.forwardRef((props, ref) => {
+  const mergedRef = useMergeRefs(null, ref, undefined);
+  return (
+    <>
+      <div ref={mergedRef} className="target"></div>
+    </>
+  );
+});
+
+const Demo = React.forwardRef((props, ref) => {
+  const ref2 = React.createRef<HTMLDivElement>();
+  const mergedRef = useMergeRefs(ref, ref2);
+  return (
+    <>
+      <div ref={mergedRef} className="target"></div>
+    </>
+  );
+});
+
+describe('use merge refs', function () {
+  it('does not cause component to crash when all refs are null or undefined', () => {
+    render(<DemoNull ref={null} />);
+    expect(document.querySelector('.target')).not.toBe(null);
+  });
+
+  it('merges ref with null refs', () => {
+    const ref1 = React.createRef<HTMLDivElement>();
+    render(<DemoNull ref={ref1} />);
+    expect(ref1.current!.classList).toContain('target');
+  });
+
+  it('merges two refs', () => {
+    const ref1 = React.createRef<HTMLDivElement>();
+    render(<Demo ref={ref1} />);
+    expect(ref1.current!.classList).toContain('target');
+  });
+
+  it('ref callback has been called', () => {
+    const ref1 = jest.fn();
+    render(<Demo ref={ref1} />);
+    expect(ref1).toHaveBeenCalledTimes(1);
+    expect(ref1).toHaveBeenCalledWith(expect.objectContaining({ className: 'target' }));
+  });
+});

src/internal/use-merge-refs/index.tsx

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useMemo } from 'react';
+
+/**
+ * useMergeRefs merges multiple refs into single ref callback.
+ *
+ * For example
+ *  const mergedRef = useMergeRefs(ref1, ref2, ref3)
+ *  <div ref={refs}>...</div>
+ */
+export function useMergeRefs<T = any>(
+  ...refs: Array<React.RefCallback<T> | React.MutableRefObject<T> | null | undefined>
+): React.RefCallback<T> | null {
+  return useMemo(() => {
+    if (refs.every(ref => ref === null || ref === undefined)) {
+      return null;
+    }
+    return (value: T | null) => {
+      refs.forEach(ref => {
+        if (typeof ref === 'function') {
+          ref(value);
+        } else if (ref !== null && ref !== undefined) {
+          (ref as React.MutableRefObject<any>).current = value;
+        }
+      });
+    };
+    // ESLint expects an array literal which we can not provide here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}