@canonical/react-components 2.12.0 → 2.14.0

package/dist/components/NotificationProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { NotificationConsumer, NotificationProvider, useNotify, } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
+export { info, success, failure, caution, queue } from "./messageBuilder";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./types";

package/dist/components/NotificationProvider/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "NotificationProvider", {
     return _NotificationProvider.NotificationProvider;
   }
 });
+Object.defineProperty(exports, "caution", {
+  enumerable: true,
+  get: function () {
+    return _messageBuilder.caution;
+  }
+});
 Object.defineProperty(exports, "failure", {
   enumerable: true,
   get: function () {

package/dist/components/NotificationProvider/messageBuilder.d.ts

@@ -1,6 +1,8 @@
 import { NotificationAction, NotificationType, QueuedNotification } from "./types";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 export declare const queue: (notification: NotificationType) => QueuedNotification;
-export declare const info: (message: ReactNode, title?: string) => NotificationType;
-export declare const success: (message: ReactNode, title?: string) => NotificationType;
+export declare const info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const success: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
 export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
+export declare const caution: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const formatErrorMessage: (message?: ReactNode, error?: unknown) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;

package/dist/components/NotificationProvider/messageBuilder.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.success = exports.queue = exports.info = exports.failure = void 0;
+exports.success = exports.queue = exports.info = exports.formatErrorMessage = exports.failure = exports.caution = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Notifications = require("../Notifications");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -15,18 +15,20 @@ const queue = notification => {
   };
 };
 exports.queue = queue;
-const info = (message, title) => {
+const info = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: _Notifications.NotificationSeverity.INFORMATION
   };
 };
 exports.info = info;
-const success = (message, title) => {
+const success = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: _Notifications.NotificationSeverity.POSITIVE
   };
 };
@@ -34,9 +36,26 @@ exports.success = success;
 const failure = (title, error, message, actions) => {
   return {
     actions,
-    message: error && error instanceof Error ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message, " ", error.message) : message,
+    message: formatErrorMessage(message, error),
     title,
     type: _Notifications.NotificationSeverity.NEGATIVE
   };
 };
-exports.failure = failure;
+exports.failure = failure;
+const caution = (message, title, actions) => {
+  return {
+    message,
+    actions,
+    title,
+    type: _Notifications.NotificationSeverity.CAUTION
+  };
+};
+exports.caution = caution;
+const formatErrorMessage = (message, error) => {
+  if (error && error instanceof Error) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message, " ", error.message);
+  } else {
+    return message;
+  }
+};
+exports.formatErrorMessage = formatErrorMessage;

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -60,6 +60,8 @@ const PreloadedList = () => {
       onClick: () => console.log("Retry clicked")
     }])
   }, "Add Error"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => toastNotify.caution("You have unsaved changes")
+  }, "Add Warning"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: toastNotify.toggleListView
   }, "Toggle List View"));
 };

package/dist/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -80,7 +80,7 @@ const ToastNotificationList = _ref => {
       setFilters(new Set());
       return;
     }
