boreal-ui 0.0.72 → 0.0.74

package/dist/next/NotificationCenter-JIX-pouI.cjs

@@ -0,0 +1,468 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+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-C1UIwOFN.cjs");
+;/* empty css                   */
+const Button = require("./Button-BZmph-Qr.cjs");
+const IconButton = require("./IconButton-4ySBEhn1.cjs");
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && /* @__PURE__ */ React.createContext(DefaultContext);
+var _excluded = ["attr", "size", "title"];
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function Tree2Element(tree) {
+  return tree && tree.map((node, i) => /* @__PURE__ */ React.createElement(node.tag, _objectSpread({
+    key: i
+  }, node.attr), Tree2Element(node.child)));
+}
+function GenIcon(data) {
+  return (props) => /* @__PURE__ */ React.createElement(IconBase, _extends({
+    attr: _objectSpread({}, data.attr)
+  }, props), Tree2Element(data.child));
+}
+function IconBase(props) {
+  var elem = (conf) => {
+    var {
+      attr,
+      size,
+      title
+    } = props, svgProps = _objectWithoutProperties(props, _excluded);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return /* @__PURE__ */ React.createElement("svg", _extends({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: _objectSpread(_objectSpread({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && /* @__PURE__ */ React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? /* @__PURE__ */ React.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
+}
+function FaCheckCircle(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" }, "child": [] }] })(props);
+}
+function FaExclamationCircle(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" }, "child": [] }] })(props);
+}
+function FaInfoCircle(props) {
+  return GenIcon({ "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z" }, "child": [] }] })(props);
+}
+const themeIcons = {
+  general: FaInfoCircle,
+  success: FaCheckCircle,
+  error: FaExclamationCircle,
+  warning: FaExclamationCircle,
+  info: FaInfoCircle
+};
+const BaseNotificationCenter = ({
+  notifications,
+  onRemove,
+  onClearAll,
+  fetchNotifications,
+  setNotifications,
+  maxNotifications = 10,
+  clearOldOnOverflow = true,
+  pollInterval = 5e3,
+  showClearAll = true,
+  controlRounding = borealStyleConfig.getDefaultRounding(),
+  controlShadow = borealStyleConfig.getDefaultShadow(),
+  notificationRounding = borealStyleConfig.getDefaultRounding(),
+  notificationShadow = borealStyleConfig.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,
+  "data-testid": testId = "notification-center"
+}) => {
+  const timers = React.useRef({});
+  const prevIds = React.useRef(/* @__PURE__ */ new Set());
+  const internalTitleId = `${testId}-title`;
+  const resolvedLabelledBy = ariaLabelledBy || internalTitleId;
+  React.useEffect(() => {
+    if (maxNotifications && notifications.length > maxNotifications && clearOldOnOverflow && setNotifications) {
+      const overflow = notifications.length - maxNotifications;
+      setNotifications((prev) => prev.slice(overflow));
+    }
+  }, [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 id = setInterval(() => alive && load(), pollInterval);
+    return () => {
+      clearInterval(id);
+      alive = false;
+    };
+  }, [fetchNotifications, pollInterval]);
+  React.useEffect(() => {
+    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 () => {
+      if (prevIds.current === currentIds) {
+        Object.values(timers.current).forEach(clearTimeout);
+        timers.current = {};
+      }
+    };
+  }, [notifications, onRemove]);
+  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",
+    {
+      className: classMap.wrapper,
+      role: "region",
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": resolvedLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.header, "data-testid": `${testId}-header`, children: [
+          !ariaLabelledBy && /* @__PURE__ */ require$$2.jsx("h3", { id: internalTitleId, children: "Notifications" }),
+          showClearAll && notifications.length > 0 && onClearAll && /* @__PURE__ */ require$$2.jsx(
+            Button2,
+            {
+              state: "error",
+              size: "small",
+              rounding: controlRounding,
+              shadow: controlShadow,
+              className: classMap.clearAll,
+              onClick: onClearAll,
+              "aria-label": clearAllAriaLabel,
+              "data-testid": `${testId}-clear-all`,
+              type: "button",
+              children: "Clear All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": liveRegionPoliteness,
+            "aria-relevant": liveRegionRelevant,
+            "aria-atomic": liveRegionAtomic,
+            className: classMap.body,
+            "data-testid": `${testId}-live-region`,
+            children: notifications.length === 0 ? /* @__PURE__ */ require$$2.jsx("p", { className: classMap.empty, "data-testid": `${testId}-empty`, children: emptyMessage }) : /* @__PURE__ */ require$$2.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__ */ require$$2.jsxs(
+                    "li",
+                    {
+                      className: classNames.combineClassNames(
+                        notificationClass,
+                        classMap[note.type || "info"]
+                      ),
+                      role: "listitem",
+                      "aria-label": note.ariaLabel,
+                      "aria-labelledby": note.ariaLabel ? void 0 : messageId,
+                      "aria-describedby": describedByIds || void 0,
+                      "data-testid": noteTestId,
+                      children: [
+                        /* @__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",
+                            {
+                              id: messageId,
+                              className: classMap.message,
+                              "data-testid": `${noteTestId}-message`,
+                              children: note.message
+                            }
+                          ),
+                          note.timestamp && /* @__PURE__ */ require$$2.jsx(
+                            "span",
+                            {
+                              id: timestampId,
+                              className: classMap.timestamp,
+                              "data-testid": `${noteTestId}-timestamp`,
+                              children: timestampStr
+                            }
+                          ),
+                          note.ariaDescription && /* @__PURE__ */ require$$2.jsx(
+                            "span",
+                            {
+                              id: descriptionId,
+                              className: classMap.srOnly,
+                              "data-testid": `${noteTestId}-description`,
+                              children: note.ariaDescription
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ require$$2.jsx(
+                          IconButton2,
+                          {
+                            className: classMap.close,
+                            state: "error",
+                            size: "small",
+                            outline: true,
+                            icon: CloseIcon.CloseIcon,
+                            onClick: () => onRemove(note.id),
+                            "aria-label": `${dismissButtonLabelPrefix} ${index + 1}`,
+                            title: "Dismiss",
+                            "data-testid": `${noteTestId}-dismiss`,
+                            type: "button"
+                          }
+                        )
+                      ]
+                    },
+                    note.id
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+BaseNotificationCenter.displayName = "BaseNotificationCenter";
+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,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  wrapper,
+  header,
+  body,
+  list,
+  notification,
+  "fade-in-up": "_fade-in-up_1vage_1",
+  primary,
+  success,
+  error,
+  warning,
+  info,
+  icon,
+  content,
+  message,
+  timestamp,
+  close,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  clearAll,
+  "fade-in": "_fade-in_1vage_1",
+  "slide-up": "_slide-up_1vage_1",
+  "spin-3d": "_spin-3d_1vage_1",
+  spin,
+  pulse,
+  "progress-grow": "_progress-grow_1vage_1",
+  "indeterminate-move": "_indeterminate-move_1vage_1",
+  "skeleton-loading": "_skeleton-loading_1vage_1"
+};
+const NotificationCenter = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(
+    BaseNotificationCenter,
+    {
+      ...props,
+      Button: Button.Button,
+      IconButton: IconButton.IconButton,
+      classMap: styles
+    }
+  );
+};
+NotificationCenter.displayName = "NotificationCenter";
+exports.NotificationCenter = NotificationCenter;
+//# sourceMappingURL=NotificationCenter-JIX-pouI.cjs.map