highsoft-ui 1.0.84 → 1.0.86

package/dist/components/Notification/index.js

@@ -1,50 +1,80 @@
-import { jsx as n, jsxs as a } from "react/jsx-runtime";
-import "react";
-import { X as r } from "../../XClose-CCu1vrNS.js";
-import { c as l } from "../../clsx-OuTLNxxd.js";
-import { Button as R } from "../Button/index.js";
-import { Container as d } from "../Container/index.js";
-const m = "MhRkRW_attention", f = "MhRkRW_close", h = "MhRkRW_container", p = "MhRkRW_danger", u = "MhRkRW_description", k = "MhRkRW_notification", M = "MhRkRW_success", W = "MhRkRW_title", t = {
-  attention: m,
-  close: f,
-  container: h,
-  danger: p,
+import { jsx as i, jsxs as l, Fragment as m } from "react/jsx-runtime";
+import { useState as p, useEffect as v } from "react";
+import { X as M } from "../../XClose-CCu1vrNS.js";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import { Button as k } from "../Button/index.js";
+import { Container as W } from "../Container/index.js";
+const _ = "MhRkRW_active", g = "MhRkRW_attention", N = "MhRkRW_carousel", x = "MhRkRW_close", C = "MhRkRW_container", w = "MhRkRW_content", y = "MhRkRW_danger", A = "MhRkRW_description", I = "MhRkRW_notification", b = "MhRkRW_slide", j = "MhRkRW_success", X = "MhRkRW_title", e = {
+  active: _,
+  attention: g,
+  carousel: N,
+  close: x,
+  container: C,
+  content: w,
+  danger: y,
   default: "MhRkRW_default",
-  description: u,
-  notification: k,
-  success: M,
-  title: W
+  description: A,
+  notification: I,
+  slide: b,
+  success: j,
+  title: X
 };
-function j({
-  children: e,
+function q({
+  content: c,
   variant: o = "default",
-  description: i,
-  closable: s = !0,
-  onClose: c
+  closable: h = !0,
+  onClose: R
 }) {
-  return /* @__PURE__ */ n(
+  const n = Array.isArray(c) ? c : [c], [u, f] = p(
+    () => n.length > 1 ? Math.floor(Math.random() * n.length) : 0
+  );
+  v(() => {
+    if (n.length <= 1) return;
+    const t = window.setInterval(() => {
+      f((s) => (s + 1) % n.length);
+    }, 15e3);
+    return () => window.clearInterval(t);
+  }, [n.length]);
+  const a = (t) => {
+    const s = /* @__PURE__ */ l(m, { children: [
+      t.title && /* @__PURE__ */ i("span", { className: e.title, children: t.title }),
+      t.description && /* @__PURE__ */ i("span", { className: e.description, children: t.description })
+    ] });
+    return t.url ? /* @__PURE__ */ i("a", { href: t.url, className: e.content, children: s }) : /* @__PURE__ */ i("div", { className: e.content, children: s });
+  };
+  return n.length ? /* @__PURE__ */ i(
     "div",
     {
-      className: l(t.notification, t[o]),
+      className: d(e.notification, e[o]),
       "data-theme": "light",
-      children: /* @__PURE__ */ a(d, { className: t.container, children: [
-        /* @__PURE__ */ n("span", { className: t.title, children: e }),
-        i && /* @__PURE__ */ n("span", { className: t.description, children: i }),
-        s && /* @__PURE__ */ n(
-          R,
+      children: /* @__PURE__ */ l(W, { className: e.container, children: [
+        n.length > 1 ? /* @__PURE__ */ i("div", { className: e.carousel, "aria-live": "polite", children: n.map((t, s) => {
+          const r = s === u;
+          return /* @__PURE__ */ i(
+            "div",
+            {
+              className: d(e.slide, { [e.active]: r }),
+              "aria-hidden": !r,
+              children: a(t)
+            },
+            `${t.title ?? t.description ?? "item"}-${s}`
+          );
+        }) }) : a(n[0]),
+        h && /* @__PURE__ */ i(
+          k,
           {
             variant: o === "default" ? "brand" : "transparent",
             size: 100,
-            className: t.close,
+            className: e.close,
             "aria-label": "Close notification",
-            onClick: () => c?.(),
-            children: /* @__PURE__ */ n(r, {})
+            onClick: () => R?.(),
+            children: /* @__PURE__ */ i(M, {})
           }
         )
       ] })
     }
-  );
+  ) : null;
 }
 export {
-  j as Notification
+  q as Notification
 };