@reykjavik/webtools 0.3.7 → 0.3.9

package/CHANGELOG.md

@@ -4,7 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.3.7
+## 0.3.9
+
+_2026-03-16_
+
+- `@reykjavik/webtools/alertsStore/react`:
+  - feat: Add convenience `onLinkClick` parameter to `renderAlertMessage`
+
+## 0.3.7 – 0.3.8
 
 _2026-03-16_
 

package/README.md

@@ -1164,14 +1164,15 @@ import { Toast } from '../components/Toast';
 #### `renderAlertMessage`
 
 **Syntax:**
-`renderAlertMessage(message: AlertInfo['message'], linkComponent?: renderAlertMessage.LinkRenderer): ReactNode`
+`renderAlertMessage(message: AlertInfo['message'], linkComponent?: renderAlertMessage.LinkRenderer, onLinkClick?: (e: MouseEvent) => void): 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.
 
 It renders link objects as simple `<a href="" />` elements, by default, but
-you can optionally provide a custom `linkComponent` as a second parameter.
+you can optionally provide a custom `linkComponent` as a second parameter,
+with an additional `onLinkClick` handler for the links.
 
 Third
 
@@ -1181,18 +1182,11 @@ import Link from 'next/link';
 
 import { AlertInfo } from '../alertsStore';
 
-export const Toast = (props: AlertInfo) => {
-  const dismissOnLinkClick = (e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('a')) {
-      props.dismiss(); // Dismiss the alert when a link is clicked
-    }
-  };
-  return (
-    <div class="toast" onClick={dismissOnLinkClick}>
-      {renderAlertMessage(props.message, Link)}
-    </div>
-  );
-};
+export const Toast = (props: AlertInfo) => (
+  <div class="toast">
+    {renderAlertMessage(props.message, Link, props.dismiss)}
+  </div>
+);
 ```
 
 To build your own custom `LinkComponent`, you can use the
