boreal-ui 0.0.31 → 0.0.33

package/dist/next/{NotificationCenter-BIuJj-PB.cjs → NotificationCenter-dkrHsIKr.cjs}

@@ -5,8 +5,8 @@ const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
-const Button = require("./Button-G1PFBSqU.cjs");
-const IconButton = require("./IconButton-SZdNlqIZ.cjs");
+const Button = require("./Button-sIKQmn_c.cjs");
+const IconButton = require("./IconButton--X_Bqn4g.cjs");
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -172,7 +172,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;
@@ -181,35 +182,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__ */ require$$2.jsxs(
     "div",
@@ -232,6 +248,7 @@ const BaseNotificationCenter = ({
               onClick: onClearAll,
               "aria-label": "Clear all notifications",
               "data-testid": `${testId}-clear-all`,
+              type: "button",
               children: "Clear All"
             }
           )
@@ -248,13 +265,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__ */ require$$2.jsx(Icon, { className: classMap.icon, "aria-hidden": "true" }),
+                /* @__PURE__ */ require$$2.jsx(
+                  Icon,
+                  {
+                    className: classMap.icon,
+                    "aria-hidden": "true",
+                    focusable: false
+                  }
+                ),
                 /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.content, children: [
                   /* @__PURE__ */ require$$2.jsx(
                     "span",
@@ -282,9 +305,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"
                   }
                 )
               ]
@@ -296,40 +320,41 @@ const BaseNotificationCenter = ({
     }
   );
 };
-const wrapper = "_wrapper_1w6km_187";
-const header = "_header_1w6km_195";
-const clearAll = "_clearAll_1w6km_201";
-const list = "_list_1w6km_205";
-const notification = "_notification_1w6km_218";
-const icon = "_icon_1w6km_228";
-const content = "_content_1w6km_232";
-const message = "_message_1w6km_235";
-const timestamp = "_timestamp_1w6km_239";
-const close = "_close_1w6km_243";
-const primary = "_primary_1w6km_251";
-const success = "_success_1w6km_254";
-const error = "_error_1w6km_257";
-const warning = "_warning_1w6km_260";
-const info = "_info_1w6km_263";
-const roundNone = "_roundNone_1w6km_267";
-const roundSmall = "_roundSmall_1w6km_271";
-const roundMedium = "_roundMedium_1w6km_275";
-const roundLarge = "_roundLarge_1w6km_279";
-const roundFull = "_roundFull_1w6km_283";
-const shadowNone = "_shadowNone_1w6km_287";
-const shadowLight = "_shadowLight_1w6km_291";
-const shadowMedium = "_shadowMedium_1w6km_295";
-const shadowStrong = "_shadowStrong_1w6km_299";
-const shadowIntense = "_shadowIntense_1w6km_303";
-const spin = "_spin_1w6km_1";
-const pulse = "_pulse_1w6km_1";
+BaseNotificationCenter.displayName = "BaseNotificationCenter";
+const wrapper = "_wrapper_182fu_187";
+const header = "_header_182fu_195";
+const clearAll = "_clearAll_182fu_201";
+const list = "_list_182fu_205";
+const notification = "_notification_182fu_218";
+const icon = "_icon_182fu_228";
+const content = "_content_182fu_232";
+const message = "_message_182fu_235";
+const timestamp = "_timestamp_182fu_239";
+const close = "_close_182fu_243";
+const primary = "_primary_182fu_251";
+const success = "_success_182fu_254";
+const error = "_error_182fu_257";
+const warning = "_warning_182fu_260";
+const info = "_info_182fu_263";
+const roundNone = "_roundNone_182fu_267";
+const roundSmall = "_roundSmall_182fu_271";
+const roundMedium = "_roundMedium_182fu_275";
+const roundLarge = "_roundLarge_182fu_279";
+const roundFull = "_roundFull_182fu_283";
+const shadowNone = "_shadowNone_182fu_287";
+const shadowLight = "_shadowLight_182fu_291";
+const shadowMedium = "_shadowMedium_182fu_295";
+const shadowStrong = "_shadowStrong_182fu_299";
+const shadowIntense = "_shadowIntense_182fu_303";
+const spin = "_spin_182fu_1";
+const pulse = "_pulse_182fu_1";
 const styles = {
   wrapper,
   header,
   clearAll,
   list,
   notification,
-  "fade-in-up": "_fade-in-up_1w6km_1",
+  "fade-in-up": "_fade-in-up_182fu_1",
   icon,
   content,
   message,
@@ -350,14 +375,14 @@ const styles = {
   shadowMedium,
   shadowStrong,
   shadowIntense,
-  "fade-in": "_fade-in_1w6km_1",
-  "slide-up": "_slide-up_1w6km_1",
-  "spin-3d": "_spin-3d_1w6km_1",
+  "fade-in": "_fade-in_182fu_1",
+  "slide-up": "_slide-up_182fu_1",
+  "spin-3d": "_spin-3d_182fu_1",
   spin,
   pulse,
-  "progress-grow": "_progress-grow_1w6km_1",
-  "indeterminate-move": "_indeterminate-move_1w6km_1",
-  "skeleton-loading": "_skeleton-loading_1w6km_1"
+  "progress-grow": "_progress-grow_182fu_1",
+  "indeterminate-move": "_indeterminate-move_182fu_1",
+  "skeleton-loading": "_skeleton-loading_182fu_1"
 };
 const NotificationCenter = (props) => {
   return /* @__PURE__ */ require$$2.jsx(
@@ -372,4 +397,4 @@ const NotificationCenter = (props) => {
 };
 exports.NotificationCenter = NotificationCenter;
 exports.themeIcons = themeIcons;
-//# sourceMappingURL=NotificationCenter-BIuJj-PB.cjs.map
+//# sourceMappingURL=NotificationCenter-dkrHsIKr.cjs.map