@reykjavik/webtools 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -4,14 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.3.9
+## 0.3.11
 
 _2026-03-16_
 
 - `@reykjavik/webtools/alertsStore/react`:
-  - feat: Add convenience `onLinkClick` parameter to `renderAlertMessage`
+  - feat: Support rendering `br` and `em` elements in alert messages
 
-## 0.3.7 – 0.3.8
+## 0.3.7 – 0.3.10
 
 _2026-03-16_
 

package/README.md

@@ -1164,15 +1164,17 @@ import { Toast } from '../components/Toast';
 #### `renderAlertMessage`
 
 **Syntax:**
-`renderAlertMessage(message: AlertInfo['message'], linkComponent?: renderAlertMessage.LinkRenderer, onLinkClick?: (e: MouseEvent) => void): ReactNode`
+`renderAlertMessage(message: AlertInfo['message'], onLinkClick?: (e: MouseEvent) => void, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode`
 
 Helper to render an alerter alert message, which can be a simple string or a
-more complex array of strings and objects representing links and rich (bold)
-text formatting.
+more complex array of strings and objects representing links, `br` elements
+and rich (`strong`/`em`) text formatting.
+
+You can optionally pass an additional `onLinkClick` handler as a second
+parameter. (For example the alert's `dismiss` dispatcher.)
 
 It renders link objects as simple `<a href="" />` elements, by default, but
-you can optionally provide a custom `linkComponent` as a second parameter,
-with an additional `onLinkClick` handler for the links.
+you can optionally provide a custom `linkComponent` as a third parameter.
 
 Third
 

package/alertsStore/index.d.ts

@@ -7,7 +7,9 @@ declare const messageSchema: v.UnionSchema<[v.StringSchema<undefined>, v.ArraySc
     readonly hrefLang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly lang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
 }, undefined>, v.ObjectSchema<{
-    readonly tag: v.LiteralSchema<"strong", undefined>;
+    readonly tag: v.LiteralSchema<"br", undefined>;
+}, undefined>, v.ObjectSchema<{
+    readonly tag: v.PicklistSchema<["strong", "em"], undefined>;
     readonly text: v.StringSchema<undefined>;
 }, undefined>], undefined>, undefined>], undefined>;
 export type AlertMessage = v.InferOutput<typeof messageSchema>;

package/alertsStore/index.js

@@ -50,9 +50,13 @@ const messageSchema = v.union([
             hrefLang: v.optional(v.string()),
             lang: v.optional(v.string()),
         }),
+        // line break elements
+        v.object({
+            tag: v.literal('br'),
+        }),
         // strong/bold elements
         v.object({
-            tag: v.literal('strong'),
+            tag: v.picklist(['strong', 'em']),
             text: v.string(),
         }),
     ])),

package/alertsStore/react.d.ts

@@ -31,6 +31,7 @@ export declare namespace renderAlertMessage {
     type LinkRendererProps = Omit<Extract<AlertMessage[number], {
         tag: 'a';
     }>, 'tag' | 'text'> & {
+        onClick?: (e: MouseEvent) => void;
         children: ReactNode;
     };
     export type LinkRenderer = (props: LinkRendererProps) => ReactNode;

package/alertsStore/react.js

@@ -81,6 +81,9 @@ const renderAlertMessage = (message, onLinkClick, linkComponent) => {
                     react_1.default.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
+            if (part.tag === 'br') {
+                return react_1.default.createElement("br", { key: i });
+            }
             return [' ', react_1.default.createElement(part.tag, { key: i }, part.text)];
         });
 };

package/esm/alertsStore/index.d.ts

@@ -7,7 +7,9 @@ declare const messageSchema: v.UnionSchema<[v.StringSchema<undefined>, v.ArraySc
     readonly hrefLang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
     readonly lang: v.OptionalSchema<v.StringSchema<undefined>, undefined>;
 }, undefined>, v.ObjectSchema<{
-    readonly tag: v.LiteralSchema<"strong", undefined>;
+    readonly tag: v.LiteralSchema<"br", undefined>;
+}, undefined>, v.ObjectSchema<{
+    readonly tag: v.PicklistSchema<["strong", "em"], undefined>;
     readonly text: v.StringSchema<undefined>;
 }, undefined>], undefined>, undefined>], undefined>;
 export type AlertMessage = v.InferOutput<typeof messageSchema>;

package/esm/alertsStore/index.js

@@ -14,9 +14,13 @@ const messageSchema = v.union([
             hrefLang: v.optional(v.string()),
             lang: v.optional(v.string()),
         }),
+        // line break elements
+        v.object({
+            tag: v.literal('br'),
+        }),
         // strong/bold elements
         v.object({
-            tag: v.literal('strong'),
+            tag: v.picklist(['strong', 'em']),
             text: v.string(),
         }),
     ])),

package/esm/alertsStore/react.d.ts

@@ -31,6 +31,7 @@ export declare namespace renderAlertMessage {
     type LinkRendererProps = Omit<Extract<AlertMessage[number], {
         tag: 'a';
     }>, 'tag' | 'text'> & {
+        onClick?: (e: MouseEvent) => void;
         children: ReactNode;
     };
     export type LinkRenderer = (props: LinkRendererProps) => ReactNode;

package/esm/alertsStore/react.js

@@ -44,6 +44,9 @@ export const renderAlertMessage = (message, onLinkClick, linkComponent) => {
                     React.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
+            if (part.tag === 'br') {
+                return React.createElement("br", { key: i });
+            }
             return [' ', React.createElement(part.tag, { key: i }, part.text)];
         });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.3.9",
+	"version": "0.3.11",
 	"description": "Misc. JS/TS helpers used by Reykjavík City's web dev teams.",
 	"main": "index.js",
 	"repository": "ssh://git@github.com:reykjavikcity/webtools.git",