@canonical/react-components 3.7.1 → 3.8.0

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

@@ -5,6 +5,8 @@ interface Props {
     notification: ToastNotificationType;
     onDismiss: (notification?: ToastNotificationType[]) => void;
     show: boolean;
+    onHoverStart?: () => void;
+    onHoverEnd?: () => void;
 }
 declare const ToastNotification: FC<Props>;
 export default ToastNotification;

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

@@ -17,7 +17,9 @@ const ToastNotification = _ref => {
   let {
     notification,
     onDismiss,
-    show
+    show,
+    onHoverStart,
+    onHoverEnd
   } = _ref;
   if (!notification) {
     return null;
@@ -42,7 +44,9 @@ const ToastNotification = _ref => {
     },
     className: "toast-animate"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "toast-notification"
+    className: "toast-notification",
+    onMouseEnter: onHoverStart,
+    onMouseLeave: onHoverEnd
   }, /*#__PURE__*/_react.default.createElement(_.default, {
     title: (_notification$title = notification.title) !== null && _notification$title !== void 0 ? _notification$title : _Notification.DefaultTitles[notification.type],
     actions: notification.actions,
@@ -58,6 +62,8 @@ const ToastNotification = _ref => {
 };
 ToastNotification.propTypes = {
   onDismiss: _propTypes.default.func.isRequired,
-  show: _propTypes.default.bool.isRequired
+  show: _propTypes.default.bool.isRequired,
+  onHoverStart: _propTypes.default.func,
+  onHoverEnd: _propTypes.default.func
 };
 var _default = exports.default = ToastNotification;

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

@@ -146,6 +146,18 @@ const ToastNotificationProvider = _ref => {
       return null;
     });
   };
+  const pauseTimer = () => {
+    if (notificationTimer && typeof notificationTimer !== "boolean") {
+      clearTimeout(notificationTimer);
+      setNotificationTimer(true); // mark as paused
+    }
+  };
+  const resumeTimer = () => {
+    if (notificationTimer === true) {
+      // only resume if previously paused
+      showNotificationWithDelay();
+    }
+  };
   const addNotification = notification => {
     var _notification$id;
     const notificationToAdd = {
@@ -227,7 +239,9 @@ const ToastNotificationProvider = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_ToastNotification.default, {
     notification: latestNotification,
     onDismiss: clear,
-    show: !!showNotification
+    show: !!showNotification,
+    onHoverStart: pauseTimer,
+    onHoverEnd: resumeTimer
   }), /*#__PURE__*/_react.default.createElement(_ToastNotificationList.default, {
     notifications: notifications,
     groupedCount: countBySeverity,

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

@@ -5,6 +5,8 @@ interface Props {
     notification: ToastNotificationType;
     onDismiss: (notification?: ToastNotificationType[]) => void;
     show: boolean;
+    onHoverStart?: () => void;
+    onHoverEnd?: () => void;
 }
 declare const ToastNotification: FC<Props>;
 export default ToastNotification;

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

@@ -10,7 +10,9 @@ var ToastNotification = _ref => {
   var {
     notification,
     onDismiss: _onDismiss,
-    show
+    show,
+    onHoverStart,
+    onHoverEnd
   } = _ref;
   if (!notification) {
     return null;
@@ -35,7 +37,9 @@ var ToastNotification = _ref => {
     },
     className: "toast-animate"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "toast-notification"
+    className: "toast-notification",
+    onMouseEnter: onHoverStart,
+    onMouseLeave: onHoverEnd
   }, /*#__PURE__*/React.createElement(Notification, {
     title: (_notification$title = notification.title) !== null && _notification$title !== void 0 ? _notification$title : DefaultTitles[notification.type],
     actions: notification.actions,
@@ -51,6 +55,8 @@ var ToastNotification = _ref => {
 };
 ToastNotification.propTypes = {
   onDismiss: _pt.func.isRequired,
-  show: _pt.bool.isRequired
+  show: _pt.bool.isRequired,
+  onHoverStart: _pt.func,
+  onHoverEnd: _pt.func
 };
 export default ToastNotification;

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

@@ -143,6 +143,18 @@ var ToastNotificationProvider = _ref => {
       return null;
     });
   };
+  var pauseTimer = () => {
+    if (notificationTimer && typeof notificationTimer !== "boolean") {
+      clearTimeout(notificationTimer);
+      setNotificationTimer(true); // mark as paused
+    }
+  };
+  var resumeTimer = () => {
+    if (notificationTimer === true) {
+      // only resume if previously paused
+      showNotificationWithDelay();
+    }
+  };
   var addNotification = notification => {
     var _notification$id;
     var notificationToAdd = _objectSpread(_objectSpread({}, notification), {}, {
@@ -219,7 +231,9 @@ var ToastNotificationProvider = _ref => {
   }, children, /*#__PURE__*/React.createElement(ToastNotification, {
     notification: latestNotification,
     onDismiss: clear,
-    show: !!showNotification
+    show: !!showNotification,
+    onHoverStart: pauseTimer,
+    onHoverEnd: resumeTimer
   }), /*#__PURE__*/React.createElement(ToastNotificationList, {
     notifications: notifications,
     groupedCount: countBySeverity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.7.1",
+  "version": "3.8.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.37.2",
+    "vanilla-framework": "4.38.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },