Function createReactComponent

packages/base/src/createReactComponent.ts:29–55

(klass: T)

 * const ReactButton = createReactComponent(Button);
 */
export default function createReactComponent<T extends typeof UI5Element>(klass: T) {
	const tag = klass.getMetadata().getTag();

	return function Component(props: InstanceType<T>["_jsxProps"]) {
		const patchedProps: Record<string, unknown> = {};

		Object.entries(props as Record<string, unknown>).forEach(([key, value]) => {
			if (key.startsWith("on") && typeof value === "function") {
				// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,
				// hiding CustomEvent.detail under nativeEvent.detail.
				// Patch all event handlers to restore detail from nativeEvent.
				const originalHandler = value;
				patchedProps[key] = (e: Event) => {
					const nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;
					if (nativeDetail !== undefined) {
						(e as unknown as { detail: unknown }).detail = nativeDetail;
					}
					originalHandler(e);
				};
			} else {
				patchedProps[key] = value;
			}
		});

		return createElement(tag, patchedProps);
	};
}