@ui5/webcomponents-base 2.20.0 → 2.20.1

package/dist/createReactComponent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @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);
+ */
+export default function createReactComponent<T extends typeof UI5Element>(klass: T): (props: InstanceType<T>["_jsxProps"]) => import("react").DOMElement<Record<string, unknown>, Element>;

package/dist/createReactComponent.js

@@ -0,0 +1,51 @@
+/**
+ * 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: Supports React >=19.
+ *
+ * Note: This is for documentation samples only - for production React apps,
+ * use the official @ui5/webcomponents-react library.
+ */
+import { createElement } from "react";
+/**
+ * Creates a React component wrapper for a UI5 Web Component.
+ *
+ * @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);
+ */
+export default function createReactComponent(klass) {
+    const tag = klass.getMetadata().getTag();
+    return function Component(props) {
+        const patchedProps = {};
+        Object.entries(props).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) => {
+                    const nativeDetail = e.nativeEvent?.detail;
+                    if (nativeDetail !== undefined) {
+                        e.detail = nativeDetail;
+                    }
+                    originalHandler(e);
+                };
+            }
+            else {
+                patchedProps[key] = value;
+            }
+        });
+        return createElement(tag, patchedProps);
+    };
+}
+//# sourceMappingURL=createReactComponent.js.map

package/dist/createReactComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createReactComponent.js","sourceRoot":"","sources":["../src/createReactComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAA8B,KAAQ;IACjF,MAAM,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC;IAEzC,OAAO,SAAS,SAAS,CAAC,KAAmC;QAC5D,MAAM,YAAY,GAA4B,EAAE,CAAC;QAEjD,MAAM,CAAC,OAAO,CAAC,KAAgC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YACzE,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;gBACzD,4EAA4E;gBAC5E,sDAAsD;gBACtD,+DAA+D;gBAC/D,MAAM,eAAe,GAAG,KAAK,CAAC;gBAC9B,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAQ,EAAE,EAAE;oBAChC,MAAM,YAAY,GAAI,CAAsD,CAAC,WAAW,EAAE,MAAM,CAAC;oBACjG,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;wBAC/B,CAAoC,CAAC,MAAM,GAAG,YAAY,CAAC;oBAC7D,CAAC;oBACD,eAAe,CAAC,CAAC,CAAC,CAAC;gBACpB,CAAC,CAAC;YACH,CAAC;iBAAM,CAAC;gBACP,YAAY,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YAC3B,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IACzC,CAAC,CAAC;AACH,CAAC","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: Supports React >=19.\n *\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport { createElement } from \"react\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\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 */\nexport default function createReactComponent<T extends typeof UI5Element>(klass: T) {\n\tconst tag = klass.getMetadata().getTag();\n\n\treturn function Component(props: InstanceType<T>[\"_jsxProps\"]) {\n\t\tconst patchedProps: Record<string, unknown> = {};\n\n\t\tObject.entries(props as Record<string, unknown>).forEach(([key, value]) => {\n\t\t\tif (key.startsWith(\"on\") && typeof value === \"function\") {\n\t\t\t\t// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,\n\t\t\t\t// hiding CustomEvent.detail under nativeEvent.detail.\n\t\t\t\t// Patch all event handlers to restore detail from nativeEvent.\n\t\t\t\tconst originalHandler = value;\n\t\t\t\tpatchedProps[key] = (e: Event) => {\n\t\t\t\t\tconst nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;\n\t\t\t\t\tif (nativeDetail !== undefined) {\n\t\t\t\t\t\t(e as unknown as { detail: unknown }).detail = nativeDetail;\n\t\t\t\t\t}\n\t\t\t\t\toriginalHandler(e);\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tpatchedProps[key] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn createElement(tag, patchedProps);\n\t};\n}\n"]}

package/dist/custom-elements-internal.json

@@ -842,6 +842,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/createReactComponent.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "createReactComponent",
+            "module": "dist/createReactComponent.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/decorators.js",

package/dist/custom-elements.json

@@ -827,6 +827,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/createReactComponent.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "createReactComponent",
+            "module": "dist/createReactComponent.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/decorators.js",

package/dist/generated/VersionInfo.js

@@ -1,11 +1,11 @@
 const VersionInfo = {
-    version: "2.20.0",
+    version: "2.20.1",
     major: 2,
     minor: 20,
-    patch: 0,
+    patch: 1,
     suffix: "",
     isNext: false,
-    buildTime: 1772704608,
+    buildTime: 1773431170,
 };
 export default VersionInfo;
 //# sourceMappingURL=VersionInfo.js.map

package/dist/generated/VersionInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"VersionInfo.js","sourceRoot":"","sources":["../../src/generated/VersionInfo.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG;IACnB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,UAAU;CACrB,CAAC;AACF,eAAe,WAAW,CAAC","sourcesContent":["const VersionInfo = {\n\tversion: \"2.20.0\",\n\tmajor: 2,\n\tminor: 20,\n\tpatch: 0,\n\tsuffix: \"\",\n\tisNext: false,\n\tbuildTime: 1772704608,\n};\nexport default VersionInfo;"]}
+{"version":3,"file":"VersionInfo.js","sourceRoot":"","sources":["../../src/generated/VersionInfo.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG;IACnB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,UAAU;CACrB,CAAC;AACF,eAAe,WAAW,CAAC","sourcesContent":["const VersionInfo = {\n\tversion: \"2.20.1\",\n\tmajor: 2,\n\tminor: 20,\n\tpatch: 1,\n\tsuffix: \"\",\n\tisNext: false,\n\tbuildTime: 1773431170,\n};\nexport default VersionInfo;"]}

package/dist/prod/createReactComponent.js

@@ -0,0 +1,2 @@
+"use strict";import{createElement as d}from"react";export default function p(i){const s=i.getMetadata().getTag();return function(r){const n={};return Object.entries(r).forEach(([t,e])=>{if(t.startsWith("on")&&typeof e=="function"){const c=e;n[t]=o=>{const a=o.nativeEvent?.detail;a!==void 0&&(o.detail=a),c(o)}}else n[t]=e}),d(s,n)}}
+//# sourceMappingURL=createReactComponent.js.map

package/dist/prod/createReactComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/createReactComponent.ts"],
+  "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 \u2192 ui5-xxx event listeners)\n * - Ref forwarding\n * - Children handling\n *\n * Note: Supports React >=19.\n *\n * Note: This is for documentation samples only - for production React apps,\n * use the official @ui5/webcomponents-react library.\n */\n\nimport { createElement } from \"react\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * Creates a React component wrapper for a UI5 Web Component.\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 */\nexport default function createReactComponent<T extends typeof UI5Element>(klass: T) {\n\tconst tag = klass.getMetadata().getTag();\n\n\treturn function Component(props: InstanceType<T>[\"_jsxProps\"]) {\n\t\tconst patchedProps: Record<string, unknown> = {};\n\n\t\tObject.entries(props as Record<string, unknown>).forEach(([key, value]) => {\n\t\t\tif (key.startsWith(\"on\") && typeof value === \"function\") {\n\t\t\t\t// React 19 wraps DOM events (change, click, input, etc.) in SyntheticEvent,\n\t\t\t\t// hiding CustomEvent.detail under nativeEvent.detail.\n\t\t\t\t// Patch all event handlers to restore detail from nativeEvent.\n\t\t\t\tconst originalHandler = value;\n\t\t\t\tpatchedProps[key] = (e: Event) => {\n\t\t\t\t\tconst nativeDetail = (e as unknown as { nativeEvent?: { detail: unknown } }).nativeEvent?.detail;\n\t\t\t\t\tif (nativeDetail !== undefined) {\n\t\t\t\t\t\t(e as unknown as { detail: unknown }).detail = nativeDetail;\n\t\t\t\t\t}\n\t\t\t\t\toriginalHandler(e);\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tpatchedProps[key] = value;\n\t\t\t}\n\t\t});\n\n\t\treturn createElement(tag, patchedProps);\n\t};\n}\n"],
+  "mappings": "aAeA,OAAS,iBAAAA,MAAqB,QAa9B,wBAAwBC,EAAkDC,EAAU,CACnF,MAAMC,EAAMD,EAAM,YAAY,EAAE,OAAO,EAEvC,OAAO,SAAmBE,EAAqC,CAC9D,MAAMC,EAAwC,CAAC,EAE/C,cAAO,QAAQD,CAAgC,EAAE,QAAQ,CAAC,CAACE,EAAKC,CAAK,IAAM,CAC1E,GAAID,EAAI,WAAW,IAAI,GAAK,OAAOC,GAAU,WAAY,CAIxD,MAAMC,EAAkBD,EACxBF,EAAaC,CAAG,EAAKG,GAAa,CACjC,MAAMC,EAAgBD,EAAuD,aAAa,OACtFC,IAAiB,SACnBD,EAAqC,OAASC,GAEhDF,EAAgBC,CAAC,CAClB,CACD,MACCJ,EAAaC,CAAG,EAAIC,CAEtB,CAAC,EAEMP,EAAcG,EAAKE,CAAY,CACvC,CACD",
+  "names": ["createElement", "createReactComponent", "klass", "tag", "props", "patchedProps", "key", "value", "originalHandler", "e", "nativeDetail"]
+}

package/dist/prod/generated/VersionInfo.js

@@ -1,2 +1,2 @@
-"use strict";const e={version:"2.20.0",major:2,minor:20,patch:0,suffix:"",isNext:!1,buildTime:1772704608};export default e;
+"use strict";const e={version:"2.20.1",major:2,minor:20,patch:1,suffix:"",isNext:!1,buildTime:1773431170};export default e;
 //# sourceMappingURL=VersionInfo.js.map

package/dist/prod/generated/VersionInfo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/generated/VersionInfo.ts"],
-  "sourcesContent": ["const VersionInfo = {\n\tversion: \"2.20.0\",\n\tmajor: 2,\n\tminor: 20,\n\tpatch: 0,\n\tsuffix: \"\",\n\tisNext: false,\n\tbuildTime: 1772704608,\n};\nexport default VersionInfo;"],
+  "sourcesContent": ["const VersionInfo = {\n\tversion: \"2.20.1\",\n\tmajor: 2,\n\tminor: 20,\n\tpatch: 1,\n\tsuffix: \"\",\n\tisNext: false,\n\tbuildTime: 1773431170,\n};\nexport default VersionInfo;"],
   "mappings": "aAAA,MAAMA,EAAc,CACnB,QAAS,SACT,MAAO,EACP,MAAO,GACP,MAAO,EACP,OAAQ,GACR,OAAQ,GACR,UAAW,UACZ,EACA,eAAeA",
   "names": ["VersionInfo"]
 }

package/dist/react18/createReactComponent.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 type UI5Element from "../UI5Element.js";
+interface UI5ComponentClass<T extends UI5Element = UI5Element> {
+    new (): T;
+    getMetadata(): {
+        getTag(): string;
+    };
+}
+/**
+ * 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
+ */
+declare function createReactComponent<T extends UI5Element>(ComponentClass: UI5ComponentClass<T>): React.ForwardRefExoticComponent<React.PropsWithoutRef<T["_jsxProps"] & {
+    children?: ReactNode;
+}> & React.RefAttributes<T>>;
+export default createReactComponent;

package/dist/react18/createReactComponent.js

@@ -0,0 +1,112 @@
+/**
+ * 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 { useRef, useEffect, forwardRef, } from "react";
+// Helper to convert event name
+const toEventName = (propName) => {
+    return propName
+        .slice(2) // Remove "on"
+        .replace(/([A-Z])/g, (match, letter, index) => {
+        return index === 0 ? letter.toLowerCase() : `-${letter.toLowerCase()}`;
+    });
+};
+// Helper to create cleanup function for event listener
+const createEventCleanup = (element, eventName, handler) => {
+    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(ComponentClass) {
+    const tagName = ComponentClass.getMetadata().getTag();
+    const Component = forwardRef((props, ref) => {
+        const { children, ...restProps } = props;
+        const elementRef = useRef(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 = [];
+            Object.keys(restProps).forEach(propName => {
+                const propValue = restProps[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;
+                    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[propName] = propValue;
+                }
+            });
+            return () => {
+                eventCleanups.forEach(cleanup => cleanup());
+            };
+        }, [restProps]);
+        // Filter out event handlers and booleans from DOM props
+        const domProps = {};
+        Object.keys(restProps).forEach(propName => {
+            const propValue = restProps[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;
+//# sourceMappingURL=createReactComponent.js.map

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -66,7 +66,7 @@
     "@openui5/sap.ui.core": "1.120.17",
     "@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.1",
     "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": "e99d0cc3b83e5320263a207f7ae3fcd159982e9f"
 }

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;