@ui5/webcomponents-base 2.20.0 → 2.20.2

package/dist/react18/createReactComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactComponent.js","sourceRoot":"","sources":["../../src/react18/createReactComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * React wrapper factory for UI5 Web Components.\n *\n * This lightweight factory creates typed React components that wrap UI5 Web Components.\n * It handles:\n * - Event prop conversion (onXxx → ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: The function supports react >= 18.\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport * as React from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n\tuseRef,\n\tuseEffect,\n\tforwardRef,\n} from \"react\";\nimport type UI5Element from \"../UI5Element.js\";\n\ntype EventHandler<E = Event> = (event: E) => void;\n\n// Interface for UI5 Web Component classes with _jsxProps support\ninterface UI5ComponentClass<T extends UI5Element = UI5Element> {\n\tnew (): T;\n\tgetMetadata(): {\n\t\tgetTag(): string;\n\t};\n}\n\n// Helper to convert event name\nconst toEventName = (propName: string): string => {\n\treturn propName\n\t\t.slice(2) // Remove \"on\"\n\t\t.replace(/([A-Z])/g, (match: string, letter: string, index: number): string => {\n\t\t\treturn index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`;\n\t\t});\n};\n\n// Helper to create cleanup function for event listener\nconst createEventCleanup = (element: UI5Element, eventName: string, handler: EventHandler): (() => void) => {\n\telement.addEventListener(eventName, handler);\n\treturn () => element.removeEventListener(eventName, handler);\n};\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\n * Uses the component's _jsxProps type for full TypeScript support.\n *\n * @param ComponentClass - The UI5 Web Component class (e.g., Button from \"@ui5/webcomponents/dist/Button.js\")\n * @returns A React component that renders the custom element with proper TypeScript types\n * @since 2.21.0\n * @example\n * import Button from \"@ui5/webcomponents/dist/Button.js\";\n * const ReactButton = createReactComponent(Button);\n * // ReactButton props are typed based on Button's _jsxProps\n */\nfunction createReactComponent<T extends UI5Element>(\n\tComponentClass: UI5ComponentClass<T>,\n): React.ForwardRefExoticComponent<\n\tReact.PropsWithoutRef<T[\"_jsxProps\"] & { children?: ReactNode }> & React.RefAttributes<T>\n> {\n\tconst tagName = ComponentClass.getMetadata().getTag();\n\n\tconst Component = forwardRef<T, T[\"_jsxProps\"] & { children?: ReactNode }>((props, ref) => {\n\t\tconst { children, ...restProps } = props;\n\t\tconst elementRef = useRef<T>(null);\n\n\t\t// Forward ref\n\t\tuseEffect(() => {\n\t\t\tif (ref) {\n\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\tref(elementRef.current);\n\t\t\t\t} else {\n\t\t\t\t\tref.current = elementRef.current;\n\t\t\t\t}\n\t\t\t}\n\t\t}, [ref]);\n\n\t\t// Handle event props and boolean props imperatively\n\t\tuseEffect(() => {\n\t\t\tconst element = elementRef.current;\n\t\t\tif (!element) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst eventCleanups: Array<() => void> = [];\n\n\t\t\tObject.keys(restProps).forEach(propName => {\n\t\t\t\tconst propValue = (restProps as Record<string, unknown>)[propName];\n\t\t\t\tif (propName.startsWith(\"on\") && typeof propValue === \"function\") {\n\t\t\t\t\t// Convert React event naming (onClick, onSelectionChange) to DOM event naming\n\t\t\t\t\t// onClick -> click, onSelectionChange -> selection-change\n\t\t\t\t\tconst eventName = toEventName(propName);\n\t\t\t\t\tconst handler = propValue as EventHandler;\n\t\t\t\t\teventCleanups.push(createEventCleanup(element, eventName, handler));\n\t\t\t\t} else if (typeof propValue === \"boolean\") {\n\t\t\t\t\t// React 18 sets false booleans as empty string attributes on custom elements.\n\t\t\t\t\t// Set as property directly to avoid this.\n\t\t\t\t\t(element as any)[propName] = propValue;\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\teventCleanups.forEach(cleanup => cleanup());\n\t\t\t};\n\t\t}, [restProps]);\n\n\t\t// Filter out event handlers and booleans from DOM props\n\t\tconst domProps: Record<string, unknown> = {};\n\t\tObject.keys(restProps).forEach(propName => {\n\t\t\tconst propValue = (restProps as Record<string, unknown>)[propName];\n\t\t\tif (propName.startsWith(\"on\") && typeof propValue === \"function\") { return; }\n\t\t\tif (typeof propValue === \"boolean\") { return; } // handled in useEffect\n\t\t\t// className → class for React compatibility\n\t\t\tif (propName === \"className\") {\n\t\t\t\t// eslint-disable-next-line dot-notation\n\t\t\t\tdomProps[\"class\"] = propValue;\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// Convert camelCase to kebab-case for HTML attributes\n\t\t\tconst attrName = propName.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\t\t\tdomProps[attrName] = propValue;\n\t\t});\n\n\t\treturn React.createElement(tagName, { ref: elementRef, ...domProps }, children);\n\t});\n\n\tComponent.displayName = tagName\n\t\t.split(\"-\")\n\t\t.map(part => part.charAt(0).toUpperCase() + part.slice(1))\n\t\t.join(\"\");\n\n\treturn Component;\n}\n\nexport default createReactComponent;\n"]}

