@reykjavik/webtools 0.3.8 → 0.3.10

package/CHANGELOG.md

@@ -4,19 +4,19 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.3.8
+## 0.3.10
 
 _2026-03-16_
 
-- `@reykjavik/webtools/alertsStore/react`
-  - fix: Wrong parameter type signature for `makeReactSubscription`
+- `@reykjavik/webtools/alertsStore/react`:
+  - fix: Add missing `onClick` prop to `LinkRendererProps`
 
-## 0.3.7
+## 0.3.7 – 0.3.9
 
 _2026-03-16_
 
 - feat: Add `@reykjavik/webtools/alertsStore` for toasts and other global UI
-  feedback messages along with `@reykjavik/webtools/alertsStore/react` helpers
+  feedback messages along with helpers
 
 ## 0.3.6
 

package/README.md

@@ -1164,14 +1164,17 @@ import { Toast } from '../components/Toast';
 #### `renderAlertMessage`
 
 **Syntax:**
-`renderAlertMessage(message: AlertInfo['message'], linkComponent?: renderAlertMessage.LinkRenderer): 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.
 
+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.
+you can optionally provide a custom `linkComponent` as a third parameter.
 
 Third
 
@@ -1181,18 +1184,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 +1205,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 +1216,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 +1227,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,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import { AlertMessage } from './index.js';
 type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, meta: {
     type: string;
@@ -24,13 +24,14 @@ 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], {
         tag: 'a';
     }>, 'tag' | 'text'> & {
+        onClick?: (e: MouseEvent) => void;
         children: ReactNode;
     };
     export type LinkRenderer = (props: LinkRendererProps) => ReactNode;

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,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import { AlertMessage } from './index.js';
 type SubsScriber<AlertInfo> = (callback: (alerts: Array<AlertInfo>, meta: {
     type: string;
@@ -24,13 +24,14 @@ 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], {
         tag: 'a';
     }>, 'tag' | 'text'> & {
+        onClick?: (e: MouseEvent) => void;
         children: ReactNode;
     };
     export type LinkRenderer = (props: LinkRendererProps) => ReactNode;

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.8",
+	"version": "0.3.10",
 	"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",