-    onDismiss();
+    onDismiss(notifications);
   };
   const getSeverityFilters = () => {
     const filterButtons = severityOrder.map(severity => {

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -6,12 +6,15 @@ export type ToastNotificationType = NotificationType & {
     timestamp?: ReactNode;
     id: string;
 };
+interface Props {
+    onDismiss?: (notifications?: ToastNotificationType[]) => void;
+}
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
-    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
-    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -81,6 +84,6 @@ console.log(count.positive);
 
 Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
 */
-declare const ToastNotificationProvider: FC<PropsWithChildren>;
+declare const ToastNotificationProvider: FC<PropsWithChildren<Props>>;
 export default ToastNotificationProvider;
 export declare const useToastNotification: () => ToastNotificationHelper;

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useToastNotification = exports.default = void 0;
 var _NotificationProvider = require("../../NotificationProvider");
-var _ = require("./..");
 var _ToastNotification = _interopRequireDefault(require("./ToastNotification"));
 var _ToastNotificationList = _interopRequireDefault(require("./ToastNotificationList"));
 var _react = _interopRequireWildcard(require("react"));
@@ -103,7 +102,8 @@ Alternatively, you can use the `ToastNotification` and `ToastNotificationList` c
 
 const ToastNotificationProvider = _ref => {
   let {
-    children
+    children,
+    onDismiss
   } = _ref;
   const [notifications, setNotifications] = (0, _react.useState)([]);
   const [showList, setShowList] = (0, _react.useState)(false);
@@ -140,10 +140,11 @@ const ToastNotificationProvider = _ref => {
     });
   };
   const addNotification = notification => {
+    var _notification$id;
     const notificationToAdd = {
       ...notification,
       timestamp: new Date().toLocaleString(),
-      id: Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
+      id: (_notification$id = notification.id) !== null && _notification$id !== void 0 ? _notification$id : Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
     };
     setNotifications(prev => {
       return [...prev, notificationToAdd];
@@ -152,6 +153,9 @@ const ToastNotificationProvider = _ref => {
     return notificationToAdd;
   };
   const clear = notifications => {
+    if (onDismiss) {
+      onDismiss(notifications);
+    }
     if (!notifications) {
       setNotifications([]);
       setShowList(false);
@@ -186,24 +190,21 @@ const ToastNotificationProvider = _ref => {
   });
   const helper = {
     notifications,
-    failure: (title, error, message, actions) => addNotification((0, _NotificationProvider.failure)(title, error, message, actions)),
-    info: (message, title, actions) => addNotification({
-      message,
-      actions,
-      title,
-      type: _.NotificationSeverity.INFORMATION
+    failure: (title, error, message, actions, id) => addNotification({
+      ...(0, _NotificationProvider.failure)(title, error, message, actions),
+      id
+    }),
+    info: (message, title, actions, id) => addNotification({
+      ...(0, _NotificationProvider.info)(message, title, actions),
+      id
     }),
-    success: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: _.NotificationSeverity.POSITIVE
+    success: (message, actions, title, id) => addNotification({
+      ...(0, _NotificationProvider.success)(message, title, actions),
+      id
     }),
-    caution: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: _.NotificationSeverity.CAUTION
+    caution: (message, actions, title, id) => addNotification({
+      ...(0, _NotificationProvider.caution)(message, title, actions),
+      id
     }),
     clear,
     toggleListView,

package/dist/esm/components/NotificationProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { NotificationConsumer, NotificationProvider, useNotify, } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
+export { info, success, failure, caution, queue } from "./messageBuilder";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./types";

package/dist/esm/components/NotificationProvider/index.js

@@ -1,2 +1,2 @@
 export { NotificationConsumer, NotificationProvider, useNotify } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
+export { info, success, failure, caution, queue } from "./messageBuilder";

package/dist/esm/components/NotificationProvider/messageBuilder.d.ts

@@ -1,6 +1,8 @@
 import { NotificationAction, NotificationType, QueuedNotification } from "./types";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 export declare const queue: (notification: NotificationType) => QueuedNotification;
-export declare const info: (message: ReactNode, title?: string) => NotificationType;
-export declare const success: (message: ReactNode, title?: string) => NotificationType;
+export declare const info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const success: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
 export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
+export declare const caution: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const formatErrorMessage: (message?: ReactNode, error?: unknown) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;

package/dist/esm/components/NotificationProvider/messageBuilder.js

@@ -7,25 +7,42 @@ export var queue = notification => {
     }
   };
 };
-export var info = (message, title) => {
+export var info = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: NotificationSeverity.INFORMATION
   };
 };
-export var success = (message, title) => {
+export var success = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: NotificationSeverity.POSITIVE
   };
 };
 export var failure = (title, error, message, actions) => {
   return {
     actions,
-    message: error && error instanceof Error ? /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message) : message,
+    message: formatErrorMessage(message, error),
     title,
     type: NotificationSeverity.NEGATIVE
   };
+};
+export var caution = (message, title, actions) => {
+  return {
+    message,
+    actions,
+    title,
+    type: NotificationSeverity.CAUTION
+  };
+};
+export var formatErrorMessage = (message, error) => {
+  if (error && error instanceof Error) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message);
+  } else {
+    return message;
+  }
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -51,6 +51,8 @@ var PreloadedList = () => {
       onClick: () => console.log("Retry clicked")
     }])
   }, "Add Error"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => toastNotify.caution("You have unsaved changes")
