boreal-ui 0.0.1

package/dist/next/NotificationCenter-BTcM5bCY.cjs

@@ -0,0 +1,375 @@
+"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-Rr5d5Qts.cjs");
+const Button = require("./Button-DUh0L7vy.cjs");
+const IconButton = require("./IconButton-mY_E1gsn.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(),
+  Button: Button2,
+  IconButton: IconButton2,
+  classMap,
+  "data-testid": testId = "notification-center"
+}) => {
+  const timeouts = React.useRef({});
+  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;
+    const load = () => {
+      fetchNotifications().catch((err) => {
+        console.error("Failed to fetch notifications:", err);
+      });
+    };
+    load();
+    const intervalId = setInterval(load, pollInterval);
+    return () => clearInterval(intervalId);
+  }, [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);
+      }
+    });
+    return () => {
+      Object.values(timeouts.current).forEach(clearTimeout);
+    };
+  }, [notifications, onRemove]);
+  const notifcationClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.notification,
+      notificationShadow && classMap[`shadow${capitalize.capitalize(notificationShadow)}`],
+      notificationRounding && classMap[`round${capitalize.capitalize(notificationRounding)}`]
+    ),
+    []
+  );
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: classMap.wrapper,
+      role: "region",
+      "aria-label": "Notification center",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.header, "data-testid": `${testId}-header`, children: [
+          /* @__PURE__ */ require$$2.jsx("h3", { id: `${testId}-title`, 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": "Clear all notifications",
+              "data-testid": `${testId}-clear-all`,
+              children: "Clear All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ require$$2.jsx("div", { role: "status", "aria-live": "polite", "aria-relevant": "additions text", children: /* @__PURE__ */ require$$2.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__ */ require$$2.jsxs(
+            "li",
+            {
+              className: classNames.combineClassNames(
+                notifcationClass,
+                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.jsxs("div", { className: classMap.content, children: [
+                  /* @__PURE__ */ require$$2.jsx(
+                    "span",
+                    {
+                      className: classMap.message,
+                      "data-testid": `${noteTestId}-message`,
+                      children: note.message
+                    }
+                  ),
+                  note.timestamp && /* @__PURE__ */ require$$2.jsx(
+                    "span",
+                    {
+                      className: classMap.timestamp,
+                      "data-testid": `${noteTestId}-timestamp`,
+                      children: timestampStr
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ require$$2.jsx(
+                  IconButton2,
+                  {
+                    className: classMap.close,
+                    state: "error",
+                    size: "small",
+                    outline: true,
+                    icon: CloseIcon.CloseIcon,
+                    onClick: () => onRemove(note.id),
+                    "aria-label": `Dismiss notification ${index + 1}`,
+                    title: "Dismiss",
+                    "data-testid": `${noteTestId}-dismiss`
+                  }
+                )
+              ]
+            },
+            note.id
+          );
+        }) }) })
+      ]
+    }
+  );
+};
+const wrapper = "_wrapper_1vka4_187";
+const header = "_header_1vka4_195";
+const clearAll = "_clearAll_1vka4_201";
+const list = "_list_1vka4_205";
+const notification = "_notification_1vka4_218";
+const icon = "_icon_1vka4_228";
+const content = "_content_1vka4_232";
+const message = "_message_1vka4_235";
+const timestamp = "_timestamp_1vka4_239";
+const close = "_close_1vka4_243";
+const primary = "_primary_1vka4_251";
+const success = "_success_1vka4_254";
+const error = "_error_1vka4_257";
+const warning = "_warning_1vka4_260";
+const info = "_info_1vka4_263";
+const roundNone = "_roundNone_1vka4_267";
+const roundSmall = "_roundSmall_1vka4_271";
+const roundMedium = "_roundMedium_1vka4_275";
+const roundLarge = "_roundLarge_1vka4_279";
+const roundFull = "_roundFull_1vka4_283";
+const shadowNone = "_shadowNone_1vka4_287";
+const shadowLight = "_shadowLight_1vka4_291";
+const shadowMedium = "_shadowMedium_1vka4_295";
+const shadowStrong = "_shadowStrong_1vka4_299";
+const shadowIntense = "_shadowIntense_1vka4_303";
+const spin = "_spin_1vka4_1";
+const pulse = "_pulse_1vka4_1";
+const styles = {
+  wrapper,
+  header,
+  clearAll,
+  list,
+  notification,
+  "fade-in-up": "_fade-in-up_1vka4_1",
+  icon,
+  content,
+  message,
+  timestamp,
+  close,
+  primary,
+  success,
+  error,
+  warning,
+  info,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1vka4_1",
+  "slide-up": "_slide-up_1vka4_1",
+  "spin-3d": "_spin-3d_1vka4_1",
+  spin,
+  pulse,
+  "progress-grow": "_progress-grow_1vka4_1",
+  "indeterminate-move": "_indeterminate-move_1vka4_1",
+  "skeleton-loading": "_skeleton-loading_1vka4_1"
+};
+const NotificationCenter = (props) => {
+  return /* @__PURE__ */ require$$2.jsx(
+    BaseNotificationCenter,
+    {
+      ...props,
+      Button: Button.Button,
+      IconButton: IconButton.IconButton,
+      classMap: styles
+    }
+  );
+};
+exports.NotificationCenter = NotificationCenter;
+exports.themeIcons = themeIcons;
+//# sourceMappingURL=NotificationCenter-BTcM5bCY.cjs.map