@devslab/dds-solid 0.29.2 → 0.31.0

package/dist/server.js

@@ -27,7 +27,7 @@ import { Toast, Toaster, createToaster } from "@ark-ui/solid/toast";
 import { space } from "@devslab/dds-tokens";
 import { Tooltip as Tooltip$1, useTooltip } from "@ark-ui/solid/tooltip";
 //#region src/left-nav.tsx
-var _tmpl$$7 = [
+var _tmpl$$8 = [
 	"<nav",
 	" class=\"dds-console-rail__nav dds-left-nav\"",
 	">",
@@ -92,7 +92,7 @@ function fillBadgeLabel(template, count) {
 function LeftNav(props) {
 	const [internalExpandedGroups, setInternalExpandedGroups] = createSignal(props.defaultExpandedGroups ?? props.nav.flatMap((group, index) => group.collapsible && group.items.some((item) => isActive(props.activePath, item.href, item.active)) ? [group.id ?? `group-${index}`] : []));
 	const expanded = () => props.expandedGroups ?? internalExpandedGroups();
-	return ssr(_tmpl$$7, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.labels.nav, true), false), escape(createComponent(For, {
+	return ssr(_tmpl$$8, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.labels.nav, true), false), escape(createComponent(For, {
 		get each() {
 			return props.nav;
 		},
@@ -139,7 +139,7 @@ function LeftNav(props) {
 }
 //#endregion
 //#region src/layout.tsx
-var _tmpl$$6 = [
+var _tmpl$$7 = [
 	"<div",
 	" class=\"dds-console-shell dds-layout\"",
 	"><a class=\"dds-console-skip dds-visually-hidden\" href=\"",
@@ -209,11 +209,11 @@ function Layout(props) {
 		document.addEventListener("keydown", key);
 		onCleanup(() => document.removeEventListener("keydown", key));
 	});
-	return ssr(_tmpl$$6, ssrHydrationKey(), ssrAttribute("data-navigation-position", escape(props.navigationPosition ?? "left", true), false) + ssrAttribute("data-surface", escape(props.surface, true), false) + ssrAttribute("data-hydrated", hydrated() ? "true" : escape(void 0, true), false), `#${escape(mainId, true)}`, escape(props.labels.skip), ssrAttribute("aria-controls", escape(railId, true), false) + ssrAttribute("aria-expanded", escape(open(), true), false), open() ? escape(props.labels.menuClose) : escape(props.labels.menuOpen), ssrAttribute("data-open", escape(String(open()), true), false), ssrAttribute("id", escape(railId, true), false), ssrAttribute("data-open", escape(String(open()), true), false), escape(props.railStart), escape(props.navigation), escape(props.railEnd), ssrAttribute("id", escape(mainId, true), false), ssrAttribute("data-width", escape(props.contentWidth ?? "workspace", true), false), props.header && ssr(_tmpl$2$4, ssrHydrationKey(), escape(props.header)), escape(props.children), props.footer && ssr(_tmpl$3$2, ssrHydrationKey(), escape(props.footer)));
+	return ssr(_tmpl$$7, ssrHydrationKey(), ssrAttribute("data-navigation-position", escape(props.navigationPosition ?? "left", true), false) + ssrAttribute("data-surface", escape(props.surface, true), false) + ssrAttribute("data-hydrated", hydrated() ? "true" : escape(void 0, true), false), `#${escape(mainId, true)}`, escape(props.labels.skip), ssrAttribute("aria-controls", escape(railId, true), false) + ssrAttribute("aria-expanded", escape(open(), true), false), open() ? escape(props.labels.menuClose) : escape(props.labels.menuOpen), ssrAttribute("data-open", escape(String(open()), true), false), ssrAttribute("id", escape(railId, true), false), ssrAttribute("data-open", escape(String(open()), true), false), escape(props.railStart), escape(props.navigation), escape(props.railEnd), ssrAttribute("id", escape(mainId, true), false), ssrAttribute("data-width", escape(props.contentWidth ?? "workspace", true), false), props.header && ssr(_tmpl$2$4, ssrHydrationKey(), escape(props.header)), escape(props.children), props.footer && ssr(_tmpl$3$2, ssrHydrationKey(), escape(props.footer)));
 }
 //#endregion
 //#region src/console-shell.tsx
-var _tmpl$$5 = [
+var _tmpl$$6 = [
 	"<a",
 	" class=\"dds-console-rail__brand\"",
 	"><img",
@@ -262,7 +262,7 @@ function ConsoleShell(props) {
 			return props.surface;
 		},
 		get railStart() {
-			return [ssr(_tmpl$$5, ssrHydrationKey(), ssrAttribute("href", escape(props.brand.href, true), false), ssrAttribute("src", escape(props.brand.mark, true), false), escape(props.brand.name)), createComponent(Show, {
+			return [ssr(_tmpl$$6, ssrHydrationKey(), ssrAttribute("href", escape(props.brand.href, true), false), ssrAttribute("src", escape(props.brand.mark, true), false), escape(props.brand.name)), createComponent(Show, {
 				get when() {
 					return memo(() => !!props.context)() && props.context.length > 0;
 				},
@@ -328,7 +328,7 @@ function ConsoleShell(props) {
 }
 //#endregion
 //#region src/dialog.tsx
-var _tmpl$$4 = [
+var _tmpl$$5 = [
 	"<div",
 	">",
 	"</div>"
@@ -452,7 +452,7 @@ function Dialog(props) {
 									return props.children;
 								},
 								get actions() {
-									return props.actions && ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
+									return props.actions && ssr(_tmpl$$5, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
 								}
 							};
 							return props.frame ? props.frame(parts) : [
@@ -551,7 +551,7 @@ function RadioGroup(props) {
 }
 //#endregion
 //#region src/icon.tsx
-var _tmpl$$3 = ["<g>", "</g>"];
+var _tmpl$$4 = ["<g>", "</g>"];
 var _tmpl$2$2 = [
 	"<title",
 	">",
@@ -600,7 +600,7 @@ function Icon(props) {
 		"<!--$-->",
 		local.label && ssr(_tmpl$2$2, ssrHydrationKey(), escape(local.label)),
 		"<!--/-->",
-		ssr(_tmpl$$3, icon().body)
+		ssr(_tmpl$$4, icon().body)
 	], true);
 }
 //#endregion
@@ -645,7 +645,7 @@ function createPendingAction() {
 }
 //#endregion
 //#region src/status-pill.tsx
-var _tmpl$$2 = [
+var _tmpl$$3 = [
 	"<code",
 	" data-status=\"",
 	"\">",
@@ -679,7 +679,7 @@ function createStatusPill(config) {
 				return known() || !open.has(props.domain);
 			},
 			get fallback() {
-				return ssr(_tmpl$$2, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
+				return ssr(_tmpl$$3, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
 			},
 			get children() {
 				return (() => {
@@ -806,6 +806,7 @@ function TabPanel(props) {
 }
 //#endregion
 //#region src/toast.tsx
+var _tmpl$$2 = ["<span", " class=\"dds-spinner\" aria-hidden=\"true\"></span>"];
 var ToastContext = createContext();
 function ToastProvider(props) {
 	const prefix = createUniqueId();
@@ -826,26 +827,108 @@ function ToastProvider(props) {
 		pauseOnPageIdle: true
 	});
 	let sequence = 0;
+	let disposed = false;
+	const records = /* @__PURE__ */ new Map();
+	const current = (record) => !disposed && records.get(record.id) === record && toaster.isVisible(record.id);
+	const remove = (id) => {
+		records.delete(id);
+		toaster.remove(id);
+	};
+	const optionsFor = (record) => {
+		const duration = record.duration ?? props.defaultDuration ?? 5e3;
+		return {
+			id: record.id,
+			description: record.message,
+			type: record.tone === "danger" ? "error" : record.tone ?? "info",
+			duration: record.tone === "loading" || duration <= 0 ? Infinity : duration,
+			meta: { dds: record },
+			action: record.action ? {
+				label: record.action.label,
+				onClick: () => {
+					if (!current(record)) return;
+					remove(record.id);
+					record.action?.onClick();
+				}
+			} : void 0,
+			onStatusChange: ({ status }) => {
+				if (status !== "visible" && records.get(record.id) === record) records.delete(record.id);
+			}
+		};
+	};
+	const replace = (record, input) => {
+		if (!current(record)) return;
+		const next = {
+			...input,
+			id: record.id
+		};
+		records.set(record.id, next);
+		toaster.update(record.id, optionsFor(next));
+	};
+	const show = (input) => {
+		const id = `dds-toast-${prefix}-${++sequence}`;
+		if (!disposed) {
+			const record = {
+				...input,
+				id
+			};
+			records.set(id, record);
+			toaster.create(optionsFor(record));
+		}
+		return id;
+	};
 	const api = {
-		show(input) {
-			const id = `dds-toast-${prefix}-${++sequence}`;
-			const duration = input.duration ?? props.defaultDuration ?? 5e3;
-			toaster.create({
-				id,
-				description: input.message,
-				type: input.tone === "danger" ? "error" : input.tone ?? "info",
-				duration: duration > 0 ? duration : Infinity,
-				meta: { dds: {
-					...input,
-					id
-				} }
+		show,
+		loading: (input) => show({
+			...input,
+			tone: "loading"
+		}),
+		update(id, patch) {
+			const record = records.get(id);
+			if (record) replace(record, {
+				...record,
+				...patch
+			});
+		},
+		promise(operation, options) {
+			const id = api.loading(options.loading);
+			const record = records.get(id);
+			const settle = (terminal, value, tone) => {
+				if (!record || !current(record)) return;
+				try {
+					const input = typeof terminal === "function" ? terminal(value) : terminal;
+					replace(record, {
+						...record,
+						...input,
+						tone: input.tone ?? tone
+					});
+				} catch {
+					if (current(record)) remove(id);
+				}
+			};
+			const result = Promise.resolve().then(() => typeof operation === "function" ? operation() : operation).then((value) => {
+				settle(options.success, value, "success");
+				return value;
+			}, (error) => {
+				settle(options.error, error, "danger");
+				throw error;
 			});
-			return id;
+			return Object.defineProperty(result, "id", {
+				value: id,
+				enumerable: true
+			});
+		},
+		dismiss: (id) => {
+			if (!disposed) remove(id);
 		},
-		dismiss: (id) => toaster.remove(id),
-		clear: () => toaster.remove()
+		clear: () => {
+			records.clear();
+			toaster.remove();
+		}
 	};
-	onCleanup(api.clear);
+	onCleanup(() => {
+		disposed = true;
+		api.clear();
+	});
 	return createComponent(ToastContext.Provider, {
 		value: api,
 		get children() {
@@ -866,21 +949,32 @@ function ToastProvider(props) {
 					const record = () => toast().meta?.dds;
 					return createComponent(Toast.Root, {
 						get ["class"]() {
-							return classes("dds-toast", `dds-toast--${record().tone ?? "info"}`);
+							return classes("dds-toast", `dds-toast--${record().tone ?? "info"}`, record().action && "dds-toast--action");
 						},
 						get role() {
 							return record().tone === "danger" ? "alert" : "status";
 						},
 						get children() {
-							return [createComponent(Toast.Description, { get children() {
-								return toast().description;
-							} }), props.dismissLabel && createComponent(Toast.CloseTrigger, {
-								"class": "dds-iconbtn dds-iconbtn--sm",
-								get ["aria-label"]() {
-									return memo(() => typeof props.dismissLabel === "function")() ? props.dismissLabel(record()) : props.dismissLabel;
-								},
-								children: "×"
-							})];
+							return [
+								record().tone === "loading" && ssr(_tmpl$$2, ssrHydrationKey()),
+								createComponent(Toast.Description, { get children() {
+									return toast().description;
+								} }),
+								record().action && createComponent(Toast.ActionTrigger, {
+									"class": "dds-btn dds-btn--secondary dds-btn--sm dds-toast__action",
+									type: "button",
+									get children() {
+										return record().action?.label;
+									}
+								}),
+								props.dismissLabel && createComponent(Toast.CloseTrigger, {
+									"class": "dds-iconbtn dds-iconbtn--sm",
+									get ["aria-label"]() {
+										return memo(() => typeof props.dismissLabel === "function")() ? props.dismissLabel(record()) : props.dismissLabel;
+									},
+									children: "×"
+								})
+							];
 						}
 					});
 				}