highsoft-ui 1.0.111 → 1.0.113

package/dist/Notification-_vWBqFiA.js

@@ -0,0 +1,96 @@
+import { t as e } from "./clsx-ROFf4vs9.js";
+import { t } from "./esm-C1TDRARf.js";
+import { t as n } from "./Button-Bbc4vmW_.js";
+import { t as r } from "./Container-LAkF4ShX.js";
+import { t as i } from "./NewTag-C-3mRyvV.js";
+import { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+var u = {
+	active: "MhRkRW_active",
+	attention: "MhRkRW_attention",
+	brand: "MhRkRW_brand",
+	carousel: "MhRkRW_carousel",
+	close: "MhRkRW_close",
+	container: "MhRkRW_container",
+	content: "MhRkRW_content",
+	danger: "MhRkRW_danger",
+	description: "MhRkRW_description",
+	notification: "MhRkRW_notification",
+	slide: "MhRkRW_slide",
+	success: "MhRkRW_success",
+	title: "MhRkRW_title",
+	titleText: "MhRkRW_titleText"
+};
+//#endregion
+//#region lib/components/Notification/index.tsx
+function d({ id: d, content: f, variant: p = "brand", closable: m = !0, onClose: h }) {
+	let g = Array.isArray(f) ? f : [f], [_, v] = o(() => g.length > 1 ? Math.floor(Math.random() * g.length) : 0), [y, b] = o(!1), [x, S] = o(!1), C = y || x, w = g[_]?.url, T = w ? "a" : "div";
+	a(() => {
+		if (g.length <= 1 || C) return;
+		let e = window.setInterval(() => {
+			v((e) => (e + 1) % g.length);
+		}, 15e3);
+		return () => window.clearInterval(e);
+	}, [g.length, C]);
+	let E = () => b(!0), D = (e) => {
+		e.currentTarget.contains(e.relatedTarget) || b(!1);
+	}, O = () => S(!0), k = () => S(!1), A = (e, t = !0) => {
+		let n = /* @__PURE__ */ l(s, { children: [e.title && /* @__PURE__ */ l("span", {
+			className: u.title,
+			children: [e.tag === "new" && /* @__PURE__ */ c(i, {
+				variant: p,
+				icon: !1
+			}), /* @__PURE__ */ c("span", {
+				className: u.titleText,
+				children: e.title
+			})]
+		}), e.description && /* @__PURE__ */ c("span", {
+			className: u.description,
+			children: e.description
+		})] });
+		return /* @__PURE__ */ c("div", {
+			className: u.content,
+			"aria-hidden": !t,
+			children: n
+		});
+	};
+	return g.length ? /* @__PURE__ */ c(T, {
+		className: e(u.notification, u[p]),
+		"data-theme": "light",
+		...w ? {
+			href: w,
+			"data-track": "header-banner",
+			"data-track-action": "click",
+			"data-track-label": d || w
+		} : {},
+		onFocus: E,
+		onBlur: D,
+		onMouseEnter: O,
+		onMouseLeave: k,
+		children: /* @__PURE__ */ l(r, {
+			className: u.container,
+			children: [g.length > 1 ? /* @__PURE__ */ c("div", {
+				className: u.carousel,
+				children: g.map((t, n) => {
+					let r = n === _;
+					return /* @__PURE__ */ c("div", {
+						className: e(u.slide, { [u.active]: r }),
+						"aria-hidden": !r,
+						children: A(t, r)
+					}, `${t.title ?? t.description ?? "item"}-${n}`);
+				})
+			}) : A(g[0]), m && /* @__PURE__ */ c(n, {
+				variant: p === "brand" ? "brand" : "transparent",
+				size: 100,
+				className: u.close,
+				"aria-label": "Close notification",
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation(), h?.();
+				},
+				children: /* @__PURE__ */ c(t, {})
+			})]
+		})
+	}) : null;
+}
+//#endregion
+export { d as t };