feat: support React 19 and update focusout event mapping to onBlur 👌 (#97)

* fix(refs): add support for react19 (#96)

* fix: use ref directly in react19

* fix: add console

* fix: react19 support

* fix: focus out should call onBlur 🫠

* fix: pass down props

Author: ooade

package-lock.json

@@ -1,4 +1,5 @@
 import React, {
+	Ref,
 	useRef,
 	useEffect,
 	RefCallback,
@@ -25,19 +26,36 @@ interface Props extends HTMLAttributes<HTMLElement> {
 const eventTypeMapping = {
 	click: 'onClick',
 	focusin: 'onFocus',
-	focusout: 'onFocus',
+	focusout: 'onBlur',
 	mousedown: 'onMouseDown',
 	mouseup: 'onMouseUp',
 	touchstart: 'onTouchStart',
 	touchend: 'onTouchEnd'
 };
 
+const reactMajorVersion = parseInt(React.version.split('.')[0], 10);
+
+const mergeRefs = <T extends any>(
+	refs: Array<Ref<T> | undefined | null>
+): RefCallback<T> => {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (typeof ref === 'function') {
+				ref(value);
+			} else if (ref != null) {
+				(ref as MutableRefObject<T | null>).current = value;
+			}
+		});
+	};
+};
+
 const ClickAwayListener: FunctionComponent<Props> = ({
 	children,
 	onClickAway,
 	focusEvent = 'focusin',
 	mouseEvent = 'click',
-	touchEvent = 'touchend'
+	touchEvent = 'touchend',
+	...rest
 }) => {
 	const node = useRef<HTMLElement | null>(null);
 	const bubbledEventTarget = useRef<EventTarget | null>(null);
@@ -69,19 +87,17 @@ const ClickAwayListener: FunctionComponent<Props> = ({
 			}
 		};
 
-	const handleChildRef = (childRef: HTMLElement) => {
-		node.current = childRef;
+	let childRef: React.Ref<any> | null = null;
 
-		let { ref } = children as typeof children & {
-			ref: RefCallback<HTMLElement> | MutableRefObject<HTMLElement>;
-		};
+	// For React 19+, we get the ref via props.ref
+	if (reactMajorVersion >= 19) {
+		childRef = children.props?.ref || null;
+	} else if ('ref' in children) {
+		childRef = (children as any).ref;
+	}
 
-		if (typeof ref === 'function') {
-			ref(childRef);
-		} else if (ref) {
-			ref.current = childRef;
-		}
-	};
+	// Create a combined ref handler
+	const combinedRef = mergeRefs([node, childRef]);
 
 	useEffect(() => {
 		const nodeDocument = node.current?.ownerDocument ?? document;
@@ -117,10 +133,11 @@ const ClickAwayListener: FunctionComponent<Props> = ({
 
 	return React.Children.only(
 		cloneElement(children as ReactElement<any>, {
-			ref: handleChildRef,
+			ref: combinedRef,
 			[mappedFocusEvent]: handleBubbledEvents(mappedFocusEvent),
 			[mappedMouseEvent]: handleBubbledEvents(mappedMouseEvent),
-			[mappedTouchEvent]: handleBubbledEvents(mappedTouchEvent)
+			[mappedTouchEvent]: handleBubbledEvents(mappedTouchEvent),
+			...rest
 		})
 	);
 };