@@ -1209,7 +1203,7 @@ const MyWrappedLink: renderAlertMessage.LinkRenderer = (props) => {
 
 // Then elsewhere in your Alert/Toast component
 <div class="toast__message">
-  {renderAlertMessage(props.message, MyWrappedLink)};
+  {renderAlertMessage(props.message, MyWrappedLink, props.dismiss)};
 </div>;
 ```
 
@@ -1220,7 +1214,7 @@ call `renderAlertMessage`, you can use the
 #### `renderAlertMessage.withLinkRenderer`
 
 **Syntax:**
-`renderAlertMessage.withLinkRenderer(LinkComponent: renderAlertMessage.LinkRenderer): (message: AlertInfo['message']):ReactNode`
+`renderAlertMessage.withLinkRenderer(LinkComponent: renderAlertMessage.LinkRenderer): (message: AlertInfo['message'], onLinkClick?: (e: MouseEvent) => void):ReactNode`
 
 It returns a curried version of [`renderAlertMessage`](#renderAlertMessage)
 that uses the passed `LinkComponent` for rendering links in alert messages.
@@ -1231,7 +1225,7 @@ const curriedRenderAlertMessage =
 
 // Then elsewhere in your Alert/Toast component
 <div class="toast__message">
-  {renderAlertMessage(props.message, MyWrappedLink)};
+  {renderAlertMessage(props.message, props.dismiss)};
 </div>;
 ```
 

package/alertsStore/react.d.ts

@@ -1,6 +1,9 @@
-import React, { ReactNode } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import { AlertMessage } from './index.js';
-type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, _type: string) => void) => () => void;
+type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, meta: {
+    type: string;
+    ids: Array<string>;
+}) => void) => () => void;
 /**
  * Factory function that creates a React subscription hook and a container
  * component linked to a specific alerter store subscibe function.
@@ -21,8 +24,8 @@ export declare const makeReactSubscription: <AlertInfo>(subscribe: SubsScriber<A
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#renderalertmessage
  */
 export declare const renderAlertMessage: {
-    (message: AlertMessage, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode;
-    withLinkRenderer(LinkCompnent: renderAlertMessage.LinkRenderer): (message: AlertMessage) => React.ReactNode;
+    (message: AlertMessage, onLinkClick?: (e: MouseEvent) => void, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode;
+    withLinkRenderer(LinkCompnent: renderAlertMessage.LinkRenderer): (message: AlertMessage, onLinkClick: (e: MouseEvent) => void) => React.ReactNode;
 };
 export declare namespace renderAlertMessage {
     type LinkRendererProps = Omit<Extract<AlertMessage[number], {

package/alertsStore/react.js

@@ -66,7 +66,7 @@ exports.makeReactSubscription = makeReactSubscription;
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#renderalertmessage
  */
 /*#__NO_SIDE_EFFECTS__*/
-const renderAlertMessage = (message, linkComponent) => {
+const renderAlertMessage = (message, onLinkClick, linkComponent) => {
     const Link = linkComponent || 'a';
     return typeof message === 'string'
         ? message
@@ -78,7 +78,7 @@ const renderAlertMessage = (message, linkComponent) => {
                 const { text, tag, ...linkProps } = part;
                 return [
                     ' ',
-                    react_1.default.createElement(Link, { key: i, ...linkProps }, text),
+                    react_1.default.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
             return [' ', react_1.default.createElement(part.tag, { key: i }, part.text)];
@@ -93,4 +93,4 @@ exports.renderAlertMessage = renderAlertMessage;
  */
 /*#__NO_SIDE_EFFECTS__*/
 exports.renderAlertMessage.withLinkRenderer =
-    (LinkCompnent) => (message) => (0, exports.renderAlertMessage)(message, LinkCompnent);
+    (LinkCompnent) => (message, onLinkClick) => (0, exports.renderAlertMessage)(message, onLinkClick, LinkCompnent);

package/esm/alertsStore/react.d.ts

@@ -1,6 +1,9 @@
-import React, { ReactNode } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import { AlertMessage } from './index.js';
-type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, _type: string) => void) => () => void;
+type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, meta: {
+    type: string;
+    ids: Array<string>;
+}) => void) => () => void;
 /**
  * Factory function that creates a React subscription hook and a container
  * component linked to a specific alerter store subscibe function.
@@ -21,8 +24,8 @@ export declare const makeReactSubscription: <AlertInfo>(subscribe: SubsScriber<A
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#renderalertmessage
  */
 export declare const renderAlertMessage: {
-    (message: AlertMessage, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode;
-    withLinkRenderer(LinkCompnent: renderAlertMessage.LinkRenderer): (message: AlertMessage) => React.ReactNode;
+    (message: AlertMessage, onLinkClick?: (e: MouseEvent) => void, linkComponent?: renderAlertMessage.LinkRenderer): ReactNode;
+    withLinkRenderer(LinkCompnent: renderAlertMessage.LinkRenderer): (message: AlertMessage, onLinkClick: (e: MouseEvent) => void) => React.ReactNode;
 };
 export declare namespace renderAlertMessage {
     type LinkRendererProps = Omit<Extract<AlertMessage[number], {

package/esm/alertsStore/react.js

@@ -29,7 +29,7 @@ export const makeReactSubscription = (subscribe) => {
  * @see https://github.com/reykjavikcity/webtools/blob/v0.3/README.md#renderalertmessage
  */
 /*#__NO_SIDE_EFFECTS__*/
-export const renderAlertMessage = (message, linkComponent) => {
+export const renderAlertMessage = (message, onLinkClick, linkComponent) => {
     const Link = linkComponent || 'a';
     return typeof message === 'string'
         ? message
@@ -41,7 +41,7 @@ export const renderAlertMessage = (message, linkComponent) => {
                 const { text, tag, ...linkProps } = part;
                 return [
                     ' ',
-                    React.createElement(Link, { key: i, ...linkProps }, text),
+                    React.createElement(Link, { key: i, ...linkProps, onClick: onLinkClick && ((e) => onLinkClick(e)) }, text),
                 ];
             }
             return [' ', React.createElement(part.tag, { key: i }, part.text)];
@@ -55,4 +55,4 @@ export const renderAlertMessage = (message, linkComponent) => {
  */
 /*#__NO_SIDE_EFFECTS__*/
 renderAlertMessage.withLinkRenderer =
-    (LinkCompnent) => (message) => renderAlertMessage(message, LinkCompnent);
+    (LinkCompnent) => (message, onLinkClick) => renderAlertMessage(message, onLinkClick, LinkCompnent);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/webtools",
-	"version": "0.3.7",
+	"version": "0.3.9",
 	"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",