@brandup/ui-kit 1.0.44 → 1.0.45

package/package.json

@@ -25,11 +25,11 @@
   },
   "type": "module",
   "license": "Apache-2.0",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui-app": "^2.0.7"
+    "@brandup/ui-app": "^2.0.9"
   },
   "files": [
     "source",

package/source/index.ts

@@ -9,6 +9,7 @@ export const SCROLLABLE_CLASS = "ui-scrollable";
 
 export { default as Modal, MODAL_CLASS, MODAL_OPENED_CLASS, MODAL_CLOSE_COMMAND, type ModalOptions } from "./modal";
 export { IS_TOUCH_DEVICE } from "./utils/compatibility";
+export { textTag } from "./utils/text";
 import "./styles.less";
 
 export const uiKitMiddlewareFactory = () => new UiKitMiddleware();

package/source/modal.ts

@@ -1,6 +1,7 @@
 import "./modal.less"; // стили окна
 
 import { DOM, UIElement } from "@brandup/ui";
+import { textTag } from "./utils/text";
 import closeIcon from "../svg/x.svg";
 
 export const MODAL_CLASS = "ui-modal";
@@ -53,7 +54,8 @@ export default abstract class Modal extends UIElement {
 			),
 			DOM.tag("div", { class: "modal-window", role: "dialog", "aria-modal": "true" }, [
 				DOM.tag("div", { class: "modal-header" }, [
-					options.title ? DOM.tag("div", { class: "modal-title" }, options.title) : null,
+					// the title is host data — text, not markup (see textTag)
+					options.title ? textTag("div", { class: "modal-title" }, options.title) : null,
 					DOM.tag(
 						"button",
 						{ type: "button", class: "modal-close", title: "Закрыть", command: MODAL_CLOSE_COMMAND },

package/source/utils/text.ts

@@ -0,0 +1,20 @@
+import { DOM, type ElementOptions } from "@brandup/ui";
+
+/**
+ * Creates an element holding `text` as text, never as markup.
+ *
+ * A string child of `DOM.tag` is inserted as HTML — that is how svg icons reach buttons. Anything
+ * coming from the user or from the host markup (message text, variable names and keys, window
+ * titles) must go through here instead: otherwise an `<img onerror>` typed into a field would
+ * execute once it is shown back.
+ */
+export function textTag<T extends keyof HTMLElementTagNameMap>(
+	tagName: T,
+	options: ElementOptions | null,
+	text: string
+): HTMLElementTagNameMap[T] {
+	const elem = DOM.tag(tagName, options);
+	elem.textContent = text;
+
+	return elem;
+}