boreal-ui 0.0.71 → 0.0.73

package/dist/next/{NotificationCenter-Bo2NcO55.js → NotificationCenter-BrXxvcLm.js}

@@ -3,10 +3,10 @@ import React, { useRef, useEffect, useMemo } from "react";
 import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
-import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+import { a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
 /* empty css                 */
-import { B as Button } from "./Button-CARQQF9h.js";
-import { I as IconButton } from "./IconButton-Cl0mZxov.js";
+import { B as Button } from "./Button-BfgUzkgN.js";
+import { I as IconButton } from "./IconButton-CNiln4Qf.js";
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -167,6 +167,16 @@ const BaseNotificationCenter = ({
   controlShadow = getDefaultShadow(),
   notificationRounding = getDefaultRounding(),
   notificationShadow = getDefaultShadow(),
+  "aria-label": ariaLabel = "Notification center",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "list-aria-label": listAriaLabel,
+  liveRegionPoliteness = "polite",
+  liveRegionRelevant = "additions text",
+  liveRegionAtomic = false,
+  emptyMessage = "No notifications.",
+  dismissButtonLabelPrefix = "Dismiss notification",
+  clearAllAriaLabel = "Clear all notifications",
   Button: Button2,
   IconButton: IconButton2,
   classMap,
@@ -174,6 +184,8 @@ const BaseNotificationCenter = ({
 }) => {
   const timers = useRef({});
   const prevIds = useRef(/* @__PURE__ */ new Set());
+  const internalTitleId = `${testId}-title`;
+  const resolvedLabelledBy = ariaLabelledBy || internalTitleId;
   useEffect(() => {
     if (maxNotifications && notifications.length > maxNotifications && clearOldOnOverflow && setNotifications) {
       const overflow = notifications.length - maxNotifications;
@@ -232,11 +244,13 @@ const BaseNotificationCenter = ({
     {
       className: classMap.wrapper,
       role: "region",
-      "aria-label": "Notification center",
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": resolvedLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxs("div", { className: classMap.header, "data-testid": `${testId}-header`, children: [
-          /* @__PURE__ */ jsx("h3", { id: `${testId}-title`, children: "Notifications" }),
+          !ariaLabelledBy && /* @__PURE__ */ jsx("h3", { id: internalTitleId, children: "Notifications" }),
           showClearAll && notifications.length > 0 && onClearAll && /* @__PURE__ */ jsx(
             Button2,
             {
@@ -246,7 +260,7 @@ const BaseNotificationCenter = ({
               shadow: controlShadow,
               className: classMap.clearAll,
               onClick: onClearAll,
-              "aria-label": "Clear all notifications",
+              "aria-label": clearAllAriaLabel,
               "data-testid": `${testId}-clear-all`,
               type: "button",
               children: "Clear All"
@@ -257,72 +271,104 @@ const BaseNotificationCenter = ({
           "div",
           {
             role: "status",
-            "aria-live": "polite",
-            "aria-relevant": "additions text",
+            "aria-live": liveRegionPoliteness,
+            "aria-relevant": liveRegionRelevant,
+            "aria-atomic": liveRegionAtomic,
             className: classMap.body,
-            children: /* @__PURE__ */ jsx("ul", { className: classMap.list, "aria-labelledby": `${testId}-title`, children: notifications.map((note, index) => {
-              var _a;
-              const Icon = themeIcons[note.type || "info"];
-              const noteTestId = `${testId}-item-${note.id}`;
-              const timestampStr = (_a = note.timestamp) == null ? void 0 : _a.toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit"
-              });
-              return /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  className: combineClassNames(
-                    notificationClass,
-                    classMap[note.type || "info"]
-                  ),
-                  "data-testid": noteTestId,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        className: classMap.icon,
-                        "aria-hidden": "true",
-                        focusable: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: classMap.content, children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: classMap.message,
-                          "data-testid": `${noteTestId}-message`,
-                          children: note.message
-                        }
+            "data-testid": `${testId}-live-region`,
+            children: notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: classMap.empty, "data-testid": `${testId}-empty`, children: emptyMessage }) : /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: classMap.list,
+                "aria-labelledby": listAriaLabel ? void 0 : resolvedLabelledBy,
+                "aria-label": listAriaLabel,
+                children: notifications.map((note, index) => {
+                  var _a;
+                  const Icon = themeIcons[note.type || "info"];
+                  const noteTestId = `${testId}-item-${note.id}`;
+                  const messageId = `${noteTestId}-message`;
+                  const timestampId = `${noteTestId}-timestamp`;
+                  const descriptionId = note.ariaDescription ? `${noteTestId}-description` : void 0;
+                  const describedByIds = [
+                    note.timestamp ? timestampId : void 0,
+                    descriptionId
+                  ].filter(Boolean).join(" ");
+                  const timestampStr = (_a = note.timestamp) == null ? void 0 : _a.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  });
+                  return /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      className: combineClassNames(
+                        notificationClass,
+                        classMap[note.type || "info"]
                       ),
-                      note.timestamp && /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: classMap.timestamp,
-                          "data-testid": `${noteTestId}-timestamp`,
-                          children: timestampStr
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      IconButton2,
-                      {
-                        className: classMap.close,
-                        state: "error",
-                        size: "small",
-                        outline: true,
-                        icon: CloseIcon,
-                        onClick: () => onRemove(note.id),
-                        ariaLabel: `Dismiss notification ${index + 1}`,
-                        title: "Dismiss",
-                        "data-testid": `${noteTestId}-dismiss`,
-                        type: "button"
-                      }
-                    )
-                  ]
-                },
-                note.id
-              );
-            }) })
+                      role: "listitem",
+                      "aria-label": note.ariaLabel,
+                      "aria-labelledby": note.ariaLabel ? void 0 : messageId,
+                      "aria-describedby": describedByIds || void 0,
+                      "data-testid": noteTestId,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Icon,
+                          {
+                            className: classMap.icon,
+                            "aria-hidden": "true",
+                            focusable: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: classMap.content, children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              id: messageId,
+                              className: classMap.message,
+                              "data-testid": `${noteTestId}-message`,
+                              children: note.message
+                            }
+                          ),
+                          note.timestamp && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              id: timestampId,
+                              className: classMap.timestamp,
+                              "data-testid": `${noteTestId}-timestamp`,
+                              children: timestampStr
+                            }
+                          ),
+                          note.ariaDescription && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              id: descriptionId,
+                              className: classMap.srOnly,
+                              "data-testid": `${noteTestId}-description`,
+                              children: note.ariaDescription
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          IconButton2,
+                          {
+                            className: classMap.close,
+                            state: "error",
+                            size: "small",
+                            outline: true,
+                            icon: CloseIcon,
+                            onClick: () => onRemove(note.id),
+                            "aria-label": `${dismissButtonLabelPrefix} ${index + 1}`,
+                            title: "Dismiss",
+                            "data-testid": `${noteTestId}-dismiss`,
+                            type: "button"
+                          }
+                        )
+                      ]
+                    },
+                    note.id
+                  );
+                })
+              }
+            )
           }
         )
       ]