package/dist/sap/base/Log.js

@@ -1,9 +1,8 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
-import BaseConfig from "./config.js";
 import now from "./util/now.js";
 /**
  * A Logging API for JavaScript.
@@ -202,8 +201,8 @@ function getLogEntryListenerInstance() {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -225,8 +224,8 @@ Log.fatal = function (sMessage, vDetails, sComponent, fnSupportInfo) {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -248,8 +247,8 @@ Log.error = function (sMessage, vDetails, sComponent, fnSupportInfo) {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -271,8 +270,8 @@ Log.warning = function (sMessage, vDetails, sComponent, fnSupportInfo) {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -294,8 +293,8 @@ Log.info = function (sMessage, vDetails, sComponent, fnSupportInfo) {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -317,8 +316,8 @@ Log.debug = function (sMessage, vDetails, sComponent, fnSupportInfo) {
  *   Name of the component that produced the log entry
  * @param {function} [fnSupportInfo]
  *   Callback that returns an additional support object to be logged in support mode.
- *   This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @public
@@ -418,8 +417,8 @@ Log.logSupportInfo = function (bEnabled) {
  * @param {string} [sComponent]
  *   The log component under which the message should be logged
  * @param {function} [fnSupportInfo] Callback that returns an additional support object to be
- *   logged in support mode. This function is only called if support info mode is turned on with
- *   <code>logSupportInfo(true)</code>. To avoid negative effects regarding execution times and
+ *   logged in support mode. This function is only called if support info mode is turned on via
+ *   the Support Assistant. To avoid negative effects regarding execution times and
  *   memory consumption, the returned object should be a simple immutable JSON object with mostly
  *   static and stable content.
  * @returns {module:sap/base/Log.Entry}
@@ -734,17 +733,4 @@ Log.getLogger = function (sComponent, iDefaultLogLevel) {
   }
   return new Logger(sComponent);
 };
-
-// set LogLevel
-const sLogLevel = BaseConfig.get({
-  name: "sapUiLogLevel",
-  type: BaseConfig.Type.String,
-  defaultValue: undefined,
-  external: true
-});
-if (sLogLevel) {
-  Log.setLevel(Log.Level[sLogLevel.toUpperCase()] || parseInt(sLogLevel));
-} else if (!globalThis["sap-ui-optimized"]) {
-  Log.setLevel(Log.Level.DEBUG);
-}
 export default Log;

package/dist/sap/base/assert.js

@@ -19,7 +19,7 @@
  *
  */ /*!
      * OpenUI5
-     * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+     * (c) Copyright 2026 SAP SE or an SAP affiliate company.
      * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
      */
 

package/dist/sap/base/config/MemoryConfigurationProvider.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 import uid from "../util/uid.js";

package/dist/sap/base/security/URLListValidator.js

