@canonical/react-components 2.5.0 → 2.5.2

package/dist/components/Notifications/ToastNotification/Toast.scss

@@ -35,7 +35,7 @@
 .toast-notification-list {
   background-color: white;
   box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
-  max-height: calc(100vh - 4.5rem);
+  max-height: calc(100dvh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
   z-index: 102;

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

@@ -155,6 +155,12 @@ const ToastNotificationList = _ref => {
 
   // Only filter input data if there are filters present
   const filteredNotifications = hasFilters ? notifications.filter(notification => filters.has(notification.type)) : notifications;
+  (0, _react.useEffect)(() => {
+    if (hasFilters && filteredNotifications.length === 0) {
+      // if there are no filtered notifications, reset the filters
+      setFilters(new Set());
+    }
+  }, [hasFilters, filteredNotifications]);
 
   // Don't assign alert role for notifications when expanded since we don't want
   // screen readers to announce every existing notification

package/dist/esm/components/Notifications/ToastNotification/Toast.scss

@@ -35,7 +35,7 @@
 .toast-notification-list {
   background-color: white;
   box-shadow: 0 0 2rem 0.5rem rgb(0 0 0 / 22%);
-  max-height: calc(100vh - 4.5rem);
+  max-height: calc(100dvh - 4.5rem);
   overflow: auto;
   padding: 0 0.5rem;
   z-index: 102;

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

@@ -3,7 +3,7 @@ import Button from "../../Button";
 import Icon from "../../Icon";
 import Notification from "../Notification";
 import { DefaultTitles } from "../Notification/Notification";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Animate from "./Animate";
 import { usePrefersReducedMotion } from "../../../hooks";
@@ -148,6 +148,12 @@ var ToastNotificationList = _ref => {
 
   // Only filter input data if there are filters present
   var filteredNotifications = hasFilters ? notifications.filter(notification => filters.has(notification.type)) : notifications;
+  useEffect(() => {
+    if (hasFilters && filteredNotifications.length === 0) {
+      // if there are no filtered notifications, reset the filters
+      setFilters(new Set());
+    }
+  }, [hasFilters, filteredNotifications]);
 
   // Don't assign alert role for notifications when expanded since we don't want
   // screen readers to announce every existing notification

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {