boreal-ui 0.0.30 → 0.0.32

package/dist/core/{NotificationCenter-DdPqMwuQ.cjs → NotificationCenter-DpdzdrPB.cjs}

@@ -6,8 +6,8 @@ const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
 ;/* empty css                   */
-const Button = require("./Button-BnyCKkUs.cjs");
-const IconButton = require("./IconButton-BADgP1DD.cjs");
+const Button = require("./Button-CD1ETVvS.cjs");
+const IconButton = require("./IconButton-D_W4nsPZ.cjs");
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -173,7 +173,8 @@ const BaseNotificationCenter = ({
   classMap,
   "data-testid": testId = "notification-center"
 }) => {
-  const timeouts = React.useRef({});
+  const timers = React.useRef({});
+  const prevIds = React.useRef(/* @__PURE__ */ new Set());
   React.useEffect(() => {
     if (maxNotifications && notifications.length > maxNotifications && clearOldOnOverflow && setNotifications) {
       const overflow = notifications.length - maxNotifications;
@@ -182,35 +183,50 @@ const BaseNotificationCenter = ({
   }, [notifications, maxNotifications, clearOldOnOverflow, setNotifications]);
   React.useEffect(() => {
     if (!fetchNotifications) return;
+    let alive = true;
     const load = () => {
       fetchNotifications().catch((err) => {
         console.error("Failed to fetch notifications:", err);
       });
     };
     load();
-    const intervalId = setInterval(load, pollInterval);
-    return () => clearInterval(intervalId);
+    const id = setInterval(() => alive && load(), pollInterval);
+    return () => {
+      clearInterval(id);
+      alive = false;
+    };
   }, [fetchNotifications, pollInterval]);
   React.useEffect(() => {
-    notifications.forEach((note) => {
-      if (note.duration && !timeouts.current[note.id]) {
-        timeouts.current[note.id] = setTimeout(() => {
-          onRemove(note.id);
-          delete timeouts.current[note.id];
-        }, note.duration);
+    const currentIds = new Set(notifications.map((n) => n.id));
+    for (const n of notifications) {
+      if (n.duration && !timers.current[n.id]) {
+        timers.current[n.id] = setTimeout(() => {
+          onRemove(n.id);
+          delete timers.current[n.id];
+        }, n.duration);
       }
-    });
+    }
+    for (const oldId of prevIds.current) {
+      if (!currentIds.has(oldId) && timers.current[oldId]) {
+        clearTimeout(timers.current[oldId]);
+        delete timers.current[oldId];
+      }
+    }
+    prevIds.current = currentIds;
     return () => {
-      Object.values(timeouts.current).forEach(clearTimeout);
+      if (prevIds.current === currentIds) {
+        Object.values(timers.current).forEach(clearTimeout);
+        timers.current = {};
+      }
     };
   }, [notifications, onRemove]);
-  const notifcationClass = React.useMemo(
+  const notificationClass = React.useMemo(
     () => classNames.combineClassNames(
       classMap.notification,
       notificationShadow && classMap[`shadow${capitalize.capitalize(notificationShadow)}`],
       notificationRounding && classMap[`round${capitalize.capitalize(notificationRounding)}`]
     ),
-    []
+    [classMap, notificationShadow, notificationRounding]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -233,6 +249,7 @@ const BaseNotificationCenter = ({
               onClick: onClearAll,
               "aria-label": "Clear all notifications",
               "data-testid": `${testId}-clear-all`,
+              type: "button",
               children: "Clear All"
             }
           )
@@ -249,13 +266,19 @@ const BaseNotificationCenter = ({
             "li",
             {
               className: classNames.combineClassNames(
-                notifcationClass,
+                notificationClass,
                 classMap[note.type || "info"]
               ),
               "data-testid": noteTestId,
-              "aria-label": `Notification ${index + 1}: ${note.message}${timestampStr ? ` at ${timestampStr}` : ""}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: classMap.icon, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon,
+                  {
+                    className: classMap.icon,
+                    "aria-hidden": "true",
+                    focusable: false
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.content, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
@@ -283,9 +306,10 @@ const BaseNotificationCenter = ({
                     outline: true,
                     icon: CloseIcon.CloseIcon,
                     onClick: () => onRemove(note.id),
-                    "aria-label": `Dismiss notification ${index + 1}`,
+                    ariaLabel: `Dismiss notification ${index + 1}`,
                     title: "Dismiss",
-                    "data-testid": `${noteTestId}-dismiss`
+                    "data-testid": `${noteTestId}-dismiss`,
+                    type: "button"
                   }
                 )
               ]
@@ -297,6 +321,7 @@ const BaseNotificationCenter = ({
     }
   );
 };
+BaseNotificationCenter.displayName = "BaseNotificationCenter";
 const classes = {
   wrapper: "notification_center",
   header: "notification_center_header",
@@ -336,4 +361,4 @@ const NotificationCenter = (props) => {
 };
 exports.NotificationCenter = NotificationCenter;
 exports.themeIcons = themeIcons;
-//# sourceMappingURL=NotificationCenter-DdPqMwuQ.cjs.map
+//# sourceMappingURL=NotificationCenter-DpdzdrPB.cjs.map