@@ -330,39 +376,39 @@ const BaseNotificationCenter = ({
   );
 };
 BaseNotificationCenter.displayName = "BaseNotificationCenter";
-const noScroll = "_noScroll_mu253_109";
-const errorMessage = "_errorMessage_mu253_110";
-const loadingContainer = "_loadingContainer_mu253_111";
-const hideScrollbar = "_hideScrollbar_mu253_103";
-const sr_only = "_sr_only_mu253_112";
-const wrapper = "_wrapper_mu253_628";
-const header = "_header_mu253_654";
-const body = "_body_mu253_678";
-const list = "_list_mu253_683";
-const notification = "_notification_mu253_709";
-const primary = "_primary_mu253_737";
-const success = "_success_mu253_740";
-const error = "_error_mu253_110";
-const warning = "_warning_mu253_746";
-const info = "_info_mu253_749";
-const icon = "_icon_mu253_752";
-const content = "_content_mu253_767";
-const message = "_message_mu253_770";
-const timestamp = "_timestamp_mu253_788";
-const close = "_close_mu253_806";
-const roundNone = "_roundNone_mu253_831";
-const roundSmall = "_roundSmall_mu253_835";
-const roundMedium = "_roundMedium_mu253_839";
-const roundLarge = "_roundLarge_mu253_843";
-const roundFull = "_roundFull_mu253_847";
-const shadowNone = "_shadowNone_mu253_851";
-const shadowLight = "_shadowLight_mu253_855";
-const shadowMedium = "_shadowMedium_mu253_859";
-const shadowStrong = "_shadowStrong_mu253_863";
-const shadowIntense = "_shadowIntense_mu253_867";
-const clearAll = "_clearAll_mu253_882";
-const spin = "_spin_mu253_1";
-const pulse = "_pulse_mu253_1";
+const noScroll = "_noScroll_1vage_109";
+const errorMessage = "_errorMessage_1vage_110";
+const loadingContainer = "_loadingContainer_1vage_111";
+const hideScrollbar = "_hideScrollbar_1vage_103";
+const sr_only = "_sr_only_1vage_112";
+const wrapper = "_wrapper_1vage_637";
+const header = "_header_1vage_663";
+const body = "_body_1vage_687";
+const list = "_list_1vage_692";
+const notification = "_notification_1vage_718";
+const primary = "_primary_1vage_746";
+const success = "_success_1vage_749";
+const error = "_error_1vage_110";
+const warning = "_warning_1vage_755";
+const info = "_info_1vage_758";
+const icon = "_icon_1vage_761";
+const content = "_content_1vage_776";
+const message = "_message_1vage_779";
+const timestamp = "_timestamp_1vage_797";
+const close = "_close_1vage_815";
+const roundNone = "_roundNone_1vage_840";
+const roundSmall = "_roundSmall_1vage_844";
+const roundMedium = "_roundMedium_1vage_848";
+const roundLarge = "_roundLarge_1vage_852";
+const roundFull = "_roundFull_1vage_856";
+const shadowNone = "_shadowNone_1vage_860";
+const shadowLight = "_shadowLight_1vage_864";
+const shadowMedium = "_shadowMedium_1vage_868";
+const shadowStrong = "_shadowStrong_1vage_872";
+const shadowIntense = "_shadowIntense_1vage_876";
+const clearAll = "_clearAll_1vage_891";
+const spin = "_spin_1vage_1";
+const pulse = "_pulse_1vage_1";
 const styles = {
   noScroll,
   errorMessage,
@@ -374,7 +420,7 @@ const styles = {
   body,
   list,
   notification,
-  "fade-in-up": "_fade-in-up_mu253_1",
+  "fade-in-up": "_fade-in-up_1vage_1",
   primary,
   success,
   error,
@@ -396,14 +442,14 @@ const styles = {
   shadowStrong,
   shadowIntense,
   clearAll,
-  "fade-in": "_fade-in_mu253_1",
-  "slide-up": "_slide-up_mu253_1",
-  "spin-3d": "_spin-3d_mu253_1",
+  "fade-in": "_fade-in_1vage_1",
+  "slide-up": "_slide-up_1vage_1",
+  "spin-3d": "_spin-3d_1vage_1",
   spin,
   pulse,
-  "progress-grow": "_progress-grow_mu253_1",
-  "indeterminate-move": "_indeterminate-move_mu253_1",
-  "skeleton-loading": "_skeleton-loading_mu253_1"
+  "progress-grow": "_progress-grow_1vage_1",
+  "indeterminate-move": "_indeterminate-move_1vage_1",
+  "skeleton-loading": "_skeleton-loading_1vage_1"
 };
 const NotificationCenter = (props) => {
   return /* @__PURE__ */ jsx(
@@ -418,7 +464,6 @@ const NotificationCenter = (props) => {
 };
 NotificationCenter.displayName = "NotificationCenter";
 export {
-  NotificationCenter as N,
-  themeIcons as t
+  NotificationCenter as N
 };
-//# sourceMappingURL=NotificationCenter-Bo2NcO55.js.map
+//# sourceMappingURL=NotificationCenter-BrXxvcLm.js.map