@canonical/react-components 2.10.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js +1 -0
  2. package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts +20 -8
  3. package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js +35 -10
  4. package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js +1 -0
  5. package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts +20 -8
  6. package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js +36 -11
  7. package/package.json +1 -1
package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js CHANGED
@@ -34,6 +34,7 @@ const PreloadedList = () => {
34
34
  toastNotify.success("Settings saved successfully");
35
35
  toastNotify.info("Your changes are syncing in the background");
36
36
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
37
+ toastNotify.caution("You have unsaved changes.");
37
38
  toastNotify.toggleListView();
38
39
  // eslint-disable-next-line react-hooks/exhaustive-deps
39
40
  }, []);
package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts CHANGED
@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
8
8
  };
9
9
  interface ToastNotificationHelper {
10
10
  notifications: ToastNotificationType[];
11
- success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
12
- info: (message: ReactNode, title?: string) => ToastNotificationType;
11
+ success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
12
+ info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
13
13
  failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
14
+ caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
14
15
  clear: (notification?: ToastNotificationType[]) => void;
15
16
  toggleListView: () => void;
16
17
  isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
25
26
  Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
26
27
  Notifications automatically dismiss after a delay unless manually dismissed or expanded.
27
28
 
28
- | **Values** | **Description** |
29
- |----------------------------------|---------------------------------------------------------------------------------|
30
- | `toastNotify.success()` | Displays a success toast. Optionally accepts actions. |
29
+ | **Values** | **Description** |
30
+ |----------------------------------|--------------------------------------------------------------------------------|
31
+ | `toastNotify.success()` | Displays a success toast. Optionally accepts actions and a title. |
31
32
  | `toastNotify.info()` | Displays an info toast. Optionally accepts a custom title. |
32
33
  | `toastNotify.failure()` | Displays a failure toast with an error and optional message or actions. |
34
+ | `toastNotify.caution()` | Displays a caution toast. Optionally accepts actions and a title. |
33
35
  | `toastNotify.clear()` | Clears specific toasts, or all toasts if none are specified. |
34
36
  | `toastNotify.toggleListView()` | Toggles the notification list view open or closed. |
35
37
  | `toastNotify.countBySeverity` | Returns the count of notifications grouped by severity (e.g., success, info). |
@@ -41,6 +43,7 @@ Some example usages:
41
43
  toastNotify.success("Your changes have been saved.");
42
44
  toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
43
45
  ```
46
+
44
47
  2. **Show an info toast:**
45
48
  ```
46
49
  toastNotify.info("Your changes are syncing in the background.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
52
55
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
53
56
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
54
57
  ```
55
- 4. **Clear notifications:**
58
+
59
+ 4. **Show a caution toast:**
60
+ ```
61
+ toastNotify.caution("Your changes have not been saved.");
62
+ toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
63
+ ```
64
+
65
+ 5. **Clear notifications:**
56
66
  ```
57
67
  toastNotify.clear(); // clears all toast notifications
58
68
  toastNotify.clear([notificationId]); // clears specific toast notifications
59
69
  ```
60
- 5. **Toggle the notification list view:**
70
+
71
+ 6. **Toggle the notification list view:**
61
72
  ```
62
73
  toastNotify.toggleListView();
63
74
  ```
64
- 6. **Get the count of notifications by severity:**
75
+
76
+ 7. **Get the count of notifications by severity:**
65
77
  ```
66
78
  const count = toastNotify.countBySeverity;
67
79
  console.log(count.positive);
package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js CHANGED
@@ -21,12 +21,14 @@ const initialNotification = {
21
21
  const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
22
22
  /** List of all active toast notifications */
23
23
  notifications: [],
24
- /** Show a success toast. Optionally pass actions. */
24
+ /** Show a success toast. Optionally pass actions and a title. */
25
25
  success: () => initialNotification,
26
- /** Show an info toast. Optionally pass a custom title. */
26
+ /** Show an info toast. Optionally pass a custom title and actions. */
27
27
  info: () => initialNotification,
28
28
  /** Show a failure toast with an error and optional message/actions. */
29
29
  failure: () => initialNotification,
30
+ /** Show a caution toast. Optionally pass actions and a title. */
31
+ caution: () => initialNotification,
30
32
  /** Clear one or more specific toasts, or all if none provided. */
31
33
  clear: () => null,
32
34
  /** Toggle between single toast view and list view. */
@@ -43,11 +45,12 @@ const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
43
45
  Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
44
46
  Notifications automatically dismiss after a delay unless manually dismissed or expanded.
45
47
 
46
- | **Values** | **Description** |
47
- |----------------------------------|---------------------------------------------------------------------------------|
48
- | `toastNotify.success()` | Displays a success toast. Optionally accepts actions. |
48
+ | **Values** | **Description** |
49
+ |----------------------------------|--------------------------------------------------------------------------------|
50
+ | `toastNotify.success()` | Displays a success toast. Optionally accepts actions and a title. |
49
51
  | `toastNotify.info()` | Displays an info toast. Optionally accepts a custom title. |
50
52
  | `toastNotify.failure()` | Displays a failure toast with an error and optional message or actions. |
53
+ | `toastNotify.caution()` | Displays a caution toast. Optionally accepts actions and a title. |
51
54
  | `toastNotify.clear()` | Clears specific toasts, or all toasts if none are specified. |
52
55
  | `toastNotify.toggleListView()` | Toggles the notification list view open or closed. |
53
56
  | `toastNotify.countBySeverity` | Returns the count of notifications grouped by severity (e.g., success, info). |
@@ -59,6 +62,7 @@ Some example usages:
59
62
  toastNotify.success("Your changes have been saved.");
60
63
  toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
61
64
  ```
65
+
62
66
  2. **Show an info toast:**
63
67
  ```
64
68
  toastNotify.info("Your changes are syncing in the background.");
@@ -70,16 +74,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
70
74
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
71
75
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
72
76
  ```
73
- 4. **Clear notifications:**
77
+
78
+ 4. **Show a caution toast:**
79
+ ```
80
+ toastNotify.caution("Your changes have not been saved.");
81
+ toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
82
+ ```
83
+
84
+ 5. **Clear notifications:**
74
85
  ```
75
86
  toastNotify.clear(); // clears all toast notifications
76
87
  toastNotify.clear([notificationId]); // clears specific toast notifications
77
88
  ```
78
- 5. **Toggle the notification list view:**
89
+
90
+ 6. **Toggle the notification list view:**
79
91
  ```
80
92
  toastNotify.toggleListView();
81
93
  ```
82
- 6. **Get the count of notifications by severity:**
94
+
95
+ 7. **Get the count of notifications by severity:**
83
96
  ```
84
97
  const count = toastNotify.countBySeverity;
85
98
  console.log(count.positive);
@@ -174,12 +187,24 @@ const ToastNotificationProvider = _ref => {
174
187
  const helper = {
175
188
  notifications,
176
189
  failure: (title, error, message, actions) => addNotification((0, _NotificationProvider.failure)(title, error, message, actions)),
177
- info: (message, title) => addNotification((0, _NotificationProvider.info)(message, title)),
178
- success: (message, actions) => addNotification({
190
+ info: (message, title, actions) => addNotification({
179
191
  message,
180
192
  actions,
193
+ title,
194
+ type: _.NotificationSeverity.INFORMATION
195
+ }),
196
+ success: (message, actions, title) => addNotification({
197
+ message,
198
+ actions,
199
+ title,
181
200
  type: _.NotificationSeverity.POSITIVE
182
201
  }),
202
+ caution: (message, actions, title) => addNotification({
203
+ message,
204
+ actions,
205
+ title,
206
+ type: _.NotificationSeverity.CAUTION
207
+ }),
183
208
  clear,
184
209
  toggleListView,
185
210
  isListView: showList,
package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js CHANGED
@@ -25,6 +25,7 @@ var PreloadedList = () => {
25
25
  toastNotify.success("Settings saved successfully");
26
26
  toastNotify.info("Your changes are syncing in the background");
27
27
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
28
+ toastNotify.caution("You have unsaved changes.");
28
29
  toastNotify.toggleListView();
29
30
  // eslint-disable-next-line react-hooks/exhaustive-deps
30
31
  }, []);
package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts CHANGED
@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
8
8
  };
9
9
  interface ToastNotificationHelper {
10
10
  notifications: ToastNotificationType[];
11
- success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
12
- info: (message: ReactNode, title?: string) => ToastNotificationType;
11
+ success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
12
+ info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
13
13
  failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
14
+ caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
14
15
  clear: (notification?: ToastNotificationType[]) => void;
15
16
  toggleListView: () => void;
16
17
  isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
25
26
  Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
26
27
  Notifications automatically dismiss after a delay unless manually dismissed or expanded.
27
28
 
28
- | **Values** | **Description** |
29
- |----------------------------------|---------------------------------------------------------------------------------|
30
- | `toastNotify.success()` | Displays a success toast. Optionally accepts actions. |
29
+ | **Values** | **Description** |
30
+ |----------------------------------|--------------------------------------------------------------------------------|
31
+ | `toastNotify.success()` | Displays a success toast. Optionally accepts actions and a title. |
31
32
  | `toastNotify.info()` | Displays an info toast. Optionally accepts a custom title. |
32
33
  | `toastNotify.failure()` | Displays a failure toast with an error and optional message or actions. |
34
+ | `toastNotify.caution()` | Displays a caution toast. Optionally accepts actions and a title. |
33
35
  | `toastNotify.clear()` | Clears specific toasts, or all toasts if none are specified. |
34
36
  | `toastNotify.toggleListView()` | Toggles the notification list view open or closed. |
35
37
  | `toastNotify.countBySeverity` | Returns the count of notifications grouped by severity (e.g., success, info). |
@@ -41,6 +43,7 @@ Some example usages:
41
43
  toastNotify.success("Your changes have been saved.");
42
44
  toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
43
45
  ```
46
+
44
47
  2. **Show an info toast:**
45
48
  ```
46
49
  toastNotify.info("Your changes are syncing in the background.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
52
55
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
53
56
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
54
57
  ```
55
- 4. **Clear notifications:**
58
+
59
+ 4. **Show a caution toast:**
60
+ ```
61
+ toastNotify.caution("Your changes have not been saved.");
62
+ toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
63
+ ```
64
+
65
+ 5. **Clear notifications:**
56
66
  ```
57
67
  toastNotify.clear(); // clears all toast notifications
58
68
  toastNotify.clear([notificationId]); // clears specific toast notifications
59
69
  ```
60
- 5. **Toggle the notification list view:**
70
+
71
+ 6. **Toggle the notification list view:**
61
72
  ```
62
73
  toastNotify.toggleListView();
63
74
  ```
64
- 6. **Get the count of notifications by severity:**
75
+
76
+ 7. **Get the count of notifications by severity:**
65
77
  ```
66
78
  const count = toastNotify.countBySeverity;
67
79
  console.log(count.positive);
package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js CHANGED
@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
3
3
  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; }
4
4
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
5
5
  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); }
6
- import { failure as _failure, info as _info } from "../../NotificationProvider";
6
+ import { failure as _failure } from "../../NotificationProvider";
7
7
  import { NotificationSeverity } from "./..";
8
8
  import ToastNotification from "./ToastNotification";
9
9
  import ToastNotificationList from "./ToastNotificationList";
@@ -18,12 +18,14 @@ var initialNotification = {
18
18
  var ToastNotificationContext = /*#__PURE__*/createContext({
19
19
  /** List of all active toast notifications */
20
20
  notifications: [],
21
- /** Show a success toast. Optionally pass actions. */
21
+ /** Show a success toast. Optionally pass actions and a title. */
22
22
  success: () => initialNotification,
23
- /** Show an info toast. Optionally pass a custom title. */
23
+ /** Show an info toast. Optionally pass a custom title and actions. */
24
24
  info: () => initialNotification,
25
25
  /** Show a failure toast with an error and optional message/actions. */
26
26
  failure: () => initialNotification,
27
+ /** Show a caution toast. Optionally pass actions and a title. */
28
+ caution: () => initialNotification,
27
29
  /** Clear one or more specific toasts, or all if none provided. */
28
30
  clear: () => null,
29
31
  /** Toggle between single toast view and list view. */
@@ -40,11 +42,12 @@ var ToastNotificationContext = /*#__PURE__*/createContext({
40
42
  Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
41
43
  Notifications automatically dismiss after a delay unless manually dismissed or expanded.
42
44
 
43
- | **Values** | **Description** |
44
- |----------------------------------|---------------------------------------------------------------------------------|
45
- | `toastNotify.success()` | Displays a success toast. Optionally accepts actions. |
45
+ | **Values** | **Description** |
46
+ |----------------------------------|--------------------------------------------------------------------------------|
47
+ | `toastNotify.success()` | Displays a success toast. Optionally accepts actions and a title. |
46
48
  | `toastNotify.info()` | Displays an info toast. Optionally accepts a custom title. |
47
49
  | `toastNotify.failure()` | Displays a failure toast with an error and optional message or actions. |
50
+ | `toastNotify.caution()` | Displays a caution toast. Optionally accepts actions and a title. |
48
51
  | `toastNotify.clear()` | Clears specific toasts, or all toasts if none are specified. |
49
52
  | `toastNotify.toggleListView()` | Toggles the notification list view open or closed. |
50
53
  | `toastNotify.countBySeverity` | Returns the count of notifications grouped by severity (e.g., success, info). |
@@ -56,6 +59,7 @@ Some example usages:
56
59
  toastNotify.success("Your changes have been saved.");
57
60
  toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
58
61
  ```
62
+
59
63
  2. **Show an info toast:**
60
64
  ```
61
65
  toastNotify.info("Your changes are syncing in the background.");
@@ -67,16 +71,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
67
71
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
68
72
  toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
69
73
  ```
70
- 4. **Clear notifications:**
74
+
75
+ 4. **Show a caution toast:**
76
+ ```
77
+ toastNotify.caution("Your changes have not been saved.");
78
+ toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
79
+ ```
80
+
81
+ 5. **Clear notifications:**
71
82
  ```
72
83
  toastNotify.clear(); // clears all toast notifications
73
84
  toastNotify.clear([notificationId]); // clears specific toast notifications
74
85
  ```
75
- 5. **Toggle the notification list view:**
86
+
87
+ 6. **Toggle the notification list view:**
76
88
  ```
77
89
  toastNotify.toggleListView();
78
90
  ```
79
- 6. **Get the count of notifications by severity:**
91
+
92
+ 7. **Get the count of notifications by severity:**
80
93
  ```
81
94
  const count = toastNotify.countBySeverity;
82
95
  console.log(count.positive);
@@ -170,12 +183,24 @@ var ToastNotificationProvider = _ref => {
170
183
  var helper = {
171
184
  notifications,
172
185
  failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
173
- info: (message, title) => addNotification(_info(message, title)),
174
- success: (message, actions) => addNotification({
186
+ info: (message, title, actions) => addNotification({
175
187
  message,
176
188
  actions,
189
+ title,
190
+ type: NotificationSeverity.INFORMATION
191
+ }),
192
+ success: (message, actions, title) => addNotification({
193
+ message,
194
+ actions,
195
+ title,
177
196
  type: NotificationSeverity.POSITIVE
178
197
  }),
198
+ caution: (message, actions, title) => addNotification({
199
+ message,
200
+ actions,
201
+ title,
202
+ type: NotificationSeverity.CAUTION
203
+ }),
179
204
  clear,
180
205
  toggleListView,
181
206
  isListView: showList,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-components",
3
- "version": "2.10.0",
3
+ "version": "2.11.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": {