feat: update to UI5 Web Components v2.16.1 (#7911)

Author: Lukas742

.storybook/custom-element-manifests/ai.json

@@ -1,5 +1,5 @@
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal';
-import { useMemo } from 'react';
+import { useMemo, useRef, useState, useTransition } from 'react';
 // @ts-expect-error: storybook can handle this
 import cemAi from './custom-element-manifests/ai.json';
 // @ts-expect-error: storybook can handle this
@@ -85,3 +85,79 @@ export function useGetSubComponentsOfModule(moduleName: string, tags: string[])
     return findSubComponentsRecursively(moduleName, cem);
   }, [cem, moduleName]);
 }
+
+type StartStreamOptions = {
+  text: string;
+  onComplete?: (fullText: string) => void;
+  onProcessingComplete?: () => void;
+};
+export function useFakeStream(typingDelay = 10, startingDelay = 1500) {
+  const [value, setValue] = useState('');
+  const [transitionIsPending, startTransition] = useTransition(); // active character updates
+  const [isProcessing, setIsProcessing] = useState(false); // starting delay
+  const [isTyping, setIsTyping] = useState(false); // actively typing characters
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const startStream = ({ text, onComplete, onProcessingComplete }: StartStreamOptions) => {
+    // Stop previous stream and timeout
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    setValue('');
+    setIsProcessing(true);
+
+    timeoutRef.current = setTimeout(() => {
+      setIsProcessing(false);
+
+      if (onProcessingComplete) {
+        onProcessingComplete();
+      }
+
+      setIsTyping(true);
+      let index = 0;
+
+      intervalRef.current = setInterval(() => {
+        if (index < text.length) {
+          const nextChar = text[index];
+          index++;
+
+          startTransition(() => {
+            setValue((prev) => prev + nextChar);
+          });
+        } else {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          setIsTyping(false);
+
+          if (onComplete) {
+            onComplete(text);
+          }
+        }
+      }, typingDelay);
+    }, startingDelay);
+  };
+
+  const stopStream = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsProcessing(false);
+    setIsTyping(false);
+  };
+
+  return { value, transitionIsPending, isProcessing, isTyping, setValue, startStream, stopStream };
+}

.storybook/custom-element-manifests/fiori.json

@@ -57,5 +57,6 @@
   "2.12.0": "2.12.0",
   "2.13.1": "2.13.0",
   "2.14.0": "2.14.0",
-  "2.15.0": "2.15.0"
+  "2.15.0": "2.15.0",
+  "2.16.0": "2.16.1"
 }

.storybook/custom-element-manifests/main.json

@@ -21,7 +21,7 @@
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",
     "lint": "eslint .",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
-    "wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents",
+    "wrappers:main": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName '@ui5/webcomponents' --out ./packages/main/src/webComponents",
     "wrappers:fiori": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents",
     "wrappers:compat": "WITH_WEB_COMPONENT_DOCS_LINK='true' WITH_WEB_COMPONENT_IMPORT_PATH='@ui5/webcomponents-react-base/withWebComponent' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components && prettier --log-level silent --write ./packages/compat/src/components",
     "wrappers:ai": "WITH_WEB_COMPONENT_DOCS_LINK='true' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-ai --out ./packages/ai/src/components && prettier --log-level silent --write ./packages/ai/src/components",
@@ -40,11 +40,11 @@
     "@storybook/addon-a11y": "9.1.16",
     "@storybook/addon-docs": "9.1.16",
     "@storybook/react-vite": "9.1.16",
-    "@ui5/webcomponents": "2.15.1",
-    "@ui5/webcomponents-ai": "2.15.1",
-    "@ui5/webcomponents-compat": "2.15.1",
-    "@ui5/webcomponents-fiori": "2.15.1",
-    "@ui5/webcomponents-icons": "2.15.1",
+    "@ui5/webcomponents": "2.16.1",
+    "@ui5/webcomponents-ai": "2.16.1",
+    "@ui5/webcomponents-compat": "2.16.1",
+    "@ui5/webcomponents-fiori": "2.16.1",
+    "@ui5/webcomponents-icons": "2.16.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "remark-gfm": "4.0.1",
@@ -66,7 +66,7 @@
     "@types/node": "24.9.2",
     "@types/react": "19.1.17",
     "@types/react-dom": "19.1.11",
-    "@ui5/webcomponents-tools": "2.15.1",
+    "@ui5/webcomponents-tools": "2.16.1",
     "@vitejs/plugin-react": "5.0.4",
     "chromatic": "13.2.1",
     "cssnano": "7.1.2",

.storybook/utils.ts

@@ -26,6 +26,14 @@
     "./PromptInput": {
       "types": "./dist/components/PromptInput/index.d.ts",
       "default": "./dist/components/PromptInput/index.js"
+    },
+    "./Input": {
+      "types": "./dist/components/Input/index.d.ts",
+      "default": "./dist/components/Input/index.js"
+    },
+    "./TextArea": {
+      "types": "./dist/components/TextArea/index.d.ts",
+      "default": "./dist/components/TextArea/index.js"
     }
   },
   "homepage": "https://ui5.github.io/webcomponents-react",
@@ -45,7 +53,7 @@
     "@ui5/webcomponents-react-base": "workspace:~"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-ai": "~2.15.0",
+    "@ui5/webcomponents-ai": "~2.16.1",
     "react": "^18 || ^19"
   },
   "publishConfig": {