refactor: rewrite ClickListener (#18962)

Author: adamalston

packages/react/src/components/OverflowMenu/OverflowMenu.tsx

@@ -10,14 +10,14 @@ import React, {
   cloneElement,
   forwardRef,
   isValidElement,
-  KeyboardEvent,
-  MouseEvent,
   useCallback,
   useContext,
   useEffect,
   useRef,
   useState,
   type ElementType,
+  type KeyboardEvent,
+  type MouseEvent,
   type ReactElement,
   type ReactNode,
   type Ref,
@@ -26,7 +26,7 @@ import { OverflowMenuVertical } from '@carbon/icons-react';
 import classNames from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
-import ClickListener from '../../internal/ClickListener';
+import { ClickListener } from '../../internal/ClickListener';
 import {
   DIRECTION_BOTTOM,
   DIRECTION_TOP,
@@ -369,11 +369,12 @@ export const OverflowMenu = forwardRef<HTMLButtonElement, OverflowMenuProps>(
       }
     };
 
-    const handleClickOutside = (evt: MouseEvent<Document>) => {
+    const handleClickOutside = (evt: globalThis.MouseEvent) => {
       if (
         open &&
         (!menuBodyRef.current ||
-          !menuBodyRef.current.contains(evt.target as Node))
+          (evt.target instanceof Node &&
+            !menuBodyRef.current.contains(evt.target)))
       ) {
         closeMenu();
       }

packages/react/src/internal/ClickListener.js

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  cloneElement,
+  useEffect,
+  useRef,
+  type ReactElement,
+} from 'react';
+
+interface ClickListenerProps {
+  children: ReactElement;
+  onClickOutside: (event: MouseEvent) => void;
+}
+
+export const ClickListener = ({
+  children,
+  onClickOutside,
+}: ClickListenerProps) => {
+  const elementRef = useRef<HTMLElement | null>(null);
+
+  const getEventTarget = (event: MouseEvent) => {
+    if (event.composed && typeof event.composedPath === 'function') {
+      return event.composedPath()[0];
+    }
+
+    return event.target;
+  };
+
+  const handleDocumentClick = (event: MouseEvent) => {
+    if (elementRef.current?.contains) {
+      const eventTarget = getEventTarget(event);
+
+      if (
+        eventTarget instanceof Node &&
+        !elementRef.current.contains(eventTarget)
+      ) {
+        onClickOutside(event);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [onClickOutside]);
+
+  const handleRef = (el: HTMLElement | null) => {
+    elementRef.current = el;
+
+    if ('ref' in children && typeof children.ref === 'function') {
+      children.ref(el);
+    }
+  };
+
+  return cloneElement(children, { ref: handleRef });
+};

packages/react/src/internal/ClickListener.ts

@@ -1,26 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import ClickListener from '../ClickListener';
-
 import { render } from '@testing-library/react';
+import React, { forwardRef } from 'react';
+import { ClickListener } from '../ClickListener';
 
 describe('ClickListener', () => {
   let onClickOutside;
-  let handleRefSpy;
 
   beforeEach(() => {
     onClickOutside = jest.fn();
-    handleRefSpy = jest.spyOn(ClickListener.prototype, 'handleRef');
-  });
-
-  afterEach(() => {
-    handleRefSpy.mockRestore();
   });
 
   describe('renders as expected - Component API', () => {
@@ -56,17 +49,14 @@ describe('ClickListener', () => {
 
     it('should not overwrite any children function refs', () => {
       const mockRef = jest.fn();
-      class Child extends React.Component {
-        render() {
-          return <div />;
-        }
-      }
+      const Child = forwardRef((props, ref) => <div ref={ref} {...props} />);
+
       render(
         <ClickListener onClickOutside={onClickOutside}>
           <Child ref={mockRef} />
         </ClickListener>
       );
-      expect(handleRefSpy).toHaveBeenCalledTimes(1);
+
       expect(mockRef).toHaveBeenCalledTimes(1);
     });
   });