@@ -1,11 +1,11 @@
 // validation regexes
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-var rBasicUrl = /^(?:([^:\/?#]+):)?((?:[\/\\]{2,}((?:\[[^\]]+\]|[^\/?#:]+))(?::([0-9]+))?)?([^?#]*))(?:\?([^#]*))?(?:#(.*))?$/;
+var rBasicUrl = /^(?:([^:\/?#]+):)?((?:[\/\\]{2,}(?:(?:[^@\/?#]*@)?(\[[^\]]+\]|[^\/?#:]+)(?::([0-9]+))?)?)?([^?#]*))(?:\?([^#]*))?(?:#(.*))?$/;
 var rCheckPath = /^([a-z0-9-._~!$&'()*+,;=:@]|%[0-9a-f]{2})*$/i;
 var rCheckQuery = /^([a-z0-9-._~!$&'()*+,;=:@\/?]|%[0-9a-f]{2})*$/i;
 var rCheckFragment = rCheckQuery;
@@ -104,7 +104,8 @@ oURLListValidator.clear = function () {
  * @param {string} [protocol] The protocol of the URL, can be falsy to allow all protocols for an entry e.g. "", "http", "mailto"
  * @param {string} [host] The host of the URL, can be falsy to allow all hosts. A wildcard asterisk can be set at the beginning, e.g. "examples.com", "*.example.com"
  * @param {string} [port] The port of the URL, can be falsy to allow all ports, e.g. "", "8080"
- * @param {string} [path] the path of the URL, path of the url, can be falsy to allow all paths. A wildcard asterisk can be set at the end, e.g. "/my-example*", "/my-news"
+ * @param {string} [path] the path of the URL, e.g. "/my-news". Can be falsy to allow all paths. A wildcard asterisk can be set at the end to ensure a path starts with the given string, e.g. "/my-example*".
+ * 	When using wildcards, make sure to only provide normalized URLs to the validate function in order to mitigate the risk of path traversal attacks.
  * @public
  */
 oURLListValidator.add = function (protocol, host, port, path) {
@@ -139,13 +140,16 @@ oURLListValidator.entries = function () {
  * Validates a URL. Check if it's not a script or other security issue.
  *
  * <b>Note</b>:
- * It is strongly recommended to validate only absolute URLs. There's almost no case
+ * It is strongly recommended to validate only absolute, normalized URLs. There's almost no case
  * where checking only the path of a URL would allow to ensure its validity.
- * For compatibility reasons, this API cannot automatically resolve URLs relative to
+ * For compatibility reasons, this API does not normalize URLs and cannot automatically resolve URLs relative to
  * <code>document.baseURI</code>, but callers should do so. In that case, and when the
  * allow list is not empty, an entry for the origin of <code>document.baseURI</code>
  * must be added to the allow list.
  *
+ * Any measures to mitigate path traversal or similar attack vectors must be taken by the caller, e.g. by using the
+ * {@link https://developer.mozilla.org/docs/Web/API/URL URL} API to normalize the URL beforehand.
+ *
  * <h3>Details</h3>
  * Splits the given URL into components and checks for allowed characters according to RFC 3986:
  *

package/dist/sap/base/security/encodeCSS.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 import toHex from "../strings/toHex.js";

package/dist/sap/base/security/encodeXML.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 import toHex from "../strings/toHex.js";

package/dist/sap/base/security/sanitizeHTML.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 /*

package/dist/sap/base/strings/toHex.js

@@ -15,7 +15,7 @@
  * @returns {string} padded hex representation of the given character code
  */ /*!
      * OpenUI5
-     * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+     * (c) Copyright 2026 SAP SE or an SAP affiliate company.
      * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
      */
 /*

package/dist/sap/base/util/now.js

@@ -1,9 +1,6 @@
-// @evo-todo window.performance does not exist on node.js, but there is a module performance-now. Maybe use it
-
 /**
- * Returns a high resolution timestamp in microseconds if supported by the environment, otherwise in milliseconds.
- * The timestamp is based on 01/01/1970 00:00:00 (UNIX epoch) as float with microsecond precision or
- * with millisecond precision, if high resolution timestamps are not available.
+ * Returns a high resolution timestamp in microseconds.
+ * The timestamp is based on 01/01/1970 00:00:00 (UNIX epoch) as float with microsecond precision.
  * The fractional part of the timestamp represents fractions of a millisecond.
  * Converting to a <code>Date</code> is possible by using <code>require(["sap/base/util/now"], function(now){new Date(now());}</code>
  *
@@ -11,18 +8,15 @@
  * @since 1.58
  * @public
  * @alias module:sap/base/util/now
- * @returns {float} timestamp in microseconds if supported by the environment otherwise in milliseconds
+ * @returns {float} timestamp in microseconds
  */ /*!
      * OpenUI5
-     * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+     * (c) Copyright 2026 SAP SE or an SAP affiliate company.
      * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
      */
 /*global performance */
 
-var fnNow = !(typeof window != "undefined" && window.performance && performance.now && performance.timing) ? Date.now : function () {
-  var iNavigationStart = performance.timing.navigationStart;
-  return function perfnow() {
-    return iNavigationStart + performance.now();
-  };
-}();
+var fnNow = function now() {
+  return performance.timeOrigin + performance.now();
+};
 export default fnNow;

package/dist/sap/base/util/uid.js

@@ -4,7 +4,7 @@
  * @private
  */ /*!
      * OpenUI5
-     * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+     * (c) Copyright 2026 SAP SE or an SAP affiliate company.
      * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
      */
 

package/dist/sap/ui/thirdparty/caja-html-sanitizer.js

@@ -118,7 +118,11 @@ var cssSchema = (function () {
         'inset' ], [ 'invert' ], [ 'justify' ], [ 'local' ], [ 'medium' ], [
         'mix' ], [ 'none' ], [ 'normal' ], [ 'once' ], [ 'repeat' ], [ 'scroll'
       ], [ 'separate' ], [ 'small-caps' ], [ 'spell-out' ], [ 'transparent' ],
-      [ 'visible' ] ];
+      [ 'visible' ],
+      // ##### BEGIN: MODIFIED BY SAP
+      [ 'flex', 'inline-flex', 'grid', 'inline-grid', 'flow-root', 'contents' ], [ 'initial', 'revert', 'revert-layer', 'unset' ]
+      // ##### END: MODIFIED BY SAP
+    ];
     return {
       '-moz-border-radius': {
         'cssExtra': c[ 0 ],
@@ -440,7 +444,9 @@ var cssSchema = (function () {
       },
       'display': {
         'cssPropBits': 32,
-        'cssLitGroup': [ L[ 2 ], L[ 47 ], L[ 54 ] ]
+        // ##### BEGIN: MODIFIED BY SAP
+        'cssLitGroup': [ L[ 2 ], L[ 47 ], L[ 54 ], L[ 64 ], L[ 65 ] ]
+        // ##### END: MODIFIED BY SAP
       },
       'elevation': {
         'cssPropBits': 5,
@@ -707,6 +713,12 @@ var cssSchema = (function () {
         'cssPropBits': 0,
         'cssLitGroup': [ L[ 18 ], L[ 47 ], L[ 54 ] ]
       },
+      // ##### BEGIN: MODIFIED BY SAP
+      'text-decoration-line': {
+        'cssPropBits': 0,
+        'cssLitGroup': [ L[ 18 ], L[ 47 ], L[ 54 ] ]
+      },
+      // ##### END: MODIFIED BY SAP
       'text-indent': {
         'cssPropBits': 5,
         'cssLitGroup': [ L[ 47 ] ]
@@ -2004,7 +2016,7 @@ if (typeof window !== 'undefined') {
 }
 /*!
  * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2026 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 // Based on coding from the HTML4 Sanitizer by Google Inc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -63,10 +63,10 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
-    "@openui5/sap.ui.core": "1.120.17",
+    "@openui5/sap.ui.core": "1.146.0",
     "@sap-theming/theming-base-content": "11.33.0",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.20.0",
+    "@ui5/webcomponents-tools": "2.20.2",
     "clean-css": "^5.2.2",
     "cypress": "15.9.0",
     "mocha": "^11.7.2",
@@ -76,6 +76,14 @@
     "typescript": "^5.6.2",
     "vite": "5.4.21"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "2642c2e61d49914e75d59f48d63576486037ff63"
+  "gitHead": "3a88b2ca0c00cdacda2c8bf1fb6239f1c816ecc4"
 }

package/src/react18/createReactComponent.tsx

@@ -0,0 +1,140 @@
+/**
+ * React wrapper factory for UI5 Web Components.
+ *
+ * This lightweight factory creates typed React components that wrap UI5 Web Components.
+ * It handles:
+ * - Event prop conversion (onXxx → ui5-xxx event listeners)
+ * - Ref forwarding
+ * - Children handling
+ *
+ * Note: The function supports react >= 18.
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+
+import * as React from "react";
+import type { ReactNode } from "react";
+import {
+	useRef,
+	useEffect,
+	forwardRef,
+} from "react";
+import type UI5Element from "../UI5Element.js";
+
+type EventHandler<E = Event> = (event: E) => void;
+
+// Interface for UI5 Web Component classes with _jsxProps support
+interface UI5ComponentClass<T extends UI5Element = UI5Element> {
+	new (): T;
+	getMetadata(): {
+		getTag(): string;
+	};
+}
+
+// Helper to convert event name
+const toEventName = (propName: string): string => {
+	return propName
+		.slice(2) // Remove "on"
+		.replace(/([A-Z])/g, (match: string, letter: string, index: number): string => {
+			return index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`;
+		});
+};
+
+// Helper to create cleanup function for event listener
+const createEventCleanup = (element: UI5Element, eventName: string, handler: EventHandler): (() => void) => {
+	element.addEventListener(eventName, handler);
+	return () => element.removeEventListener(eventName, handler);
+};
+
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ * Uses the component's _jsxProps type for full TypeScript support.
+ *
+ * @param ComponentClass - The UI5 Web Component class (e.g., Button from "@ui5/webcomponents/dist/Button.js")
+ * @returns A React component that renders the custom element with proper TypeScript types
+ * @since 2.21.0
+ * @example
+ * import Button from "@ui5/webcomponents/dist/Button.js";
+ * const ReactButton = createReactComponent(Button);
+ * // ReactButton props are typed based on Button's _jsxProps
+ */
+function createReactComponent<T extends UI5Element>(
+	ComponentClass: UI5ComponentClass<T>,
+): React.ForwardRefExoticComponent<
+	React.PropsWithoutRef<T["_jsxProps"] & { children?: ReactNode }> & React.RefAttributes<T>
+> {
+	const tagName = ComponentClass.getMetadata().getTag();
+
+	const Component = forwardRef<T, T["_jsxProps"] & { children?: ReactNode }>((props, ref) => {
+		const { children, ...restProps } = props;
+		const elementRef = useRef<T>(null);
+
+		// Forward ref
+		useEffect(() => {
+			if (ref) {
+				if (typeof ref === "function") {
+					ref(elementRef.current);
+				} else {
+					ref.current = elementRef.current;
+				}
+			}
+		}, [ref]);
+
+		// Handle event props and boolean props imperatively
+		useEffect(() => {
+			const element = elementRef.current;
+			if (!element) {
+				return;
+			}
+
+			const eventCleanups: Array<() => void> = [];
+
+			Object.keys(restProps).forEach(propName => {
+				const propValue = (restProps as Record<string, unknown>)[propName];
+				if (propName.startsWith("on") && typeof propValue === "function") {
+					// Convert React event naming (onClick, onSelectionChange) to DOM event naming
+					// onClick -> click, onSelectionChange -> selection-change
+					const eventName = toEventName(propName);
+					const handler = propValue as EventHandler;
+					eventCleanups.push(createEventCleanup(element, eventName, handler));
+				} else if (typeof propValue === "boolean") {
+					// React 18 sets false booleans as empty string attributes on custom elements.
+					// Set as property directly to avoid this.
+					(element as any)[propName] = propValue;
+				}
+			});
+
+			return () => {
+				eventCleanups.forEach(cleanup => cleanup());
+			};
+		}, [restProps]);
+
+		// Filter out event handlers and booleans from DOM props
+		const domProps: Record<string, unknown> = {};
+		Object.keys(restProps).forEach(propName => {
+			const propValue = (restProps as Record<string, unknown>)[propName];
+			if (propName.startsWith("on") && typeof propValue === "function") { return; }
+			if (typeof propValue === "boolean") { return; } // handled in useEffect
+			// className → class for React compatibility
+			if (propName === "className") {
+				// eslint-disable-next-line dot-notation
+				domProps["class"] = propValue;
+				return;
+			}
+			// Convert camelCase to kebab-case for HTML attributes
+			const attrName = propName.replace(/([A-Z])/g, "-$1").toLowerCase();
+			domProps[attrName] = propValue;
+		});
+
+		return React.createElement(tagName, { ref: elementRef, ...domProps }, children);
+	});
+
+	Component.displayName = tagName
+		.split("-")
+		.map(part => part.charAt(0).toUpperCase() + part.slice(1))
+		.join("");
+
+	return Component;
+}
+
+export default createReactComponent;