+  }, "Add Warning"), /*#__PURE__*/React.createElement(Button, {
     onClick: toastNotify.toggleListView
   }, "Toggle List View"));
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -73,7 +73,7 @@ var ToastNotificationList = _ref => {
       setFilters(new Set());
       return;
     }
-    onDismiss();
+    onDismiss(notifications);
   };
   var getSeverityFilters = () => {
     var filterButtons = severityOrder.map(severity => {

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -6,12 +6,15 @@ export type ToastNotificationType = NotificationType & {
     timestamp?: ReactNode;
     id: string;
 };
+interface Props {
+    onDismiss?: (notifications?: ToastNotificationType[]) => void;
+}
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
-    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
-    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -81,6 +84,6 @@ console.log(count.positive);
 
 Alternatively, you can use the `ToastNotification` and `ToastNotificationList` components directly, without using the provider.
 */
-declare const ToastNotificationProvider: FC<PropsWithChildren>;
+declare const ToastNotificationProvider: FC<PropsWithChildren<Props>>;
 export default ToastNotificationProvider;
 export declare const useToastNotification: () => ToastNotificationHelper;

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -3,8 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { failure as _failure } from "../../NotificationProvider";
-import { NotificationSeverity } from "./..";
+import { failure as _failure, info as _info, caution as _caution, success as _success } from "../../NotificationProvider";
 import ToastNotification from "./ToastNotification";
 import ToastNotificationList from "./ToastNotificationList";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -100,7 +99,8 @@ Alternatively, you can use the `ToastNotification` and `ToastNotificationList` c
 
 var ToastNotificationProvider = _ref => {
   var {
-    children
+    children,
+    onDismiss
   } = _ref;
   var [notifications, setNotifications] = useState([]);
   var [showList, setShowList] = useState(false);
@@ -137,9 +137,10 @@ var ToastNotificationProvider = _ref => {
     });
   };
   var addNotification = notification => {
+    var _notification$id;
     var notificationToAdd = _objectSpread(_objectSpread({}, notification), {}, {
       timestamp: new Date().toLocaleString(),
-      id: Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
+      id: (_notification$id = notification.id) !== null && _notification$id !== void 0 ? _notification$id : Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
     });
     setNotifications(prev => {
       return [...prev, notificationToAdd];
@@ -148,6 +149,9 @@ var ToastNotificationProvider = _ref => {
     return notificationToAdd;
   };
   var clear = notifications => {
+    if (onDismiss) {
+      onDismiss(notifications);
+    }
     if (!notifications) {
       setNotifications([]);
       setShowList(false);
@@ -182,25 +186,18 @@ var ToastNotificationProvider = _ref => {
   });
   var helper = {
     notifications,
-    failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
-    info: (message, title, actions) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.INFORMATION
-    }),
-    success: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.POSITIVE
-    }),
-    caution: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.CAUTION
-    }),
+    failure: (title, error, message, actions, id) => addNotification(_objectSpread(_objectSpread({}, _failure(title, error, message, actions)), {}, {
+      id
+    })),
+    info: (message, title, actions, id) => addNotification(_objectSpread(_objectSpread({}, _info(message, title, actions)), {}, {
+      id
+    })),
+    success: (message, actions, title, id) => addNotification(_objectSpread(_objectSpread({}, _success(message, title, actions)), {}, {
+      id
+    })),
+    caution: (message, actions, title, id) => addNotification(_objectSpread(_objectSpread({}, _caution(message, title, actions)), {}, {
+      id
+    })),
     clear,
     toggleListView,
     isListView: showList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.12.0",
+  "version": "2.14.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.26.1",
+    "vanilla-framework": "4.28.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },