From 70ca78992a2143caa8bf421843905d5ffa8558fe Mon Sep 17 00:00:00 2001
From: Roman Vyakhirev <roman.vyakhirev@mendix.com>
Date: Thu, 20 Nov 2025 10:14:31 +0100
Subject: [PATCH 1/2] fix: an issue with key prop warning

Co-authored-by: Diljohn Singh <diljohn.chauhan@gmail.com>
Co-authored-by: Andries Smit <mr.andries.smit@gmail.com>
---
 .../pluggableWidgets/html-element-web/CHANGELOG.md     |  4 ++++
 .../html-element-web/src/HTMLElement.tsx               |  8 +++++---
 .../src/components/__tests__/HTMLTag.spec.tsx          | 10 +++++-----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/pluggableWidgets/html-element-web/CHANGELOG.md b/packages/pluggableWidgets/html-element-web/CHANGELOG.md
index 7e41f87bd4..b692bad33f 100644
--- a/packages/pluggableWidgets/html-element-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/html-element-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed a warning related to non-unique "key" props that appeared in certain scenarios.
+
 ## [1.2.2] - 2025-03-14
 
 ### Security
diff --git a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx b/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx
index 10b5874968..a6127628f7 100644
--- a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx
+++ b/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx
@@ -1,4 +1,4 @@
-import { Fragment, JSX, ReactElement } from "react";
+import { Fragment, JSX, ReactElement, useId } from "react";
 
 import { HTMLElementContainerProps } from "../typings/HTMLElementProps";
 import {
@@ -16,15 +16,17 @@ export function HTMLElement(props: HTMLElementContainerProps): ReactElement | nu
     const tag = prepareTag(props.tagName, props.tagNameCustom);
     const items = props.tagUseRepeat ? props.tagContentRepeatDataSource?.items : [undefined];
 
+    const id = useId();
+
     if (!items?.length) {
         return null;
     }
 
     return (
         <Fragment>
-            {items.map(item => (
+            {items.map((item, index) => (
                 <HTMLTag
-                    key={item?.id}
+                    key={`${id}_${item?.id || index}`}
                     tagName={tag as keyof JSX.IntrinsicElements}
                     attributes={{
                         ...prepareAttributes(createAttributeResolver(item), props.attributes, props.class, props.style),
diff --git a/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx b/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx
index 9cfb1b9b6e..839d38a6c5 100644
--- a/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx
+++ b/packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx
@@ -37,7 +37,7 @@ describe("HTMLTag", () => {
     });
 
     it("with innerHTML apply html sanitizing", () => {
-        const checkSapshot = (html: string): void => {
+        const checkSnapshot = (html: string): void => {
             expect(
                 render(
                     <HTMLTag
@@ -53,10 +53,10 @@ describe("HTMLTag", () => {
             ).toMatchSnapshot();
         };
 
-        checkSapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
-        checkSapshot("<img src=x onerror=alert(1)>");
-        checkSapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
-        checkSapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
+        checkSnapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
+        checkSnapshot("<img src=x onerror=alert(1)>");
+        checkSnapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
+        checkSnapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
     });
 
     it("fires events", async () => {

From b67282feef4c39c07174554db104ef3884e77369 Mon Sep 17 00:00:00 2001
From: Roman Vyakhirev <roman.vyakhirev@mendix.com>
Date: Thu, 20 Nov 2025 10:17:19 +0100
Subject: [PATCH 2/2] chore: bump to dompurify 3.3.0

---
 .../html-element-web/package.json             |  2 +-
 .../rich-text-web/package.json                |  2 +-
 pnpm-lock.yaml                                | 20 ++++---------------
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/packages/pluggableWidgets/html-element-web/package.json b/packages/pluggableWidgets/html-element-web/package.json
index f62b156e95..6b48712ea8 100644
--- a/packages/pluggableWidgets/html-element-web/package.json
+++ b/packages/pluggableWidgets/html-element-web/package.json
@@ -42,7 +42,7 @@
     },
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
-        "dompurify": "^3.2.6"
+        "dompurify": "^3.3.0"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
diff --git a/packages/pluggableWidgets/rich-text-web/package.json b/packages/pluggableWidgets/rich-text-web/package.json
index fffecb02c9..fb0671ab70 100644
--- a/packages/pluggableWidgets/rich-text-web/package.json
+++ b/packages/pluggableWidgets/rich-text-web/package.json
@@ -50,7 +50,7 @@
         "@uiw/codemirror-theme-github": "^4.23.13",
         "@uiw/react-codemirror": "^4.23.13",
         "classnames": "^2.5.1",
-        "dompurify": "^3.2.6",
+        "dompurify": "^3.3.0",
         "js-beautify": "^1.15.4",
         "katex": "^0.16.22",
         "linkifyjs": "^4.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7774b684ae..e6981e9324 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1668,7 +1668,7 @@ importers:
         specifier: workspace:*
         version: link:../../shared/widget-plugin-component-kit
       dompurify:
-        specifier: ^3.2.6
+        specifier: ^3.3.0
         version: 3.3.0
     devDependencies:
       '@mendix/automation-utils':
@@ -2139,7 +2139,7 @@ importers:
         specifier: ^2.5.1
         version: 2.5.1
       dompurify:
-        specifier: ^3.2.6
+        specifier: ^3.3.0
         version: 3.3.0
       js-beautify:
         specifier: ^1.15.4
@@ -12483,7 +12483,7 @@ snapshots:
       identity-obj-proxy: 3.0.0
       jasmine: 3.99.0
       jasmine-core: 3.99.1
-      jest: 29.7.0(@types/node@22.14.1)
+      jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
       jest-environment-jsdom: 29.7.0
       jest-jasmine2: 29.7.0
       jest-junit: 13.2.0
@@ -17026,18 +17026,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@29.7.0(@types/node@22.14.1):
-    dependencies:
-      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
-      '@jest/types': 29.6.3
-      import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
-    transitivePeerDependencies:
-      - '@types/node'
-      - babel-plugin-macros
-      - supports-color
-      - ts-node
-
   jest@29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3)):
     dependencies:
       '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
@@ -19904,7 +19892,7 @@ snapshots:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
       handlebars: 4.7.8
-      jest: 29.7.0(@types/node@22.14.1)
+      jest: 29.7.0(@types/node@22.14.1)(ts-node@10.9.2(@swc/core@1.13.5)(@types/node@22.14.1)(typescript@5.9.3))
       json5: 2.2.3
       lodash.memoize: 4.1.2
       make-error: 1.3.6